关于前端:高德地图相关问题

一、设置 3D 成果

1、在初始化地图时开启 3D 视图、设置视图角度及设置光照（AmbientLight 环境光源、DirectionLight 平行光源）、增加 3D 图层（Object3DLayer）、创立 Object3D 实例、增加 Object3D 实例到 object3dLayer.

二、绘制省市区边界

function DrawSection(cityName, district, isSearchNextLevel) {district.search(cityName, function (status, result) {console.log('result===', result)
          let bounds = result.districtList[0].boundaries;
          if (bounds) {for (let i = 0; i < bounds.length; i += 1) {if (isSearchNextLevel) {
                // 绘制省的版块
                new AMap.Polygon({
                  map: map,
                  path: bounds[i],
                  strokeColor: "#0dcdd1",
                  fillColor: "#3D6BB1",
                });
              } else {
                // 绘制市的边界线
                new AMap.Polyline({path: bounds[i],
                  strokeColor: "#0dcdd1",
                  map: map,
                });
              }
            }
            if (isSearchNextLevel) {let districtList = result.districtList[0].districtList;
              for (let i = 0; i < districtList.length; i += 1) {DrawSection(districtList[i].name, district, false);
              }
            }
          }
        });
      }

办法调用

 // 应用递归的形式
      let opts = {
        // 是否返回行政区边界坐标点
        extensions: "all",
        // 设置查问行政区级别为 市
        level: "city",
      };
      // 创立 DistrictSearch 对象
      const district = new AMap.DistrictSearch(opts);
      DrawSection('陕西省', district, true)

三、画线

    setRiver(data, currentData) {data.forEach((item, ind) => {
        let polyline = null
        let strokeColor =
          currentData && currentData.name === item.name ? '#F9E446' : item.color
        if (item && item.type === 'MultiLineString') {
          item.coordinates.forEach(iitem => {
            polyline = new AMap.Polyline({
              path: iitem,
              data: item,
              strokeWeight: 8,
              strokeColor: strokeColor, // 线条色彩
              lineJoin: 'round' // 折线拐点连接处款式
            })
          })
        } else if (item) {// [[],[]]
          polyline = new AMap.Polyline({
            path: item.coordinates,
            data: item,
            strokeWeight: 8,
            strokeColor: strokeColor,
            lineJoin: 'round' // 折线拐点连接处款式
          })
        }
        let map = this.map
        // 绘制当火线
        // 将折线增加至地图实例
        map.add(polyline)
        this.polylines.push(polyline)
        polyline.on('click', this.polylineClick)
      })
    },

四、线或者点的点击事件

 polylineClick(e) {let position = [e.lnglat.lng, e.lnglat.lat]
      let data = e.target.w.data

      this.setRiver(this.list, data)
      heliuDetail({year: this.year, zl: data.name}).then(res => {let detail = res.data[0]
        let riverItem = getRiverItem()
        riverItem.forEach(item => {if (item.name === 'jll' || item.name === 'ssl') {item.label = item.label + '(' + this.year + ')' + '：'
          } else {item.label = item.label + '：'}
        })
        let riverInfo = this.setContentByItem(riverItem, detail)
        let myRow = '<div class="info_title">' + detail.zl + '</div>'
        let html = '<div class="info_box">' + myRow + riverInfo + '</div>'
        this.infoWindow.setContent(html)
        this.infoWindow.open(this.map, position)
      })
    },

通过 js 循环 arr 渲染 dom 内容

    setContentByItem(arr, detail) {
      let InfoDom = ''
      for (let i = 0; i < arr.length; i++) {let val = arr[i].name2
          ? detail[arr[i].name] + '（' + detail[arr[i].name2] + '）'
          : detail[arr[i].name]
        if (arr[i] && arr[i].prop) {let value = detail[arr[i].prop]
            ? detail[arr[i].prop][arr[i].name]
            : ''
          if (value && _.isArray(value.list)) {val = value.count + value.unit + '：' + value.list.join('，')
          } else {val = value}
        }
        let arrVal = ''
        if (val && _.isArray(val)) {
          val.forEach(item => {arrVal += this.getArrDomByType(item)
          })
        }
        let unit = val && arr[i].unit ? arr[i].unit : ''
        let showVal = arrVal
          ? '<div class="row_content">' + arrVal + '</div>'
          : val
          ? val + unit
          : '-'
        InfoDom +=
          '<div class="info_row "><span class="info_lable">' +
          arr[i].label +
          '</span>' +
          showVal +
          '</div>'
      }
      return InfoDom
    },

五、加载海量点

         let validList = []
          if (list && list.length) {list.forEach((item, ind) => {let lon = item[0]
            let lat = item[1]
              if (lon && lat && lon !== '0.0' && lat !== '0.0') {item.lnglat = [lon, lat]
                let icon = this.newRiverIcon()
                item.style = ind
                style.push(icon)
                validList.push(item)
              }
            })
          }
          var mass = new AMap.MassMarks(validList, {
            opacity: 1,
            zIndex: 111,
            cursor: 'pointer',
            style: style
          })
          let map = this.map
          this.mass = mass
          mass.setMap(map)

六、热力求渲染

       var heatmap;
          map.plugin(["AMap.Heatmap"], function () {
            // 初始化 heatmap 对象
            heatmap = new AMap.Heatmap(map, {
                radius: 1, // 给定半径
                opacity: [1, 1]
                ,
                gradient:{0.5: 'rgb(117,211,248)',
                    0.65: 'rgb(117,211,248)',
                    0.7: 'rgb(117,211,248)',
                    0.9: 'rgb(117,211,248)',
                    1.0: 'rgb(117,211,248)'
                }
            });
            // 设置数据集：该数据为北京局部“公园”数据
            heatmap.setDataSet({
                data: validList,
                max: 0.1
            });
          }); 

七、地图重置

    removeMarkers() {if (this.mass) {this.mass.clear() // 革除海量点
        this.infoWindow.close() // 敞开所有信息窗体}
    },
    resetMap() {this.removeMarkers()
      this.map.setCenter([100.907295, 35.901474])
      this.map.setZoom(6.8)
      let infoWindowContent = document.getElementsByClassName('amap-info-content')[0]
      if (infoWindowContent) {infoWindowContent.style.display = 'none'}
    },