当前位置: 首页 > Web前端 > vue.js

关于高德地图的问题

时间:2023-04-01 12:16:44 vue.js

一、设置3D效果1、初始化地图时打开3D视图,设置视角和设置光照(AmbientLight环境光源,DirectionLight平行光源),添加3D图层(Object3DLayer),创建Object3D实例,并将Object3D实例添加到object3dLayer。,绘制省市边界functionDrawSection(cityName,district,isSearchNextLevel){district.search(cityName,function(status,result){console.log('result===',result)letbounds=result.districtList[0].boundaries;if(bounds){for(leti=0;i{letpolyline=nullletstrokeColor=currentData&¤tData.name===item.name?'#F9E446':item.colorif(item&&item.type==='MultiLineString'){item.coordinates.forEach(iitem=>{polyline=newAMap.Polyline({path:iitem,data:item,strokeWeight:8,strokeColor:strokeColor,//线条颜色lineJoin:'round'//折线拐点连接点的样式})})}elseif(item){//[[],[]]polyline=newAMap.Polyline({path:item.coordinates,data:item,strokeWeight:8,strokeColor:strokeColor,lineJoin:'round'//折线拐点交界处的样式})}letmap=this.map//绘制当前线//给地图实例添加折线map.add(polyline)this.polylines.push(polyline)polyline.on('click',this.polylineClick)})},4.点击一条线或一个点的事件year:this.year,zl:data.name}).then(res=>{让detail=res.data[0]让riverItem=getRiverItem()riverItem.forEach(item=>{if(item.name==='jll'||item.name==='ssl'){item.label=item.label+'('+this.year+')'+':'}else{item.label=item.label+':'}})letriverInfo=this.setContentByItem(riverItem,detail)letmyRow=''+detail.zl+'

'lethtml=''+myRow+riverInfo+'
'this.infoWindow.setContent(html)this.infoWindow.open(this.map,position)})},通过js循环arr染dom内容setContentByItem(arr,detail){letInfoDom=''for(leti=0;i{arrVal+=this.getArrDomByType(item)})}让unit=val&&arr[i].unit?arr[i].unit:''让showVal=arrVal?''+arrVal+'
':val?val+unit:'-'InfoDom+=''+arr[i].label+''+showVal+'
'}returnInfoDom},五、加载海量点letvalidList=[]if(list&&list.length){list.forEach((item,ind)=>{letlon=item[0]让lat=item[1]if(lon&&lat&&lon!=='0.0'&&lat!=='0.0'){item.lnglat=[lon,lat]让icon=this.newRiverIcon()item.style=indstyle.push(icon)validList.push(item)}})}varmass=newAMap.MassMarks(validList,{opacity:1,zIndex:111,cursor:'pointer',风格:style})letmap=this.mapthis.mass=massmass.setMap(map)六、热图渲染varheatmap;map.plugin(["AMap.Heatmap"],function(){//初始化热图对象heatmap=newAMap.Heatmap(map,{radius:1,//给定半径opacity:[1,1],gradient:{0.5:'rgb(117,211,248)',0.65:'rgb(117,211,248)',0.7:'rgb(117,211,248)',0.9:'rgb(117,211,248)',1.0:'rgb(117,211,248)'}});//设置数据集:数据为北京“公园”数据的一部分heatmap.setDataSet({data:validList,max:0.1});});7.MapresetremoveMarkers(){if(this.mass){this.mass.clear()//清除质量点this.infoWindow.close()//关闭所有信息窗口}},resetMap(){this.removeMarkers()this.map.setCenter([100.907295,35.901474])this.map.setZoom(6.8)让infoWindowContent=document.getElementsByClassName('amap-info-content')[0]if(infoWindowContent){infoWindowContent.style.display='无'}},