ArcGIS API for JS + Vue 实现 2D / 3D /不同底图的无缝切换（视图位置不发生改变）

最新推荐文章于 2025-07-04 20:01:15 发布

原创

最新推荐文章于 2025-07-04 20:01:15 发布 · 5.6k 阅读

30 ·

CC 4.0 BY-SA版权

文章标签：

#Vue #ArcGIS API for JS #Bootstrap

需要用到：Vue 2.5 、Bootstrap 4 、ArcGIS API for JS 4.10

说明：这里的底图切换和2D/3D的切换思路和官网一致，但是实现方法完全不同，是利用Vue将初始化的参数变成响应式从而实现的无缝切换

效果：

初始状态：

初始状态是 Google 的底图，为 3D 状态

随机变换视图位置后切换底图：

不会改变视图位置

切换显示维度：

同样不会改变视图位置

关键代码：

var app = new Vue({
    el:"#app",
    data:{
      activeLayer:null,
      mapConfig:{
        map:null, 
        dimension:"3D",             // 地图的维度
        container:"map-container",  // 地图容器           
        scale:110329633.40563367,     // 3D视图下的比例尺
        zoom:2,                     // 2D视图下的比例尺
        center:[105.578034,34.062071],
      },
      tileLayer:{
        google:{
          url:"http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{level}!2i{col}!3i{row}!2m3!1e0!2sm!3i345013117!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0",
          name:"谷歌地图",
          img:"/map-invest/Public/image/google-map.jpg"
        },
        tianditu:{
          url:"http://t