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

直接上效果图

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

template

<div class="map" >
    <div
      class="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", ()=> {
		          //this.geocoder = 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) {
		          console.error(error);
		          return;
		        }
		        //绘制载入的区划节点
		        this.renderAreaNode(districtExplorer, areaNode);
		      });
		      var $tipMarkerContent = $('<div class="tipMarker top"></div>');
		
		      var tipMarker = new AMap.Marker({
		        content: $tipMarkerContent.get(0),
		        offset: new AMap.Pixel(0, 0),
		        bubble: true,
		      });
		      districtExplorer.on("featureMousemove", function (e, feature) {
		        //更新提示位置
		        tipMarker.setPosition(e.originalEvent.lnglat);
		      });
		      districtExplorer.on("featureMouseout featureMouseover", (e, feature) => {
		        this.toggleHoverFeature(
		          districtExplorer,
		          $tipMarkerContent,
		          tipMarker,
		          feature,
		          e.type === "featureMouseover",
		          e.originalEvent ? e.originalEvent.lnglat : null,
		        );
		      });
		    });
	    },



	    renderAreaNode(districtExplorer, areaNode) {
	      //清除已有的绘制内容
	      districtExplorer.clearFeaturePolygons();
	      //just some colors
	      let colors = [
	        "#000",
	        "#000",
	        "#000",
	        "#000",
	        "#000",
	        "#000",
	        "#000",
	        "#000",
	      ];
	      let colors2 = [
	        "#fff",
	        "#fff",
	        "#fff",
	        "#fff",
	        "#fff",
	        "#fff",
	        "#fff",
	        "#fff",
	      ];
	      //绘制子级区划
	      districtExplorer.renderSubFeatures(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, //填充透明度
	        };
	      });
	
	      //绘制父级区划，仅用黑色描边
	      districtExplorer.renderParentFeature(areaNode, {
	        cursor: "default",
	        bubble: true,
	        strokeColor: "#0691FF", //线颜色
	        fillColor: null,
	        strokeWeight: 3, //线宽
	      });
	      //更新地图视野以适合区划面
	      this.map.setFitView(districtExplorer.getAllFeaturePolygons());
	    },



	    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 || props.center);
	      }
	      // $("#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="http://webapi.amap.com/maps?v=2.0&key=key&plugin=AMap.DistrictSearch""></script>
<script src="https://webapi.amap.com/ui/1.1/main.js"></script>

文档地址

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

https://lbs.amap.com/demo/javascript-api/example/3d/mask

AMapUI的demo地址

https://lbs.amap.com/demo/amap-ui/demos/amap-ui-districtexplorer/index

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

大概就这样了。