ArcGIS API for JavaScript 4.22学习 - 构建 Vue+ArcGIS 项目
下面将记录下如何构建一个 Vue + ArcGIS 的项目。
构建环境
在正式开发前，本地需要先配置好两个环境： NodeJS环境和Vue环境
NodeJS环境安装
可进入到 NodeJS中文官网 的下载页下载NodeJS，此处不建议下载最新版本的，因为若是后续有要使用sass/scss等CSS预处理器的话， sass/scss与NodeJS 的版本依赖较高，最新版本的NodeJS一般会导致sass/scss安装失败。我个人使用的是 Node.js 14.18.2 版本 的
网页入口在：NodJS官网→下载页，选择”以往版本”→表格选择一个稳定版本，如v14.18.2(我主要是考虑兼容scss)，点击下载跳转→在下载页下载程序 即可。
如下图
下载完安装包之后，双击安装包，弹出安装界面，选择相应的安装目录或者默认安装路径，然后一路点击 Next 按钮即可，中间过程并没有特别需要注意的地方；安装完成后，打开电脑 cmd 窗口，查询node版本号信息，若能显示出版本号则安装成功。
Vue环境安装
Vue方面我个人使用的是 Vue2.x 版本，可执行下面命令安装环境并创建项目
# 最新稳定版
npm install vue
# 在自己对应的项目目录下 创建Vue项目
# 创建过程中，注意选择Vue2
vue create xxxx
可通过命令行 vue –version ，查看当前安装的 Vue 环境版本
使用ArcGIS
网上涉及 Vue+ArcGIS 的比较多的都是用 4.17 以前的版本，均是会推荐安装 npm install esri-loader –save-dev 。 而我使用的是 ArcGIS最新版本的 ESM 方式，我需要安装的是 @arcgis/core， 模块的使用也如同我们平时ES6加载模块功能一样便利。
- 在当前创建的 Vue项目目录里，右键打开命令行工具，执行并引用 ArcGIS 的 ESM 模块：
# 将模块安装到项目中 npm install @arcgis/core - 若有需要用到相关 ArcGIS 模块的，直接使用import语句加载单个模块
import WebMap from "@arcgis/core/WebMap"; import * as projection from "@arcgis/core/geometry/projection"; - 还需要在 App.vue 或者自定义的 index.vue 页面中，引入相关的CSS文件
<style>
/* 使用GIS小组件如弹框、距离/面积测量时，需要引用当前css才能显示 */
@import "https://js.arcgis.com/4.22/@arcgis/core/assets/esri/themes/dark/main.css";
</style>
综上，便完成了在Vue中 引用 ArcGIS 的配置，接下来若有需要用到相关 ArcGIS 模块的，直接import即可。
加载地图
在配置好相关环境和模块库后，下面我就以 加载地图 作为例子分享下如何使用 ArcGIS JS API 开发。
首先，完成创建 Vue 项目后，可更改 App.vue 文件，或者自定义 index.vue 页面文件并设置好router跳转，再在App/index文件中 import引入相关 ArcGIS 模块，如 Map 和 MapView. 接着，初始化 Map 和 MapView 实例，并在页面挂载后调用。完整页面代码 以及执行npm run serve 命令后的界面效果如下：
<!--
* @Author: wason
* @version:
* @Descripttion:
* @LastEditors: wason
-->
<template>
<div id="app"></div>
</template>
<script>
import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
export default {
name: "App",
methods: {
//创建地图
_createMapView: function () {
try {
// 基础2D道路地图显示
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) {
console.log("地图创建失败===>", err);
}
},
},
mounted: function () {
this._createMapView();
},
};
</script>
<style>
@import "https://js.arcgis.com/4.22/@arcgis/core/assets/esri/themes/dark/main.css";
#app {
position: absolute;
width: 100%;
height: 100%;
}
#infoDiv {
padding: 10px;
width: 275px;
}
#sliderValue {
font-weight: bolder;
}
#legendDiv {
width: 260px;
}
#description {
padding: 10px 0 10px 0;
}
</style>
当在http://localhost:8080/#/ 页面下看到上图时，便成功实现了首次 ArcGIS 的模块应用。
