说明：
- 1.本文主要记录自己这段时间使用
Arcgis for JavaScript的一些总结，其中包括如何调用，如何在前端页面进行对数据的查询，不同符号渲染，小部件，等相关内容 - 2.将使用官网提供的数据，后期可能自己发布相应的服务辅助
- 3.前面已有一篇文章介绍了
Arcgis的产品体系，以及我们前端需要用到的离线部署，这里就不赘述了。 - 4.本次示例基于Vue框架,
Arcgis for JavaScriptAPI版本4.6 - 项目Git地址
一、项目搭建及相关配置
1.了解如何开始
因为是使用的Vue框架，而esri官方也提供了esri-loader这个包，所以第一件事在GitHub上找到这个包(虽然只有不到两百个star)，然后阅读README.md,阅读后获得以下信息
- 安装:
npm install --save esri-loader或者yarn add esri-loader - 引入样式：
@import url('https://js.arcgis.com/3.24/esri/css/esri.css'); - 没有介绍引入
JS的方法，但是介绍了一种懒加载JS的方法，当然这个也可用于选择API的版本，也可以改变URL为本地离线部署的地址，例如：
const options = {
url: 'https://js.arcgis.com/3.24/' // 这里的API地址可以是官网提供的CDN，也可在此配置离线部署的地址
}
esriLoader.loadModules(['esri/map'], options) // 传入需要使用的类
.then(([Map]) => {
// doSomeThing
})
.catch(err => {
console.error(err)
})
- 以及其他示例项目 传送门
2.项目搭建
- 创建项目：
vue init webpack arcgis_for_js_4.6 - 进入目录：
cd arcgis_for_js_4.6 - 安装项目依赖：
yarn - 安装
esri-loader包:yarn add esri-loader - 启动项目:
yarn start - 启动页面：
image
3.项目配置 ArcGis for JavaScript API
esri-loader已经下载好，现在需要对项目进行少许的配置
- 前面已经介绍了如何引入JS，和CSS，所以可以直接引入即可，但是因为服务的地址较多，为了后期方便维护和修改，这里我们可以新建一个管理服务地址的文件，
serviceUrl.js
export const ServiceUrl = {
baseMap: 'topo' // 这里可以定义自己服务器上的底图的地址，也可以使用ArcGis提供的底图，详见Basemap类
}
- 新建
baseMap.js
<template>
<div class='hello'>
<h4>{{msg}}</h4>
</div>
</template>
<script>
import { loadModules } from 'esri-loader'
import { ServiceUrl } from './ServiceUrl'
const option = ServiceUrl.apiUrl
export default {
name: 'baseMap',
data () {
return {
msg: 'Arcgis for JavaScript 4.6 Recode'
}
},
mounted () {
loadModules(['esri/Map', 'esri/views/MapView', 'dojo/domReady!'], option).then(([Map, MapView]) => {
// doSomeThing
}).catch(err => {
console.log(err)
})
}
}
</script>
<style scoped>
/*引入css*/
@import 'https://js.arcgis.com/4.7/esri/css/main.css';
</style>
image
图中1，我们使用的是esri-loader的loadModules来加载不同的类(模块),这里的loadModules是基于AMD异步加载模块的规范的，所以能看到基本代码骨架为
loadModules().then().catch()
图中2，如果不配置option，在源码中会自动加载官方提供的API地址,即
https://js.arcgis.com/4.7/
- 创建底图
现在已经引入所需的基本类，Map，和MapView，现在就已经可以按照官网提供的API进行开发了，现在创建底图
this.map = new Map({
basemap: 'topo' // 底图类型，详见BaseMap类
})
this.view = new MapView({
container: 'viewDiv', // 视图的容器
map: map, // Map的实例放入视图中
center: [104.06, 30.67], // 初始显示的地图中心点，经纬度
zoom: 10 // 当前地图缩放等级
})
- 加载效果：
image
