【vue与高德地图】加载3D地图

6,830 阅读2分钟

小知识,大挑战!本文正在参与“  程序员必备小知识  ”创作活动

本文同时参与 「掘力星计划」  ,赢取创作大礼包,挑战创作激励金

前言

佛祖保佑, 永无bug。Hello 大家好!我是海的对岸!

因我司在尝试三维地图方面的摸索,所以,我这边尝试下用高德地图加载三维地图,特此记录一下

开干,解决过程

因为我是vue开发

首先,需要引入vue-amapVue引入vue-amap,看这边,传送门

上篇讲到,vue-amap文档显示不全,需要把vue-amap的文档下载下来,本地跑起来看,怎么本地跑vue-amp文档,看我上一篇写的vue-amap 官方文档显示不全【解决】

步骤1

还需要用到高德地图开发者平台上的高德地图文档传送门

我们打开高德在线调试界面

image.png

image.png

image.png

image.png

步骤2

再看vue-amap

image.png

看到这里,你会发现,图例让你使用vue-amap的时候,避免使用AMap这个名字,因为这个名字是原生高德SDK的,说明AMap这个在vue项目里面,已经是存在的了

因为我们开发,定制化可能会比较多,使用上会更加贴近原生高德SDK

image.png

由于地图实例是异步加载的,当使用地图的页面开始加载地图的时候地图还没完成初始化,会造成获取不到地图实例

image.png

直接上代码

<template>
  <div class="amap-page-container">
    <div id="amap-demo1" class="amap-demo">
    </div>
  </div>
</template>

<script>
  // NPM 方式
  import { lazyAMapApiLoaderInstance } from 'vue-amap';

  const loadPromise = lazyAMapApiLoaderInstance.load();

  export default {
    data() {
      return {
        map: null
      }
    },
    methods: {
      initMap() {
        loadPromise.then(() => {
          console.log('-----');
          this.map = new AMap.Map('amap-demo1', {
            center: [120.55538, 31.87532], // 以张家港为例
            zoom: 12,
            resizeEnable: true,
            rotateEnable:true,
            pitchEnable:true,
            pitch:80,
            rotation:-15,
            viewMode:'3D',//开启3D视图,默认为关闭
            buildingAnimation:true,//楼块出现是否带动画

            expandZoomRange:true,
            zooms:[3,20],
          });
        });
      }
    },
    mounted() {
      this.initMap();
    },
  }
</script>

<style scoped>
  .amap-demo {
    height: 98vh;
    width: 100%;
    resize:both;
  }
</style>

路由里配置下

image.png

效果如下

amap_3d.gif

评论抽奖

欢迎在评论区讨论,掘金官方将在掘力星计划活动结束后,在评论区抽送100份掘金周边

  • 抽奖礼物:100份,掘金官方提供,包括掘金徽章、拖鞋、马克杯、帆布袋等,随机发放
  • 抽奖时间:「掘力星计划」活动结束后,预计3个工作日内,官方将在所有符合规则的活动文章评论区抽出
  • 抽奖方式:掘金官方随机抽奖+人工核实
  • 评论内容:与文章内容相关的评论、建议、讨论等,「踩踩」「学习了」等泛泛类的评论无法获奖

都看到这里了,求各位观众大佬们点个赞再走吧,你的赞对我非常重要