arcgis for js 天地图_VueCLI 3.0干货系列之集成ArcGIS API for JavaScript地图控件

最近做一个项目涉及到VueCLI 3.0前端框架并集成arcgis for js地图控件，是一个webGIS项目，本人将两者集成的方法介绍总结如下，欢迎大家学习交流。

概念解析

VueCLI 3.0是vue最新的脚手架工具，可以快速方便的搭建前端项目，关于VueCLI 3.0的介绍请查看之前文章。

ArcGIS for JavaScript地图控件，ArcGIS API for JavaScript是ESRI根据JavaScript技术实现的调用ArcGIS Server REST API接口的一组脚本。通过调用ArcGIS API for JavaScript相应接口，可以将在线地图工具和地图数据资源嵌入到web项目中。目前最新版本是4.13，本人之前一直使用3.16，由于最新版本较老版本有较大更新，所以本项目使用例子仍旧基于3.16版本，喜欢最新版本的小伙伴可以另行选择使用。

安装ArcGIS for JavaScript控件

因为原生的ArcGIS API for JavaScript是基于dojo开发的，若使用

2. tileInfo.js

新建tileInfo.js文件，将调用在线瓦片地图的配置信息放在此文件中，本项目采用天地图的在线地图，配置信息如下。

'rows': 256, 'cols': 256, 'dpi': 300, 'format': 'PNG32', 'compressionQuality': 0, 'origin': { 'x': -180, 'y': 90 }, 'spatialReference': { 'wkid': 4326 }, 'lods': [{ 'level': 2, 'resolution': 0.3515625, 'scale': 147748796.52937502 }, { 'level': 3, 'resolution': 0.17578125, 'scale': 73874398.264687508 }, { 'level': 4, 'resolution': 0.087890625, 'scale': 36937199.132343754 }, { 'level': 5, 'resolution': 0.0439453125, 'scale': 18468599.566171877 }, { 'level': 6, 'resolution': 0.02197265625, 'scale': 9234299.7830859385 }, { 'level': 7, 'resolution': 0.010986328125, 'scale': 4617149.8915429693 }, { 'level': 8, 'resolution': 0.0054931640625, 'scale': 2308574.9457714846 }, { 'level': 9, 'resolution': 0.00274658203125, 'scale': 1154287.4728857423 }, { 'level': 10, 'resolution': 0.001373291015625, 'scale': 577143.73644287116 }, { 'level': 11, 'resolution': 0.0006866455078125, 'scale': 288571.86822143558 }, { 'level': 12, 'resolution': 0.00034332275390625, 'scale': 144285.93411071779 }, { 'level': 13, 'resolution': 0.000171661376953125, 'scale': 72142.967055358895 }, { 'level': 14, 'resolution': 8.58306884765625e-005, 'scale': 36071.483527679447 }, { 'level': 15, 'resolution': 4.291534423828125e-005, 'scale': 18035.741763839724 }, { 'level': 16, 'resolution': 2.1457672119140625e-005, 'scale': 9017.8708819198619 }, { 'level': 17, 'resolution': 1.0728836059570313e-005, 'scale': 4508.9354409599309 }, { 'level': 18, 'resolution': 5.3644180297851563e-006, 'scale': 2254.4677204799655 }]

3. arcgisMap.js

引入配置

import { loadCss, loadModules } from 'esri-loader'import tileInfo from './tileInfo'

定义变量

 baseUrl: "https://js.arcgis.com/3.16