Vue集成ArcGIS API for JS实现地图加载与3D视图配置

作者：小布丁时间：2026-10-30 23:14:12浏览：497

本文介绍在Vue项目中集成ArcGIS API for JS的方法，涵盖地图实例创建、2D与3D视图配置及显示流程。通过具体代码示例，展示如何设置底图、中心点、缩放级别及初始范围，帮助开发者快速实现Web地图应用。

在Vue环境中集成ArcGIS API for JS以构建地图应用

本文主要介绍如何在Vue框架内利用ArcGIS API for JS构建地图实例，并将其渲染至网页中展示。

首先需完成ArcGIS API的引入步骤

具体的引入配置细节，可参考前文《ArcGis API for js 在vue.js中的使用》一文。

接下来创建Map实例

Map类负责存储、管理并覆盖2D和3D查看器共有的图层属性与方法。

        var map = new Map({
          basemap:'streets'  //配置底图类型
        })

视图需引用地图实例

地图实例创建完成后，必须通过视图对象来引用该地图，否则无法在网页端进行显示。

        //创建2d视图
        var view = new MapView({
          container:'viewDiv',//html结构，要用id来声明
          map:map,//引用的地图实例
          zoom: 4,//表示视图当前的缩放级别，通常和center一起使用，设置视图的初始值
          center: [15, 65]//设置显示的地图中心位置
        })

构建3D视图

3D视图的创建流程与2D视图基本一致。

        var view = new SceneView({
          container: "viewMap", 
          map: map,              
          center:[113.54,22.36],
          zoom:4,
          extent:{//配置初始地图范围
            xmin: 113.53778263250001,
            ymin: 22.361690773984428,
            xmax: 113.56382441750009,
            ymax: 22.377545955584687,
            spatialReference: 4326//配置坐标系
          },          
        });

最后启动项目运行，即可在网页中成功看到地图展示效果。

在Vue环境中集成ArcGIS API for JS以构建地图应用