高德地图 Web JS API UI组件示例学习笔记（6）——行政区划浏览

事件处理

DistrictExplorer下的各类事件的处理方法。
本示例根据adcode绘制了相应区域，并监听了要素的悬浮（featureMouseout、featureMouseover）、featureMousemove、featureClick、outsideClick等事件

AMapUI.loadUI(['geo/DistrictExplorer'], function (DistrictExplorer) {
      //创建一个实例
      var districtExplorer = new DistrictExplorer({
        eventSupport: true,
        map: map
      });

      //创建一个辅助Marker，提示鼠标内容
      var tipMarker = new AMap.Marker({
        //启用冒泡，否则click事件会被marker自己拦截
        bubble: true
      });

      //监听feature的hover事件
      districtExplorer.on('featureMouseout featureMouseover', function (e, feature) {
        var isHover = e.type === 'featureMouseover';
        // 如果不存在悬浮，清空tipMarker
        if (!isHover) {
          tipMarker.setMap(null);
          return;
        }
        // 添加tipMarker
        tipMarker.setMap(map);
        // 设置tipMarker的坐标
        tipMarker.setPosition(e.originalEvent.lnglat);
        // 设置tipMarker显示的内容
        tipMarker.setLabel({
          offset: new AMap.Pixel(20, 20),
          content: feature.properties.name
        });

      });

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

      //feature被点击
      districtExplorer.on('featureClick', function (e, feature) {
        console.log('点击: ' + feature.properties.name);
      });

      //外部区域被点击
      districtExplorer.on('outsideClick', function (e) {
        console.log('区域外点击');
      });

      function renderAreaNode(areaNode) {
        // 310000表示上海市编码
        // 330100表示浙江省杭州市编码
        // 330200表示浙江省宁波市编码
        if ([310000, 330100, 330200].indexOf(areaNode.getAdcode()) >= 0) {
          //绘制子区域
          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, //填充透明度
            };
          });
        }

        //绘制父区域
        districtExplorer.renderParentFeature(areaNode, {
          cursor: 'default',
          bubble: true,
          strokeColor: 'black', //线颜色
          strokeOpacity: 1, //线透明度
          strokeWeight: 1, //线宽
          fillColor: 'gray', //填充色
          fillOpacity: 0.2, //填充透明度
        });
      }

      var adcodes = [
        310000, //上海
        330100, //杭州
        330200, //宁波
        330000 //浙江
      ];

      districtExplorer.loadMultiAreaNodes(adcodes, function (error, areaNodes) {
        //设置定位节点，支持鼠标位置识别
        //注意节点的顺序，前面的高优先级
        districtExplorer.setAreaNodesForLocating(areaNodes);

        //清除已有的绘制内容
        districtExplorer.clearFeaturePolygons();
        // 渲染区域
        for (var i = 0, len = areaNodes.length; i < len; i++) {
          renderAreaNode(areaNodes[i]);
        }

        //更新地图视野
        map.setFitView(districtExplorer.getAllFeaturePolygons());
      });
    });

单区域加载（重点）

使用DistrictExplorer实现单区域加载。
父区域可根据情况绘制，不是强制绘制。

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

    AMapUI.loadUI(['geo/DistrictExplorer'], function(DistrictExplorer) {
        //创建一个实例
        var districtExplorer = new DistrictExplorer({
            map: map
        });
        var adcode = 100000;
        districtExplorer.loadAreaNode(adcode, function(error, 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, //填充透明度
                };
            });

            //绘制父区域
            districtExplorer.renderParentFeature(areaNode, {
                cursor: 'default',
                bubble: true,
                strokeColor: 'black', //线颜色
                strokeOpacity: 1, //线透明度
                strokeWeight: 1, //线宽
                fillColor: null, //填充色
                fillOpacity: 0.35, //填充透明度
            });
        });
    });

多区域加载（重点）

使用DistrictExplorer实现多区域加载。
调用districtExplorer实例的loadMultiAreaNodes方法，传入多区域的adcodes数组，就相应渲染出对应区域。

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

    AMapUI.loadUI(['geo/DistrictExplorer'], function(DistrictExplorer) {
        //创建一个实例
        var districtExplorer = new DistrictExplorer({
            map: map
        });

        function renderAreaNode(areaNode) {
            //绘制子区域
            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, //填充透明度
                };
            });

            //绘制父区域
            districtExplorer.renderParentFeature(areaNode, {
                cursor: 'default',
                bubble: true,
                strokeColor: 'black', //线颜色
                strokeOpacity: 1, //线透明度
                strokeWeight: 1, //线宽
                fillColor: null, //填充色
                fillOpacity: 0.35, //填充透明度
            });
        }
		
        var adcodes = [310000, 330100, 330200];
        districtExplorer.loadMultiAreaNodes(adcodes, function(error, areaNodes) {
            //清除已有的绘制内容
            districtExplorer.clearFeaturePolygons();
            for (var i = 0, len = areaNodes.length; i < len; i++) {
                renderAreaNode(areaNodes[i]);
            }
            //更新地图视野
            map.setFitView(districtExplorer.getAllFeaturePolygons());
        });
    });

反向镂空区域

使用DistrictExplorer实现反向镂空区域效果。采用的是绘制带洞多边形的原理，先放入全国的边界坐标，再塞入镂空区域的坐标。

AMapUI.loadUI(['geo/DistrictExplorer'], function (DistrictExplorer) {
      initPage(DistrictExplorer);
    });

    function getAllRings(feature) {
      var coords = feature.geometry.coordinates,
        rings = [];
      for (var i = 0, len = coords.length; i < len; i++) {
        rings.push(coords[i][0]);
      }
      return rings;
    }

    function getLongestRing(feature) {
      var rings = getAllRings(feature);
      rings.sort(function (a, b) {
        return b.length - a.length;
      });
      return rings[0];
    }

    function initPage(DistrictExplorer) {
      //创建一个实例
      var districtExplorer = new DistrictExplorer({
        map: map
      });

      var countryCode = 100000, //全国
        provCodes = [
          110000, //北京
          510000 //四川
        ],
        cityCodes = [
          230100, //哈尔滨
          331100 //丽水
        ];

      districtExplorer.loadMultiAreaNodes(
        //只需加载全国和市，全国的节点包含省级
        [countryCode].concat(cityCodes),
        function (error, areaNodes) {
          var countryNode = areaNodes[0],
            cityNodes = areaNodes.slice(1);
          var path = [];
          //首先放置背景区域，这里是大陆的边界
          path.push(getLongestRing(countryNode.getParentFeature()));

          for (var i = 0, len = provCodes.length; i < len; i++) {
            //逐个放置需要镂空的省级区域
            path.push.apply(path, getAllRings(countryNode.getSubFeatureByAdcode(provCodes[i])));
          }

          for (var i = 0, len = cityNodes.length; i < len; i++) {
            //逐个放置需要镂空的市级区域
            path.push.apply(path, getAllRings(cityNodes[i].getParentFeature()));
          }

          //绘制带环多边形
          //https://lbs.amap.com/api/javascript-api/reference/overlay#Polygon
          var polygon = new AMap.Polygon({
            bubble: true,
            lineJoin: 'round',
            strokeColor: 'red', //线颜色
            strokeOpacity: 1, //线透明度
            strokeWeight: 1, //线宽
            fillColor: 'black', //填充色
            fillOpacity: 0.65, //填充透明度
            map: map,
            path: path
          });
        });
    }