在vue中利用ArcGis API for js 创建地图

今天分享利用arcgis的api，在vue中创建地图实例，并且在地图上显示出来。

• 先是引入arcgis
  这个具体可以参考上一篇文章：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视图也是大同小异

        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//配置坐标系
          },          
        });

• 最后运行项目，就可以看到地图已经成功在网页中展示了。

  
  效果图

具体配置文档可以参考arcgis官网的API