关于高德地图只显示一个市的区域、其他区域不显示的解决方案

关于高德地图只显示一个市的区域、其他区域不显示的解决方案

直接上效果图

如上图，只显示了西安市的区域地图，并且鼠标移动至县区级行政区划会有提示文字，其他区域都是不显示的。
下面直接上代码 用的是vue

template

<div class="map" ><divclass="map-container"id="container"tabindex="0"></div>
</div>

scrpit

import AMap from "AMap";
export default {create(){this.initMap()},data() {return {map: null};},methods:{initMap() {var opts = {subdistrict: 0,extensions: 'all',level: 'city'};//利用行政区查询获取边界构建mask路径//也可以直接通过经纬度构建mask路径var district = new AMap.DistrictSearch(opts);district.search('西安市', (status, result)=> {var bounds = result.districtList[0].boundaries;var mask = []for(var i =0;i<bounds.length;i+=1){mask.push([bounds[i]])}this.map = new AMap.Map('container', {mask:mask,center:[108.948024, 34.263161],//西安市的定位点、其他城市换成对应的经纬度 或者用api获取城市经纬度也行disableSocket:true,viewMode:'2D',showLabel:false,labelzIndex:130,pitch:20,zoom:9,resizeEnable: true,showIndoorMap: false,//mapStyle: "", 地图样式features: ["point", "road", "bg"],zoomEnable: true,});//AMap.plugin("AMap.Geocoder", ()=> {//der = new AMap.Geocoder({});//});this.initOther()});  },initOther(){AMapUI.load(["ui/geo/DistrictExplorer", "lib/$"], (DistrictExplorer, $) => {let districtExplorer = new DistrictExplorer({map: this.map, //关联的地图实例eventSupport: true,});let adcode = 610100; //全国的区划编码districtExplorer.loadAreaNode(adcode, (error, areaNode) => {if (error) {(error);return;}//绘制载入的区划节点derAreaNode(districtExplorer, areaNode);});var $tipMarkerContent = $('<div class="tipMarker top"></div>');var tipMarker = new AMap.Marker({content: $(0),offset: new AMap.Pixel(0, 0),bubble: true,});("featureMousemove", function (e, feature) {//更新提示位置tipMarker.iginalEvent.lnglat);});("featureMouseout featureMouseover", (e, feature) => {leHoverFeature(districtExplorer,$tipMarkerContent,tipMarker,pe === "featureMouseover",e.originalEvent ? e.originalEvent.lnglat : null,);});});},renderAreaNode(districtExplorer, areaNode) {//清除已有的绘制内容districtExplorer.clearFeaturePolygons();//just some colorslet colors = ["#000","#000","#000","#000","#000","#000","#000","#000",];let colors2 = ["#fff","#fff","#fff","#fff","#fff","#fff","#fff","#fff",];//绘制子级区划derSubFeatures(areaNode, function (feature, i) {let fillColor = colors2[i % colors2.length];let strokeColor = colors[colors.length - 1 - (i % colors.length)];return {cursor: "default",bubble: true,strokeColor: strokeColor, //线颜色strokeOpacity: 1, //线透明度strokeWeight: 0.5, //线宽fillColor: '#fff', //填充色fillOpacity: 0.5, //填充透明度};});//绘制父级区划，仅用黑色描边derParentFeature(areaNode, {cursor: "default",bubble: true,strokeColor: "#0691FF", //线颜色fillColor: null,strokeWeight: 3, //线宽});//更新地图视野以适合区划面this.map.AllFeaturePolygons());},toggleHoverFeature(districtExplorer,$tipMarkerContent,tipMarker,feature,isHover,position,) {tipMarker.setMap(isHover ? this.map : null);if (!feature) {return;}let props = feature.properties;if (isHover) {//更新提示内容$tipMarkerContent.html(props.adcode + ": " + props.name);//更新位置tipMarker.setPosition(position || );}// $("#area-tree")//   .find('h2[data-adcode="' + props.adcode + '"]')//   .toggleClass("hover", isHover);//更新相关多边形的样式let polys = districtExplorer.findFeaturePolygonsByAdcode(props.adcode);for (let i = 0, len = polys.length; i < len; i++) {polys[i].setOptions({fillOpacity: isHover ?0.5 : 0.5,fillColor: isHover ? '#0691FF' : '#fff',});}},},}
}

style

.map-container {background: rgba(0, 0, 0, 0) !important;
}

导入地图

主要代码就这些，需要注意的是先在index.html中导入高德地图和高德的AMapUI

<script type="text/javascript" src="=2.0&key=key&plugin=AMap.DistrictSearch""></script>
<script src=".1/main.js"></script>

文档地址

具体的地图样式和页面样式都可以根据需求调整， 最后放上高德区域掩模 demo地址

AMapUI的demo地址

需要其他功能的也可去文档看看，结合里面的一些功能。

大概就这样了。