高德地图3D城市地图实现gps打点可视化数据显示

<template>
  <div id="amapContainer"></div>
</template>

<script>
export default {
  name: 'amap3d',
  data () {
    return {};
  },
  mounted () {
    this.intAmap();
  },
  methods: {
    drawMap (city = '北京市', LngLats) {
      const AMap = this.AMap;
      const opts = {
        subdistrict: 0,
        extensions: 'all',
        level: 'city'
      };
      //利用行政区查询获取边界构建mask路径
      //也可以直接通过经纬度构建mask路径
      const district = new AMap.DistrictSearch(opts);
      district.search(city, function (status, result) {
        const bounds = result.districtList[0].boundaries;
        const mask = []
        for (let i = 0; i < bounds.length; i += 1) {
          mask.push([bounds[i]])
        }
        const map = new AMap.Map('amapContainer', {
          mask: mask,
          center: [116.501415, 39.926055],
          disableSocket: true,
          viewMode: '3D',
          showLabel: false,
          labelzIndex: 130,
          pitch: 40,
          zoom: 10,
          mapStyle: "amap://styles/darkblue",
          // 卫星地图显示
          layers: [
            new AMap.TileLayer.RoadNet({
              //rejectMapMask:true
            }),
            new AMap.TileLayer.Satellite()
          ]
        });

        //添加高度面 v 2.0 版本引用这个3D方法直接报错
        let object3Dlayer = new AMap.Object3DLayer({ zIndex: 1 });
        map.add(object3Dlayer)
        const height = -20000;
        const color = '#0088ffcc';//rgba
        const wall = new AMap.Object3D.Wall({
          path: bounds,
          height: height,
          color: color
        });
        wall.transparent = true;

        // 添加覆盖物
        (LngLats || []).forEach(v => {
          const position = new AMap.LngLat(v.Lng, v.Lat);
          // 点标记显示内容，HTML要素字符串
          const markerContent = '' +
            `<div class="custom-content-marker zyc-marker-icon">
                <img src="//a.amap.com/jsapi_demos/static/demo-center/icons/dir-via-marker.png">
                <div class="close-btn" onclick="clearMarker()">X</div>
                <div class="content">
                  <p>设备数量： 15545</p>
                  <p>人员数量： 5842</p>
                  <p>摄像头数量： 96874</p>
                </div>
            </div>`;

          new AMap.Marker({
            position: position,
            // 将 html 传给 content
            content: markerContent,
            // 以 icon 的 [center bottom] 为原点
            offset: new AMap.Pixel(-13, -30),
            map: map  // 添加到对应的map地图实例
          });
        });
        

        object3Dlayer.add(wall);

        //添加描边
        for (let i = 0; i < bounds.length; i += 1) {
          new AMap.Polyline({
            path: bounds[i],
            strokeColor: '#99ffff',
            strokeWeight: 4,
            map: map
          })
        }
      });
    },
    // 地图初始化
    intAmap (callBack) {
      this.AMap = window.AMap;
      this.AMap.plugin(['AMap.MouseTool', 'AMap.PolyEditor', 'AMap.ControlBar', 'AMap.DistrictSearch', 'Map3D', 'AMap.Object3DLayer'], function () {
        //TODO  创建控件并添加
      });

      if (callBack && typeof callBack == 'function') {
        callBack();
      }

      this.drawMap('北京市', [
        {Lng: 116.501415, Lat: 39.926055},
        {Lng: 116.474605, Lat: 39.946324},
        {Lng: 116.343799, Lat: 39.991844},
        {Lng: 116.324573, Lat: 39.872586}
      ]);
    }
  }
}
</script>
<style lang="scss">
#amapContainer {
  .custom-content-marker {
    position: relative;
    width: 25px;
    height: 34px;
    img {
      width: 100%;
      height: 100%;
    }
    .close-btn {
      position: absolute;
      top: -6px;
      right: -8px;
      width: 15px;
      height: 15px;
      font-size: 12px;
      background: #ccc;
      border-radius: 50%;
      color: #fff;
      text-align: center;
      line-height: 15px;
      box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
    }
    .close-btn:hover {
      background: #666;
    }
    .content {
      position: absolute;
      left: 20px;
      top: 10px;
      height: 100px;
      width: 200px;
      background: rgba(10, 10, 10, 0.7);
      p {
        padding:5px 10px;
        color:#fff;
        font-size: 14px;
        text-align:left;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
#amapContainer {
  height: 800px;
  width: 100%;
  margin: 0 auto;
}
</style>