全域展示/点聚合单域展示行政区划自定义图层样例展示1.全域展示/点聚合注意事项：1.将AMap.Map绑定dom放在搜索行政查询外；2.使用高德地图.MarkerClusterer插件点聚合3.无需加点map.add/*loadmap*/asyncgetMaps(){this.loading=true;awaitMapLoader().then((AMap)=>{constmap=newAMap.Map("map_three",{showLabel:true,mapStyle:"amap://styles/ccab8afcf9c843aefac72ff71d705eb4",中心:[114.085947,22.547],viewMode:"3D",labelzIndex:130,pitch:30,zoom:11.5zooms:[11,18],features:["road","point","bg"],});constdistrict=newAMap.DistrictSearch({subdistrict:0,extensions:"all",level:"district",});district.search("宝安区",(status,result)=>{const[bounds,mask]=[result.districtList[0].boundaries,[]]if(bounds){for(leti=0,l=bounds.length;i{constcolors={};如果(!colors[adcode])colors[adcode]="rgba(7,111,142,0.7)";返回颜色[广告代码]；};map.on("点击",()=>{this.maps.infowindow.close();});this.maps.map=地图；this.maps.AMap=AMap;this.drawStaion(AMap,地图);});},(e)=>{console.error("地图加载失败",e);});},/*生成地图点*/asyncdrawStaion(AMap,map,pointList=this.maps.pointList){const[data,markers]=[pointList,[]];让信息窗口=空；for(letiindata){constcurPoint=data[i];//点状态颜色conststatus=this.getStatus(curPoint.status);//点模板constcontents=this.setMapInfo(status,curPoint,curPoint.status);//弹出窗口模板constwindowPopup=this.openPopup(curPoint,this);//点实例constmarker=newAMap.Marker({content:contents,position:[curPoint.longitude,curPoint.latitude],});//弹出实例infowindow=newAMap.InfoWindow({is自定义：true，锚点：“底部中心”，偏移量：newAMap.Pixel(5,-12),});marker.on("click",(e)=>{//防止每个item都被遍历最后一个infowindow.setContent(windowPopup.$el);infowindow.open(map,marker.getPosition());});markers.push（标记）；this.maps.infowindow=infowindow;this.markers=标记；}/*点聚合部分*/AMap.plugin(["AMap.MarkerClusterer"],()=>{newAMap.MarkerClusterer(map,markers,{gridSize:80,renderClusterMarker:_renderClusterMarker,});constcount=markers.length;var_renderClusterMarker=function(context){varfactor=Math.pow(context.count/count,1/18);vardiv=document.createElement("div");varHue=180-factor*180;varbgColor="hsla("+Hue+",100%,50%,0.7)";varfontColor="hsla("+Hue+",100%,20%,1)";varborderColor="hsla("+色调+",100%,40%,1)";varshadowColor="hsla("+Hue+",100%,50%,1)";div.style.backgroundColor=bgColor;varsize=Math.round(30+Math.pow(context.count/count,1/5)*20);div.style.width=div.style.height=size+"px";div.style.border="solid1px"+borderColor;div.style.borderRadius=size/2+"px";div.style.boxShadow="001px"+shadowColor;div.innerHTML=context.count;div.style.lineHeight=size+"px";div.style.color=fontColor;div.style.fontSize="14px";div.style.textAlign="center";context.marker.setOffset(newAMap.Pixel(-size/2,-size/2));context.marker.setContent(div);};})//地图。add(markers);//不需要在地图上添加this.loading=false;},2.在单个区域内显示，区域外不显示注意：1.把AMap.Map绑定的部分放到dom上进入搜索查询函数体；2.高德地图.DistrictSearch查询中的level属性，如果显示city就改成city，要显示area就改成district。（官网奥特oNaviMaps有查询层级，按需更改即可)constdistrict=newAMap.DistrictSearch({subdistrict:1,extensions:"all",level:"district",features:["road","point","bg"],//设置地图显示内容});district.search("宝安区",(status,result)=>{const[bounds,mask]=[result.districtList[0].boundaries,[]]for(leti=0;i{constdisProvince=newAMap.DistrictLayer.Province({zIndex:12,depth:2,styles:{fill:(properties)=>{varadcode=properties.adcode;returngetColorByAdcode(adcode);},"county-stroke":"#09b8bf",//线条颜色},});disProvince.setMap（地图）；});//随机颜色函数getColorByAdcode(adcode){constcolors={};如果(!colors[adcode])colors[adcode]="transparent";返回颜色[广告代码]；};//this.maps.map=地图；//关闭信息窗口maps.on("click",()=>{this.infoWindow.close();});});3、行政区划注意点：1、newAMap.DistrictSearch在查询中添加level值“city”2、AMap.DistrictLayer.Province添加adcode子行政区域代码asyncgetMaps(){this.loading=true;awaitMapLoader().then((AMap)=>{constmap=newAMap.Map("map_three",{showLabel:true,mapStyle:"amap://styles/ccab8afcf9c843aefac72ff71d705eb4",中心:[114.085947,22.547],viewMode:"3D",labelzIndex:130,pitch:30,zoom:11.5,zooms:[11,18],features:["road","point","bg"],});constdistrict=新AMap.DistrictSearch({subdistrict:0,extensions:"all",level:"city",//city});district.search("深圳",(status,result)=>{const[bounds,mask]=[result.districtList[0].boundaries,[]]if(bounds){for(leti=0,l=bounds.length;i{constcolors={};如果(!colors[adcode])colors[adcode]='#'+parseInt(0x1000000*Math.random()).toString(16).padStart(6,'0');返回颜色[广告代码]；};map.on("点击",()=>{this.maps.infowindow.close();});});},(e)=>{console.error("加载地图失败",e);});},4.自定义层（图片）注意：使用AMap.ImageLayer添加到AMap.Map的layers属性中asyncgetMaps(){this.loading=true;awaitMapLoader().then((AMap)=>{//引入图像层constimageLayer=newAMap.ImageLayer({url:require("@/assets/images/home/map_bg2-2.png"),bounds:newAMap.Bounds([113.748587,22.515094],//左下角[113.990000,22.860618]//右上),zooms:[11,18],});constmap=newAMap.Map("map_five",{showLabel:true,mapStyle:"amap://styles/ccab8afcf9c843aefac72ff71d705eb4",viewMode:"3D",labelzIndex:130,pitch:30,rotateEnable:true,center:[113.873549,22.642423],resizeEnable:true,zooms:[11,18],features:["road","point","bg"],layers:[newAMap.TileLayer(),imageLayer],//图层实例放在这里});map.on("点击",(e)=>{this.maps.infowindow.close();});this.maps.map=地图；this.maps.AMap=AMap;让arr=[];arr=this.maps.pointList.filter((item)=>{returnthis.checkList.includes(item.label);});this.drawStaion(AMap,map,arr);},(e)=>{console.error("加载地图失败",e);});},五、样图展示1.全区域/点聚合展示2.个别区域展示3.行政区划划分4.自定义图层
