高德地图行政区划浏览功能

功能：1.点击高德地图的某块区划获取点击点击的区划名称追加到右侧待分析框中，并且让点击的区划高亮

           2.右侧框中点击删除的时候删除当前点击的数据，并且让地图行政区中同名的地块取消高亮

功能图片展示--只有一级生态区

直接贴代码

export default {
  name: 'App',
   data(){
    return {
        cancelMapColor:null, //取取消的function
    };
   },
    methods:{
      
      loadMap(){  
      //  this.reload();
          let googleLayer = new AMap.TileLayer({
            getTileUrl:
              "http://mt{1,2,3,0}.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x=[x]&y=[y]&z=[z]&s=Galile"
          });
          let roadNetLayer = new AMap.TileLayer.RoadNet();

          let map = new AMap.Map("mapMain_container", {
            resizeEnable: true,
            center: [116.397428, 39.90923],
            layers: [googleLayer, roadNetLayer],
            zoom: 6
          });

          

          let pro = [];
          let _this = this;

          AMapUI.load(['ui/geo/DistrictExplorer', 'lib/$'], function(DistrictExplorer, $) {

              var colors = [
                  "#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
                  "#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
                  "#651067", "#329262", "#5574a6", "#3b3eac"
              ];

              //创建一个实例
              var districtExplorer = new DistrictExplorer({
                  eventSupport: true, //打开事件支持
                  map: map
              });

              //当前聚焦的区域
              var currentAreaNode = null;

              //鼠标hover提示内容
              var $tipMarkerContent = $('<div class="tipMarker top"></div>');

              var tipMarker = new AMap.Marker({
                  content: $tipMarkerContent.get(0),
                  offset: new AMap.Pixel(0, 0),
                  bubble: true
              });

              let polyGroup;
              let featureArr = []; //存已选行政区


              //删除生态区的时候取消高亮点
              _this.cancelMapColorfunction  = function cancelClickFeature(feature) {
                for(let i=0;i<featureArr.length;i++){
                  if(featureArr[i].properties.name == _this.deleteName){ //如果已经选择的行政区中存在要删除的
                     let adcode =  featureArr[i].properties.adcode; //获取当前要删除行政区的code
                     featureArr.splice(i,1); //从数组中删除
                     var polysDelete = districtExplorer.findFeaturePolygonsByAdcode(adcode); //筛选符合code的行政区
                      for (var i = 0, len = polysDelete.length; i < len; i++) {
                          polysDelete[i].setOptions({ //设置透明度
                              fillOpacity: 0.35,
                          });
                      }  
                  }
                }
              }

              //点击地图高亮
              function ClickFeature(feature) {
                  var props = feature.properties;
                  //更新相关多边形的样式  
                  var polys = districtExplorer.findFeaturePolygonsByAdcode(props.adcode);
                  for (var i = 0, len = polys.length; i < len; i++) {
                      polys[i].setOptions({
                          fillOpacity: 1,
                      });
                  }
              }

              //根据Hover状态设置相关样式
              function toggleHoverFeature(feature, isHover, position) {

                  tipMarker.setMap(isHover ? map : null);

                  if (!feature) {
                      return;
                  }
                  var props = feature.properties;

                  if (isHover) {
                      //更新提示内容
                      $tipMarkerContent.html(props.adcode + ': ' + props.name);
                      //更新位置
                      tipMarker.setPosition(position || props.center);
                  }
              }

              //监听feature的hover事件
              districtExplorer.on('featureMouseout featureMouseover', function(e, feature) {
                  toggleHoverFeature(feature, e.type === 'featureMouseover',
                      e.originalEvent ? e.originalEvent.lnglat : null);
              });

              //监听鼠标在feature上滑动
              districtExplorer.on('featureMousemove', function(e, feature) {
                  //更新提示位置
                  tipMarker.setPosition(e.originalEvent.lnglat);
              });

              //feature被点击
              districtExplorer.on('featureClick', function(e, feature) {

                  ClickFeature(feature); //高亮
                  featureArr.push(feature);
                         
                  //获取点击的城市或者县
                  var props = feature.properties; //行政区详情
                  var province = props.name; //行政区名称
                  var location = feature.properties.center; //行政区中心点
                  if(pro.length == 0){
                      pro.push(province);
                  }
                  else{
                    let flag;
                    for(let i = 0;i < pro.length;i++){
                      if(province == pro[i]){
                        flag = true; //如果内容一样，说明数组中存在此数组
                      }
                    }
                    if(!flag){
                      pro.push(province);
                    }
                  }                 
              });


              //填充某个节点的子区域列表
              function renderAreaPanel(areaNode) {

                  var props = areaNode.getProps();

                  var subFeatures = areaNode.getSubFeatures();
              }

              //绘制某个区域的边界
              function renderAreaPolygons(areaNode) {

                  //更新地图视野
                  map.setBounds(areaNode.getBounds(), null, null, true);

                  //清除已有的绘制内容
                  districtExplorer.clearFeaturePolygons();

                  //绘制子区域
                  districtExplorer.renderSubFeatures(areaNode, function(feature, i) {

                      var fillColor = colors[i % colors.length];
                      var strokeColor = colors[colors.length - 1 - i % colors.length];

                      return {
                          cursor: 'default',
                          bubble: true,
                          strokeColor: strokeColor, //线颜色
                          strokeOpacity: 1, //线透明度
                          strokeWeight: 1, //线宽
                          fillColor: fillColor, //填充色
                          fillOpacity: 0.35, //填充透明度
                      };
                  });
              }

              //切换区域后刷新显示内容
              function refreshAreaNode(areaNode) {

                  districtExplorer.setHoverFeature(null);

                  renderAreaPolygons(areaNode);
              }

              //切换区域
              function switch2AreaNode(adcode, callback) {

                  if (currentAreaNode && ('' + currentAreaNode.getAdcode() === '' + adcode)) {
                      return;
                  }

                  loadAreaNode(adcode, function(error, areaNode) {
                      currentAreaNode = window.currentAreaNode = areaNode;

                      //设置当前使用的定位用节点
                      districtExplorer.setAreaNodesForLocating([currentAreaNode]);

                      refreshAreaNode(areaNode);

                      if (callback) {
                          callback(null, areaNode);
                      }
                  });
              }

              //加载区域
              function loadAreaNode(adcode, callback) {
                  districtExplorer.loadAreaNode(adcode, function(error, areaNode) {
                      // renderAreaPanel(areaNode);
                      if (callback) {
                          callback(null, areaNode);
                      }
                  });
              }
              //全国
              switch2AreaNode(100000);      
          })
          this.provinceArr = pro;
         
      },
      //待分析区域删除按钮
      deletePro(name,index){
        for(let i = 0 ; i < this.provinceArr.length ; i++){
          if(this.provinceArr[i] == name){
            this.provinceArr.splice(i,1);
            this.deleteName = name;
            this.cancelMapColorfunction();
          }
        }
      },
  }
}