项目需求使用分析

如果你的项目需求很大，大量用到空间分析、三维展示，频繁交互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, latitudezoom: 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.zoomlet height = (currentZoom - 4) / 15 * 100 + '%'this.innerHeight = {height}}, 200)})},

初始化标绘工具（点，线，面）

createSketch() {const {graphicsLayerSketch, sketch} = GisHelper.createSketch(this.view, this.webMap)this.graphicsLayerSketch = graphicsLayerSketchthis.sketch = sketchthis.sketch.on('update', (event) => {if (event.state === 'complete') {this.sketchGraphics = event.graphicsif (!this.isSaveRange) {return false}if (this.toolBarType === 'plot') {this.sketchComplete(event)} else if (this.toolBarType === 'searchBySpatial') {this.queryFeatureLayer(event.graphics[0].geometry)}}})},```
创建graphic```bashcreateGraphicsLayer() { //创建graphicsLayer，显示graphicthis.graphicsLayer = new GraphicsLayer()this.webMap.add(this.graphicsLayer)},

工具栏标绘

 plotting(type, toolBarType, analyzeType) {this.analyzeType = analyzeTypethis.isSaveRange = truethis.toolBarType = toolBarTypeif (toolBarType === 'searchBySpatial') {if (this.originalLayerList.length <= 0) {// 信息提示this.$message.error('暂无图层可分析')} else {this.sketch.create(type)}} else {this.sketch.create(type)}},

ArcGIS API for JavaScript web前端应用相关推荐

视频教程-主流前端框架下ArcGIS API for JavaScript的开发-其他
主流前端框架下ArcGIS API for JavaScript的开发毕业于中国矿业大学地理信息科学专业.现就任于全球领先的GIS公司,主要担任地理平台研发工作,日常工作任务是ArcGIS JS A ...
ArcGIS API for JavaScript 4.0尝鲜——WebGIS前端开发大杀器
已经发布的ArcGIS API for JavaScript 4.0有着最前沿的新特性,这是一个更加对于开发者更加友好的Web API.3D的支持让你可以以更加炫酷的方式展示地理数据,而更加简洁明了的 ...
ArcGIS API for JavaScript 各个版本的SDK下载和发布，ArcGIS Runtime SDK for Android、ArcGIS Runtime SDK for Java等
ArcGIS API for JS 官网地址:https://developers.arcgis.com/javascript/ ArcGIS API for JavaScript 各个版本的SDK下 ...
ArcGIS API For JavaScript（8）之使用动态图层dynamicLayers实现多图层合并截图
场景还原: 定位某个矢量图斑范围面,过滤展示该图斑,以图斑为中心,截图图斑周边并附带影像底图的截图. 在前端要实现地图截图,首先想到的是使用arcgis rest api中的export接口,这是没问 ...
ArcGIS API for JavaScript ：简介与快速上手
一.简介子路曰:"卫君待子而为政,子将奚先?"子曰:"必也正名乎!" 孔子认为,为政最先要做的事情是正名,名不正则言不顺. 语言是上天赋予人类的神奇能力,而& ...
ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能（六）
目的: 1.ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能,鼠标点击后获取被点击对象的然后以infoWindow的方式显示点击对象的属性 ...
初学ArcGIS API for JavaScript
初学ArcGIS API for JavaScript 对于初学者来说,关于esri提供的一些样式和dojo自带的一些样式还是需要有一定的了解,这块在<WebGIS开发从基础到实践>讲解的 ...
图解ArcGIS API for JavaScript开发环境搭建
ESRI公司截止到目前已经发布了最新的ArcGIS Server for JavaScript API v3.9,它提供了更为丰富而又强大的功能. 本篇经验向大家介绍其本地部署及简单的第一个地图应用程 ...
创建类（点击获得位置信息）—ArcGIS API for JavaScript
不知道大家有没有这种体验,我们开始学web开发的时候,会把HTML.JavaScript.CSS代码都堆叠在一个HTML文件中,慢慢地,随着代码量的增多,不同的代码堆叠在一起显得很乱,我们开始把htm ...

ArcGIS API for JavaScript web前端应用

项目需求使用分析

arcgis创建基础

ArcGIS API for JavaScript web前端应用相关推荐

最新文章

热门文章