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

使用AMap3D绘制3D地图并添加3D墙和点标记

最新推荐文章于 2025-08-14 16:30:00 发布

原创

最新推荐文章于 2025-08-14 16:30:00 发布 · 2.3k 阅读

9 ·

CC 4.0 BY-SA版权

<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.50