laydate 在vue中使用_Vue中使用ArcGIS JS API 4.14开发
一、概述
在之前很长的一段时间中,使用ArcGIS JS API(以下简称“JS API”)开发WebGIS系统的时候,还是基于传统的前端框架和各种前端技术来开发,这些框架和技术各位使用过的大概有这些:Dojo、jQuery、Bootstrap、CommonJS等。用这些传统的技术框架结合JS API去开发的时候,我们引入JS API是在系统的HTML页面中通过
目前,随着前端技术的不断发展,React和Vue等前端开发技术已经成为了一名前端开发者的标配,作为GISer的我们也毫无例外,在开发许许多多的WebGIS项目系统时,我们都会去选择目前主流的这些开发技术,其中使用最多的就是React和Vue这两种。所以本文就主要介绍下我们如何使用Vue结合JS API去开发我们的项目系统。
二、开始前的技术基础
- 有一定的Vue基础知识,熟悉ES6(能看懂一个Vue文件中HTML标签、CSS代码、JS代码之前的联系就行)
- 计算机安装了NodeJS,听说过npm这个东西
三、操作步骤
1、环境准备
在开始今天的介绍之前,我们要准备下开发环境,本文对开发环境有两个要求:NodeJS环境和Vue环境。如果各位没有这两个环境的话,请看下文进行安装;如果机子上有这两个环境,请跳过此节,从第二节开始阅读。
1.1、NodeJS环境安装
1.1.1、进入到NodeJS官网(https://nodejs.org/en/)下载最新版的NodeJS,此处推荐下载LTS版本,这是稳定的并且官方长期支持更新的一个版本,如图:
1.1.2、下载完安装包之后,双击安装包,弹出安装界面,选择相应的安装目录后,我们一路点击【Next】按钮即可,中间过程并没有特别需要注意的地方。
1.1.3、安装完成后,我们打开命令行窗口,通过以下命令查看是否安装成功,如果出现以下版本号信息,则表示NodeJS环境安装部署成功:
node -vnpm -v
在这里可能有人会问NodeJS和npm的关系,其实NodeJS就是javaScripe的一个运行环境,它对谷歌V8引擎做了封装,是一个服务器端的JS解释器。npm是NodeJS的一个包管理器。我们在开发时如果要用到什么插件,需要先搜索、下载、安装到NodeJS环境中,然后才可以使用这个插件来开发完成某个需求,这个过程是相当繁琐的。有了npm包管理器,我们只需要在项目根目录下运行命令行,然后通过npm的安装命令将需要的插件一键安装到此项目或者NodeJS环境中,这是非常便捷的一件事情,而且很多大神将自己开发好的轮子上传到了npm网站上面,所以我们需要哪个插件,直接npm安装即可,不需要再去进行搜索、下载、安装这么麻烦的过程。
1.1.4、在此处我们安装NodeJS环境,说白了也是为了安装npm这个包管理器才进行的操作。
1.2、Vue环境搭建
Vue环境搭建其实就做两件事情,安装Vue和Vue脚手架工具。这两个安装都是通过npm来安装的,详细过程如下:
1.2.1、打开命令行工具,通过以下两个命令来分别安装Vue环境和Vue的脚手架工具,如下:
npm install vuenpm install -g @vue/cli
1.2.2、安装完成后,通过以下命令进行测试,出现版本号信息,则说明安装成功:
vue --version
到此处为止,我们的环境准备工作已经完成,接下来我们进入今天的正题,使用Vue结合JS API来开发。
2、初始化项目demo
2.1、在合适的目录下新建文件夹,然后在此文件夹中打开命令行工具,通过以下命令来创建一个基础的Vue项目demo,如下:
vue create vuejsapi414demo
以上命令使用了Vue的脚手架工具来初始化一个项目demo,demo名称为“vuejsapi414demo”,此名称可以自己随意取名。输入以上命令按回车之后,会出现项目初始化窗口,在此处需要我们选择项目中使用的插件,此处选择第一个默认的即可:
选择之后按回车,会进行插件安装和项目初始化工作,如下:
2.2、项目初始化结束后,我们使用命令行中提示的命令进入到项目根目录,然后通过提示命令来启动项目,并且在浏览器中通过地址“localhost:8080”来查看,如下:
cd .vuejsapi414demo npm run serve
2.3、此时,初始化项目操作已经完成。我们通过vue脚手架来创建了一个基础的vue项目demo,接下来我们通过这个demo来介绍JS API如何跟Vue结合来开发使用。
3、ArcGIS JS API和Vue结合开发
以上过程已经完成了环境安装部署和项目初始化工作,接下来就要进行JS API的开发介绍了。
3.1、在Vue项目中使用JS API时已经不像传统的开发方式那样在index.html中引入JS和CSS文件来使用JS API,而是通过一个叫“esri-loader”的中间件,将我们的JS API和Vue项目做一个无缝衔接。
3.2、在命令行中通过Ctrl+C来停止项目的运行,然后通过以下命令来安装esri-loader,如下:
npm install esri-loader --save-dev
3.3、安装结束后,通过命令“npm run serve”重新启动项目,然后用编辑器打开我们初始化的这个项目代码,此处使用的是VS Code编辑器,各位可以使用Hbuilder、SublimeText3、webStrom等编辑器,不做强制要求,如下:
3.4、然后打开项目根目录下的package.json文件,在这个文件中我们可以看到刚才安装的esri-loader插件,此时使用的是V2.13.0版本,如下所示:
3.5、接下来我们就在项目根目录下的src文件夹中,通过修改App.vue这个文件夹来介绍如何在Vue中使用JS API开发。如下,我们先删除App.vue这个文件中多余的HTML标签和一些JS代码,最后这个文件代码如下所示:
3.6、在此处我们就不新建标签了,直接在id为“app”的这个div中来实例化一个地图。接下来我们修改下body标签和id为“app”这个div的标签样式。代码如下:
body { margin: 0; /**主要是去除谷歌浏览器默认的8像素的外边距 */}#app { position: absolute; /**使这个div的大小撑满整个屏幕 */ width: 100%; height: 100%;}
3.7、然后加载引入我们安装的esri-loader插件,如下:
import {loadModules} from 'esri-loader';
3.8、引入esri-loader之后,接下来就让我们的项目系统和JS API做一个衔接。在这里大家一定要理解一个概念:我们在Vue中使用JS API时,调的接口这些还是我们传统开发调的那些接口API,esri-loader在这里仅仅是充当一个桥梁的作用,所以大家不要误认为esri-loader也是一个开发包哈。也就是说,你最终使用的JS API开发包还是我们本地部署或者JS API官网的开发包,并不是esri-loader里面的开发包。
做衔接之前,我们先创建一个mounted生命周期函数,然后在这个函数里调用创建地图的函数,代码如下:
import {loadModules} from 'esri-loader';export default { name: 'app', methods: { //创建地图 _createMapView: function() { const _self = this; //定义一个_self防止后续操作中this丢失 const option = { //定义一个包含有JS API中js开发包和css样式文件的对象 url: 'http://localhost/4.14/init.js', css: 'http://localhost/4.14/esri/themes/light/main.css', }; //通过loadModules来做衔接 loadModules([], option) .then(([]) => { //业务代码在此处编写 }).catch((err) => { _self.$message('地图创建失败,' + err); }); }, }, mounted: function() { this._createMapView(); }}
通过以上的代码,就将我们的项目系统代码和JS API做了一个衔接,其实就是在我们Vue项目中引入了JS API。接下来进行JS API的开发。
3.9、本文主要是通过实例化一张地图来介绍如何使用JS API开发。接下来的操作跟我们传统的开发方式就变得类似了,先是加载相应的JS API模块,然后在实例化各个模块,如下所示:
//通过loadModules来做衔接 loadModules(['esri/Map', 'esri/views/MapView'], option) .then(([Map, MapView]) => { //业务代码在此处编写 const map = new Map({ //实例化地图 basemap: "streets" }); const view = new MapView({ //实例化地图视图 container: "app", map: map, zoom: 11, center: [104.072044,30.663776] }); view.ui.components = []; //清除掉地图左上角默认的缩放图标 }).catch((err) => { _self.$message('地图创建失败,' + err); });
3.10、通过以上步骤,就实例化了一张二维地图,最终的效果如下所示:
四、总结
本文沿着Vue基础项目demo搭建到JS API的引入,并最终生成一张二维地图的过程进行了详细的介绍。本篇文章适合有一定Vue基础和JS API开发基础的人员查看学习,在本文中我们使用的JS API是本地部署的JS API,大家也可以将API地址换成官网的,只需要修改option这个对象的属性值即可,类似于下面:
const option = { //定义一个包含有JS API中js开发包和css样式文件的对象url: 'https://js.arcgis.com/4.14/init.js',css: 'https://js.arcgis.com/4.14/esri/themes/light/main.css',};
通过修改如上的代码,就将JS API的引用地址换成了官网地址,只不过在此处运行的时候需要注意下跨域的问题。如果遇到跨域问题,可以通过配置Vue的配置文件来解决,具体操作不在本文范围内,可自行百度解决。大家在Vue和JS API结合开发时如果遇到什么问题,请联系博主解答。
附:
项目demo全部代码:
https://gitee.com/XuQianWen/use_of_arcgis_js_api_in_vue
App.vue全部代码:
laydate 在vue中使用_Vue中使用ArcGIS JS API 4.14开发相关推荐
- vue中使用arcgis js api 中通过坐标定位
arcgis js api 中通过坐标定位 根据坐标定位到当前位置 并且放大倍数 根据坐标定位到当前位置 并且放大倍数 let graphic = new Graphic({geometry: geo ...
- livecharts中仪表盘_Vue中使用Echarts仪表盘展示实时数据的实现
在vue中echarts仪表盘实时数据 彩笔一枚,简单记录一下. 业务场景:通过websocket实时推送数据,将数据渲染到仪表盘中. 第一步: 基于准备好的dom,初始化echarts仪表盘实例. ...
- axios vue 回调函数_VUE使用axios调用后台API接口的方法
VUE使用axios调用后台API接口的方法 引言 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架.与其它大型框架不同的是,Vue 被设计为可 ...
- 关于ArcGIS JS API中的map高度为400px的问题解决
文章目录 问题现象 原因分析 解决方法 问题总结 问题现象 使用ArcGIS JavaScript API V3.27创建了一个最简单的地图页面,创建map对象时给传入了一个div,样式设的是宽高均为 ...
- ArcGIS JS API中切换页面后组件报Tried to register widget with id== but that id is already registered
由于ArcGIS JavaScript API 基于dojo框架,在dojo中,除了沿用Dom结点, dojo 还自定义了一类结点用"dojoType" 进行标识.dojo 称这些 ...
- 加载vue文件步骤_vue中.vue文件解析步骤详解
这次给大家带来vue中.vue文件解析步骤详解,vue中.vue文件解析的注意事项有哪些,下面就是实战案例,一起来看一下. 我们平时写的 .vue 文件称为 SFC(Single File Compo ...
- echarts vue 柱状图实例_VUE中使用Echarts绘制柱状图
在main.js中引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts 在相应的vue中导入echarts ...
- axios vue 回调函数_vue中ajax请求与axios包完美处理
这次给大家带来vue中ajax请求与axios包完美处理,vue中ajax请求与axios包处理的注意事项有哪些,下面就是实战案例,一起来看一下. 在vue中,经常会用到数据请求,常用的有:vue-r ...
- vue数组刷新_Vue中数组更新后,页面没有动态刷新问题
最近使用vue开发时,在一个函数中使用for循环,改变了页面中的数组,在函数中查看是修改成功的,但是页面中没有动态刷新. 在Vue的官方文档有提到这样一个注意事项: 数组变更检测注意事项: 由于 Ja ...
- echart vue 图表大小_vue中echarts图表大小适应窗口大小且不需要刷新案例
我就废话不多说了,大家还是直接看代码吧~ 内容如下: // 基于准备好的dom,初始化echarts实例 let myChart = this.$echarts.init(document.getEl ...
最新文章
- 基于轮廓调整的SOTA实例分割方法,速度达32.3fps | CVPR 2020
- 一次Ping1000个IP会怎么样?
- android 数据库 字节数组,Android上的GreenDAO:字节数组作为主键/构建包含字节数组属性Where子句的查询...
- 两个不同的数据库如何跨库事务
- 在linux上安装jenkins
- matplotlin 入门
- docker-containerd 启动流程分析
- 轻松搞懂Linux中程序、进程、服务的区别及操作命令
- Redis与数据库的数据一致性
- NoClassDefFoundError: Could not initialize class
- 还在原地踏步,提高软件测试能力的方法你知道吗?
- 招商与代理--营销至上
- 深度相机原理和优势对比
- 车位地磁检测器产品选型指导(干货!)
- htc 8x android,颠覆之作的探究,HTC 8X拆解多图欣赏
- vulnhub靶场-hacksudo - Thor
- pytorch 寻找二元函数的最小值
- 2018第二届中国移动金融发展大会
- HTML+CSS+JavaScript 超具创意的网页生日快乐祝福网页模板
- 小学生C++编程基础 课程9
热门文章
- 大叔手记(2):为每个应用程序池单独设置aspnet.config配置文件
- ORB_SLAM2之Pangolin的安装与问题处理
- Hololens2 与Unity 远程连接调试程序和调试部署
- 190706每日一句
- unity3d之kinect 初识
- Atitit db model 数据库快速建模法 开发效率 目录 1. 结构(数据)设计 行为(处理)设计:	1 2. 业务建模阶段	1 2.1. Ui建模法,根据表单字段建立表字段	2 2.2.
- Atitit mq读取队列信息 范例 目录 1.1. 读取原理与主要流程	1 1.2. 范例项目 C:\0wkspc\MqDemoPrj	1 1.3. 范例代码	1 1.1.读取原理与主要流程
- Atitit 团队工具链体系打造---提升团队效率的一些通用软件 attilax总结
- Atitit.Base64编码原理与实现设计
- paip.SOCKET抓包工具总结V2012.9.17