高德地图中国地图

qq_37299525
已于 2022-07-11 18:35:24 修改
阅读量517
点赞数
文章标签： ui javascript 开发语言
于 2022-06-28 19:00:07 首次发布
本文链接：https://blog.csdn.net/qq_37299525/article/details/125508105
版权
<!doctype html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <base href="https://webapi.amap.com/ui/1.1/ui/geo/DistrictExplorer/examples/" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>行政区浏览</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
    }

    #container {
      height: 100vh;
    }
  </style>
  <script type="text/javascript" src='https://webapi.amap.com/maps?v=2.0&key=xxxx'></script>
  <script src="https://webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
</head>

<body>
  <div id="container"></div>

  <script type="text/javascript">
    var Action = (function () {
      function main(row) {
        Object.assign(this, {
          __initAdcode: 100000,      // 初始adcode
          __strokeColor: '#1C6EAD',  // 线颜色
          __strokeOpacity: 1,        // 线透明度
          __fillColor: '#2776F8',    // 子块填充色
          __fillOpacity: 0.2,        // 子块填充色不透明度(正常情况下)
          __fillActiveOpacity: 0.5,  // 子块填充色不透明度(激活情况下)
          __avoidArea: [0, 0, 0, 0],  // 避开区域[上下左右]
        }, row)
        this.__instance = new AMap.Map('container', row);
        AMapUI.load(['ui/geo/DistrictExplorer'], (Explorer) => {
          // 创建一个实例 
          this.__districtExplorer = new Explorer({
            eventSupport: true, // 打开事件支持
            map: this.__instance
          })
          //鼠标hover提示内容
          this.__tipLayer = document.createElement('div')
          this.__tipMarker = new AMap.Marker({
            content: this.__tipLayer,
            offset: new AMap.Pixel(0, 0),
            bubble: true
          });
          this.onEvent()
          this.onChange(this.__initAdcode)  //全国
        })
      }

      main.prototype.onEvent = function () {
        const DE = this.__districtExplorer
        const tipElem = this.__tipLayer
        //监听feature的hover事件
        DE.on('featureMouseout featureMouseover', (e, feature) => {
          const props = feature.properties;
          const isHover = e.type === 'featureMouseover'
          this.__tipMarker.setMap(isHover ? this.__instance : null);
          if (isHover) {
            // 更新位置
            const position = e.originalEvent ? e.originalEvent.lnglat : props.center
            this.__tipMarker.setPosition(position);
            const overCallback = this.__onFeatureOver
            overCallback && overCallback.call(this, props)
          } else {
            const outCallback = this.__onFeatureOut
            outCallback && outCallback.call(this, props)
          }
          //更新相关多边形的样式
          const array = DE.findFeaturePolygonsByAdcode(props.adcode);
          array.forEach(u => {
            const FO = isHover ? this.__fillActiveOpacity : this.__fillOpacity
            u.setOptions({ fillOpacity: FO });
          })
        });

        //监听鼠标在feature上滑动
        DE.on('featureMousemove', (e, feature) => {
          // 更新提示位置
          this.__tipMarker.setPosition(e.originalEvent.lnglat);
          const moveCallback = this.__onFeatureMove
          moveCallback && moveCallback.call(this, feature.properties)
        });

        //feature被点击
        DE.on('featureClick', (e, feature) => {
          const clickCallback = this.__onFeatureClick
          clickCallback && clickCallback.call(this, feature.properties)
        });

        //外部区域被点击
        DE.on('outsideClick', (e) => {
          DE.locatePosition(e.originalEvent.lnglat, (error, routeFeatures) => {
            const outsideCallback = this.__onFeatureClickOutside
            outsideCallback && outsideCallback.call(this, routeFeatures)
            // const nextFeatures = routeFeatures && routeFeatures[1]
            // // 切换到省级区域  沒有省级 切换到全国
            // const adcode = nextFeatures ? nextFeatures.properties.adcode : this.__initAdcode
            // this.onChange(adcode);
          });
        });
      }

      // 切换区域
      main.prototype.onChange = function (code) {
        const currCode = this.__areaNode || {}
        if (+currCode.adcode === +code) return
        const DE = this.__districtExplorer
        DE.loadAreaNode(code, (error, areaNode) => {
          if (error) return
          this.__areaNode = areaNode;
          // 设置当前使用的定位用节点
          DE.setAreaNodesForLocating([areaNode]);
          this.onRenderArea(areaNode);
        });
      }

      // 渲染区域
      main.prototype.onRenderArea = function (areaNode) {
        const DE = this.__districtExplorer
        //切换区域后刷新显示内容
        DE.setHoverFeature(null);
        // 绘制某个区域的边界 更新地图视野
        this.__instance.setBounds(areaNode.getBounds(), null, null, true);
        //清除已有的绘制内容
        DE.clearFeaturePolygons();
        this.onRemoveText()
        //绘制子区域
        DE.renderSubFeatures(areaNode, (feature, i) => {
          this.onAddText(feature.properties)
          return {
            cursor: 'pointer',
            bubble: true,
            strokeColor: this.__strokeColor, //线颜色
            strokeOpacity: this.__strokeOpacity, //线透明度
            strokeWeight: 1, //线宽
            fillColor: this.__fillColor, //填充色
            fillOpacity: this.__fillOpacity, // 填充透明度
          };
        });

        //绘制父区域
        const pprow = this.onLevel(areaNode.adcode)
        console.log('areaNode', areaNode)
        pprow.district && this.onAddText(areaNode._data.geoData.parent.properties)
        DE.renderParentFeature(areaNode, {
          cursor: 'pointer',
          bubble: true,
          strokeColor: this.__strokeColor, //线颜色
          strokeOpacity: this.__strokeOpacity, //线透明度
          strokeWeight: 2, //线宽
          fillColor: null, //填充色
          fillOpacity: this.__fillOpacity, // 填充透明度
        });

        // 避开区域[上下左右]
        const allpolys = this.__districtExplorer.getAllFeaturePolygons()
        this.__instance.setFitView(allpolys, false, this.__avoidArea)
      }

      main.prototype.onAddText = function (props) {
        if (!this.__visibleText) return
        this.__textList = [...(this.__textList || []), new AMap.Text({
          text: props.name,
          anchor: 'center',
          angle: -2,
          bubble: true,
          zIndex: 20,
          position: props.centroid,
          map: this.__instance
        })]
      }

      main.prototype.onRemoveText = function () {
        this.__instance.remove(this.__textList || [])
        this.__textList = []
      }

      main.prototype.onLevel = function (adcode) {
        const [adcodeValue, initValue] = [adcode, this.__initAdcode].map(u => u.toString())
        const [len, initZeroLen] = [adcodeValue, initValue].map(u => (u.match(/0+$/) || [''])[0].length)
        const R = {
          district: len <= 1,
          city: len > 1 && len <= 3,
          province: len === 4,
          country: len === 5,
        }
        const array = [
          { bool: R.district, targetBool: initZeroLen > 1, v: Number(adcodeValue.substr(0, 4) + '00') },
          { bool: R.city, targetBool: initZeroLen > 3, v: Number(adcodeValue.substr(0, 2) + '0000') },
          { bool: true, targetBool: true, v: 100000, tV: +initValue },
        ]
        // 直接找到父节点
        const parentCode = array.find(u => u.bool)
        // 直接找到父节点(相对__initAdcode)
        const parentTargetCode = array.find(u => u.bool && u.targetBool)
        R.value = len
        R.parent = parentCode.v
        R.targetParent = parentTargetCode.tV || parentTargetCode.v
        return R
      }

      return main
    })()



    // var A1 = new Action({
    //   showLabel: 0,
    //   __initAdcode: 440000,
    //   __onFeatureOver(props) {
    //     this.__tipLayer.innerHTML = props.adcode + ': ' + props.name
    //   }
    // })


    var A2 = new Action({
      showLabel: 0,
      mapStyle: "amap://styles/darkblue",
      zoom: 8,
      __visibleText: true,
      __initAdcode: 440300,
      __onFeatureClick(props) {
        this.onChange(props.adcode);
      },
      __onFeatureClickOutside() {
        const row = this.onLevel(this.__areaNode.adcode)
        this.onChange(row.targetParent);
      },
    })
  </script>
</body>

</html>