Vue + ArcGIS API for JavaScript 构建前端GIS应用（一）

lufficc 发布于2019-08-23 18:30 / 1255人阅读

摘要：技术路线的选择技术学习内容汇总技术路线的选择项目的技术路线是使用构建一套前端应用，更加具体的技术路线实际上是，应用到了技术栈加上了最新版的。不管怎么说，以这次项目对的使用体验挺好。本次项目没有使用开源的要求，自然是最好的选择。

写这篇总结的意义：总结，回顾，反思项目进行过程和这套“Vue + ArcGIS API for JavaScript”GIS前端应用技术路线，从项目与技术两个方面积累经验，寻找知识缺陷和项目优化空间，在总结的过程中学习。

技术路线的选择—vue + arcgis js api

技术学习内容汇总

技术路线的选择—vue + arcgis js api

项目的技术路线是使用Vue+ArcGIS API for JavaScript构建一套gis前端应用，更加具体的技术路线实际上是 vue + vue-cli + vue-router + vuex + antd for vue + arcgis js api ，应用到了vue技术栈加上了最新版4.11的arcgis js api。最核心的问题就是vue与基于dojo开发的amd模式的api怎么集成？集成之后怎么使用？使用的时候会不会出现很多坑？本文作为全方位的总结，希望思路完整，所以还是从头说起。

Vue是目前前端三大流行框架之一（还包括React，Angular，来源于道听途说），她和React一样是一个表现层框架，专注于页面的渲染，并且，她和React一样都具有声明式渲染、组件化的特征。我是先接触React再接触Vue的，两者很多相似之处，至于说Vue学起来更容易轻松，我没有什么深切的体验，但确实Vue的中文资料更加丰富，毕竟算是国产。我跟单位的大师讨论过相关问题，我说Vue蛮好用的用户量貌似也蛮大，他说Vue只是在中国用户量大而已，他更偏向于相信大厂。不管怎么说，以这次项目对Vue的使用体验挺好。

Arcgis一直以来在gis领域算的上垄断地位，gis专业学生学校里学的，很多相关单位用的，都是Arcgis。他的产品体系庞大，从桌面端、客户端，到服务器，到在线服务，到大数据，到人工智能与gis相关或不那么相关的都有，她是成熟的gis商业软件，选她选的是靠谱。毕竟是美国的商业软件，过度依赖不是什么好事，一是钱的事，二是产权的事，越来越多开发者选择使用开源gis前端api，包括leaflet、mapbox等等。本次项目没有使用开源gis的要求，Arcgis自然是最好的选择。

技术学习内容汇总

单位之前没有使用这套技术路线进行过项目，甚至没有用vue做过项目，领导在项目前安排了大概3-4个小时的培训，相关技术的学习路线汇总，如下：

环境

node.js

NVM - Node Version Manager( nodejs版本管理工具 )

npm cnpm yarn

开发工具 vscode

Emmet

预备知识体系

ES6 - 重点看： let; const; 结构赋值; 对象扩展; 函数扩展; SET; MAP; Iterator; Promise; asnyc-await;

CommonJS amd 参考阮一峰模块化编程

MVVM模式

Webpack

Babel -包括polyfill

Sass

vue + vue router + vuex + axios + antd技术栈

vue

vue-loader

vue的生命周期

父子组件之间通信、子父组件间通信

vue-cli 脚手架工程

vue-router

设置动态路由，动态获取js，减少一次性的加载量，提高页面响应速度

路由传参

vuex

arcgis api 4.11

GPU云服务器云服务器 arcgis api 前端构建 javascript for循环 javascript_for

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105333.html

ArcGIS 栅格函数在线调用详解

摘要：使用栅格函数支持直接在前端使用栅格函数来重新渲染影像服务。针对数据在栅格函数模版编辑器中使用渲染地貌函数，并且设计好结果的渲染方式。配置栅格函数模版可以在两种情况下进行。 ArcGIS 栅格函数在线调用详解导读：ArcGIS从10.0版本开始引用镶嵌数据集，并且第一次在影像中加入栅格函数（raster functions），使得影像的呈现和信息提取与GIS紧密的结合起来，简单的影像功...

894974231 2019-08-20 18:35 评论0 收藏0
vue地图可视化 ArcGIS篇（3）

摘要：不建议底图选择中存在两种不同坐标体系，如下图坐标存在明显的偏差，火星坐标在采用坐标系的地图上位置偏上彩色中国天地图全球卫星地图例如我们使用的类进行查找，返回的数据都是国际坐标，因此必须进行偏差纠正。 ArcGIS for javascript开发心得本次实例中采用ArcGIS for javascript3.24版本，由于版本3与4在API等存在较大区别，就不一一列举，详细区别看官方...

oogh 2019-08-23 12:38 评论0 收藏0
JavaScript矢量化地图库 – 快速入门

摘要：注意在代码中将其替换为自己刚刚申请的运行，显示地图修改保存之后点击运行就可以得到一幅矢量地图了，此过程可能会稍微有点长，要耐心多等一会儿。 VectorMap.js是一个开源地图渲染JavaScript库，可以使用WebGL或者HTML5两种方式进行交互式矢量地图（包括矢量瓦片地图，一般性矢量数据地图）和栅格瓦片地图的渲染。 WebGL渲染意味着高性能，大数据， HTML5渲染意...

MiracleWong 2019-08-23 17:19 评论0 收藏0
ArcGIS水文分析实战教程（10）河流平均比降计算

摘要：水文分析实战教程河流平均比降计算本章导读河流比降指的是河流任意两端点间的高程差与两点间的水平距离之比值，简单的概括为单位河长内的落差，其单位一般都是。读者可以参考水文分析实战教程河流提取与河网分级的做法去提取。 ArcGIS水文分析实战教程（10）河流平均比降计算本章导读：河流比降指的是河流任意两端点间的高程差与两点间的水平距离之比值，简单的概括为单位河长内的落差，其单位一般都是‰ ...

zhangrxiang 2019-07-30 14:18 评论0 收藏0