当前位置: 首页 > Web前端 > JavaScript

广州行政区划立体实现

时间:2023-03-27 10:51:17 JavaScript

璁板綍鏅烘収骞垮窞琛屾斂鍖哄垝鐢熶骇鏁堟灉銆傛樉绀烘晥鏋滈渶瑕佸皢鐩告満璋冩暣鍒扮湡鍖椾綅缃紝鍚戜笅鐪嬪嵆鍙€傜湅璧锋潵寰堝鏉俹(鈺枴鈺?o鍏跺疄灏辨槸鐢诲嚑涓猵olygon3ds锛岀劧鍚庣敤marker鏍囪涓€涓嬨€備竴鑸垎涓哄嚑灞傦紙椤跺眰銆佷腑灞傘€佸簳灞傝楗帮級銆傜湅鍥剧墖銆?.绗竴姝ユ槸甯冪疆鐜锛氭竻闄ゆ墍鏈夊浘灞傦紝鍚敤榛戞殫妯″紡锛岃缃浉鏈轰綅缃甠_g.camera.set(473660.9325,2558256.117344,227589.52,-85.993263,-84.615585,0)__g.weather.setDarkMode(true)2銆佺浜屾鏄粠.geojson鏂囦欢涓幏鍙栫偣鏁版嵁锛岄渶瑕佹瘡涓猙lock鐨勭偣鏁版嵁锛堢粯鍒舵瘡涓猙lock鐨勬晥鏋滐級锛涗娇鐢╬olygon3d缁樺埗姣忎釜鍧楃殑褰㈢姸/***娣诲姞椤堕儴鏁版嵁锛堢涓€灞傦級*/constaddTopLayer=()=>{constpolygonArr:any=[]//鑾峰彇鏁版嵁getLayer().then(async(data:any)=>{data.features.forEach((item:any,index:number)=>{constplaceObj=placeNameArr.find((i:any)=>i.code==item.properties.code)consttop={id:'top_polygon_'+index,coordinates:item.geometry.coordinates,color:placeObj.color,//棰滆壊鍊糷eight:200,//3D澶氳竟褰㈤珮搴ntensity:0.3,//浜害鏍峰紡:1,generateTop:true,//鏄惁鐢熸垚椤堕潰generateSide:true,//鏄惁鐢熸垚generateBottom:true//鏄惁鐢熸垚搴曢潰}polygon3dArr.push('top_polygon_'+index)polygonArr.push(top)//鐢熸垚杈规constborderCoord=JSON.parse(JSON.stringify(item.geometry.coordinates))borderCoord.forEach((item:any)=>{item.forEach((i:any)=>{i[2]=400})})constborder={id:'top_border_'+index,//澶氳竟褰㈠敮涓€identifieridcoordinates:borderCoord,//缁勬垚澶氳竟褰㈢殑鍧愭爣鐐规暟缁刢olor:'#000',style:8,intensity:1,height:1500//3D澶氳竟褰㈢殑楂樺害}polygon3dArr.push('top_border_'+index)polygonArr.push(border)})//鎵归噺娣诲姞澶氳竟褰onstres=await__g.polygon3d.add(polygonArr,null)//浼樺寲addif(res.result){__g.polygon3d.show(polygon3dArr)}})}3銆傜涓夋娣诲姞搴曢儴瑁呴グ灞傦紙鎺у埗姣忓眰楂樺害锛?***娣诲姞搴曢儴瑁呴グ灞?/constaddBottomLayer=()=>{constpolygonArr:Array=[]getBorder().then(async(data:any)=>{data.features.forEach((item:any,index:number)=>{constcoordinate1=JSON.parse(JSON.stringify(item.geometry.coordinates[0]))//bottomlayerblue-璧峰楂樺害0锛岄珮搴?0coordinate1.forEach((item:Array)=>{item.forEach((i:any)=>{i[2]=-100})})constbottom1={id:'bottom1_'+index,//澶氳竟褰㈠敮涓€鏍囪瘑绗dcoordinates:coordinate1,//缁勬垚澶氳竟褰㈢殑鍧愭爣鐐规暟缁刢olor:'#122e36',style:2,intensity:1,height:100//3D澶氳竟褰㈢殑楂樺害}polygon3dArr.push('bottom1_'+index)polygonArr.push(bottom1)constcoordinate2=JSON.parse(JSON.stringify(item.geometry.coordinates[0]))//2灞傜伆鑹?璧峰楂樺害60锛岄珮搴?60coordinate2.forEach((item:Array)=>{item.forEach((i:any)=>{i[2]=-300})})constbottom2={id:'bottom2_'+index,//澶氳竟褰㈠敮涓€鏍囪瘑idcoordinates:coordinate2,//鏋勬垚澶氳竟褰㈢殑鍧愭爣鐐规暟缁刢olor:[0.2,0.2,0.2,1],style:2,height:500//3D澶氳竟褰㈢殑楂樺害}polygon3dArr.push('bottom2_'+index)polygonArr.push(bottom2)//3灞傝摑缁胯壊-璧峰楂樺害120锛岄珮搴?00constcoordinate3=JSON.parse(JSON.stringify(item.geometry.coordinates[0]))coordinate3.forEach((item:Array)=>{item.forEach((i:any)=>{i[2]=-600})})constbottom3={id:'bottom3_'+index,//澶氳竟褰㈠敮涓€鏍囪瘑idcoordinates:coordinate3,//鏋勬垚澶氳竟褰㈢殑鍧愭爣鐐规暟缁刢olor:'#1d8eae',style:4,height:1000//3D澶氳竟褰㈢殑楂樺害}polygon3dArr.push('bottom3_'+index)polygonArr.push(bottom3)})//鎵归噺娣诲姞澶氳竟褰onstres=await__g.polygon3d.add(polygonArr,null)//浼樺寲addif(res.result){__g.polygon3d.show(polygon3dArr)}})}4.绗洓姝ユ坊鍔犳枃瀛桪isplay/***娣诲姞涓績鐐?/constaddMakerLayer=async()=>{constmarkerArr:any=[]constmarker3dArr:any=[]placeNameArr.forEach((item:any,index:number)=>{constcoordinate=item.coordinatecoordinate[0]=coordinate[0]+500coordinate[1]=coordinate[1]-500coordinate[2]=100constoMarker={id:'marker_label_'+绱㈠紩,coordinate:鍧愭爣,//鍧愭爣浣嶇疆鑼冨洿:[0,1000000],//鍙鑼冨洿鏂囧瓧:item.name,//鏄剧ず鏂囧瓧textRange:[0,1000000],//鏂囧瓧鍙鑼冨洿[杩戝垏璺?杩滃垏璺漖textBackgroundColor:[0,0,0,0],//鏂囧瓧鑳屾櫙鑹瞗ontSize:16,//fontsizetextOffset:[0,0,0],fontOutlineSize:1,//瀛椾綋杞粨澶у皬fontColor:Color.Black,//瀛椾綋棰滆壊fontOutlineColor:Color.White,//瀛椾綋杞粨棰滆壊displayMode:2//鏄剧ず妯″紡:鐩告満绉诲姩鏃舵樉绀猴紝鍙備笌鍥為伩鑱氬悎}shmarkerArr.push('marker_label_'+index)markerArr.push(oMarker)})//鍔犵偣constres=await__g.marker.add(markerArr)//浼樺寲addif(res.result){__g.marker.show(shmarkerArr)}}5.绗簲姝ユ帶鍒惰鏄剧ず鐨勭被浼煎湴鍥剧殑琛屾斂鍖哄垝棰滆壊/***鑾峰彇鏁扮粍棰滆壊*@paramcolorArr*/constgetColorArr=(colorArr:number[])=>{return[colorArr[0]/255,colorArr[1]/255,colorArr[2]/255,1]}6.绗叚姝ョ寮€椤甸潰娓呴櫎鎵€鏈夋搷浣滐紝浣跨敤鏄剧ず锛岄殣钘忔垜thod鏄洜涓哄鏋滄瘡娆¢兘clear鍜宎dd锛屼細娴垂鎬ц兘锛岃€屼笖涓€鏃︽暟鎹噺寰堝ぇ锛屾瘡娆oad浼氬緢闀裤€備娇鐢╯how,hide鍙姞涓€娆★紝鍗充娇寰堟參涔熸槸绗竴娆°€傛參锛岀◢鍚庢樉绀?***Restore*/constcleanAdminStrativeArea=()=>{__g.weather.setDarkMode(false)__g.polygon3d.hide(polygon3dArr)__g.marker.hide(shmarkerArr)__g.marker3d.hide(shmarker3dArr)}鏈€鍚庨檮涓婃暟鎹牸寮廲onstplaceNameArr:any=[{name:'浠庡寲鍖?,color:getColorArr([190,232,255]),鍧愭爣:[469115.90625,2617369.75,499.98999],code:440117000000}......]鍢縹灏辫繖涔堢畝鍗曪紝杩欎箞瀹规槗锛侊紒锛侌煒侌煒侌煒佹枃绔狅紝鎮ㄥ彲浠ヨ闂互鍓嶇殑鏂囩珷锛屼篃鍙互鍦ㄨ繖閲屾煡鐪?/p>