ArcGIS API for JavaScript
文档查看地址：
https://developers.arcgis.com/javascript/latest/
现在分未3.x和4.x两种版本，对应的是其2D和3D地图应用
项目需求使用分析
如果你的项目需求很大，大量用到空间分析、三维展示，频繁交互ArcGIS家族的产品（Server、ArcGIS Desktop等），请学；
如果你的项目需求比较小，也可以学，当然也可以有别的选择：
开源解决方案：Openlayers/Leaflets替代JsAPI。
Openlayers和Leaflets同样是WebGIS二次开发工具包，排名很靠前，二者区别是ol自己提供了封装好的功能模块，而lf则支持插件式，它的插件很多。他们都支持npm方式引入。
当然，为了实现简单的三维GIS，Cesium了解一下；
如果只是3D数据展示，ThreeJs了解一下；
如果数据源缺乏，不想自己做数据服务，对WebGIS标准缺少耐心，可以试试高德地图API、百度地图API等。
如果想全开源，就目前而言3DGIS还是ArcGIS最强外，传统二维WebGIS可以用QGIS代替ArcGIS Desktop、用PostgreSQL代替Geodatabase、用GeoServer代替ArcGIS for Server。
使用JsAPI最强大的特征就是真三维空间分析+无比强大的ArcTools工具箱了。
arcgis创建基础
我们使用的是二维的地图，如果需要其他的，请自行查找
arcgis + vue 环境安装 （命令可以将npm替换为yarn）
一、 使用esri-loader
1）npm install esri-loader --save-dev （yarn add esri-loader --save-dev ）
2）import {loadModules} from ‘esri-loader’
二、使用@arcgis/core
1)安装@arcgis/core
npm install @arcgis/core --save （yarn add @arcgis/core --save）
2)安装ncp
npm install ncp -g （yarn add ncp -g ）
3)配置package.json
“scripts”: {
// 两种启动方式
“serve”: “yarn copy && vue-cli-service serve”,
“npmServe”: “npm run copy && vue-cli-service serve”,
“build”: “vue-cli-service build”,
“lint”: “vue-cli-service lint”,
// 为了防止更改和版本内容出现差错，每次复制一遍实现更新
“copy”: “ncp ./node_modules/@arcgis/core/assets ./public/assets”,
“postinstall”: “npm run copy”
}
4)将样式添加进main.js里
import ‘@arcgis/core/assets/esri/css/main.css’
可能会使用到安装包（项目开发到目前使用的安装包，作参考）
"dependencies": {
"axios": "^0.21.0",
"core-js": "^3.6.5",
"dayjs": "^1.9.8",
"default-passive-events": "^2.0.0",
"echarts": "^5.0.2",
"el-tree-transfer": "^2.4.7",
"element-ui": "2.14.1",
"file-saver": "^2.0.5",
"ncp": "^2.0.0",
"qs": "^6.9.4",
"register-service-worker": "^1.7.1",
"swiper": "^7.4.1",
"vue": "2.6.11",
"vue-awesome-swiper": "^3.1.3",
"vue-axios": "^3.2.0",
"vue-print-nb": "1.7.5",
"vue-router": "^3.2.0",
"vuex": "^3.4.0",
"xlsx": "^0.16.9"
},
"devDependencies": {
"@arcgis/core": "4.19.1",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-pwa": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-unit-jest": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/test-utils": "^1.0.3",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"esri-loader": "^3.1.0",
"lint-staged": "^9.5.0",
"sass": "1.26.5",
"sass-loader": "8.0.2",
"svg-sprite-loader": "^5.0.0",
"vue-template-compiler": "2.6.11"
},
方法引入
import Map from '@arcgis/core/Map'
import MapView from '@arcgis/core/views/MapView'
import Graphic from '@arcgis/core/Graphic'
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer'
import BasemapToggle from '@arcgis/core/widgets/BasemapToggle'
import Point from '@arcgis/core/geometry/Point'
创建初始化地图
//初始化地图
initMap() {
this.webMap = new Map({
// 地图显示内容
basemap: 'osm',
ground: 'world-elevation',
})
this.view = new MapView({
// 引入地图的页面，创建一个名为map的div标签显示
container: this.$refs.map,
map: this.webMap,
center: [,], // longitude, latitude
zoom: 16
})
this.view.ui._removeComponents(['zoom'])
this.createSketch()
// this.showBasemapToggle()
this.createGraphicsLayer()
this.view.when(() => {
this.$refs.CustomZoom?.createZoom()
})
// 鼠标滚轮滚动地图的事件
this.view.on('mouse-wheel', () => {
setTimeout(() => {
let currentZoom = this.view.zoom
let height = (currentZoom - 4) / 15 * 100 + '%'
this.innerHeight = {
height}
}, 200)
})
},
初始化标绘工具（点，线，面）
createSketch() {
const {
graphicsLayerSketch, sketch} = GisHelper.createSketch(this.view, this.webMap)
this.graphicsLayerSketch = graphicsLayerSketch
this.sketch = sketch
this.sketch.on('update', (event) => {
if (event.state === 'complete') {
this.sketchGraphics = event.graphics
if (!this.isSaveRange) {
return false}
if (this.toolBarType === 'plot') {
this.sketchComplete(event)
} else if (this.toolBarType === 'searchBySpatial') {
this.queryFeatureLayer(event.graphics[0].geometry)
}
}
})
},```
创建graphic
```bash
createGraphicsLayer() {
//创建graphicsLayer，显示graphic
this.graphicsLayer = new GraphicsLayer()
this.webMap.add(this.graphicsLayer)
},
工具栏标绘
plotting(type, toolBarType, analyzeType) {
this.analyzeType = analyzeType
this.isSaveRange = true
this.toolBarType = toolBarType
if (toolBarType === 'searchBySpatial') {
if (this.originalLayerList.length <= 0) {
// 信息提示
this.$message.error('暂无图层可分析')
} else {
this.sketch.create(type)}
} else {
this.sketch.create(type)
}
},