vue + ArcGIS 地图应用系列二:加载地图
![](https://imgkr.cn-bj.ufileos.com/47366d24-f3c4-40bf-94ca-ba5ebb1b3ccd.png)
1. 创建 Vue 项目
我们利用 Vue-CLI 工具进行快捷创建
下载 Vue-CLI 工具
yarn add global @vue/cli # or: npm i @vue/cli -g
创建 Vue 项目
根据自己项目需求进行配置,这里不过多的赘述。
vue create example # example为项目名称,我这里以example为例
进行项目并启动测试
cd example
yarn serve
访问 http://localhost:8080 ,出现 vue 界面说明项目创建成功。
2. 引入 ArcGIS API
因为历史原因,ArcGIS API 使用的 AMD 模块化思想,与 Vue 的模块化思想相冲突。ArcGIS 官方给出了
esri-loader
解决方案,我们使用这个包进行 ArcGIS API 的异步加载
下载 esri-loader
yarn add esri-loader # or: npm i esri-loader -s
配置 ArcGIS API 异步加载地址
我们在第一讲中讲到的 ArcGIS API for JavaScript 本地部署(开发环境) 就派上了用场。
新建一个配置文件 src/map/config.js 配置托管的 API 地址
export default {
// load配置
loadConfig: {
url: 'http://localhost:3000/arcgis-3.32/init.js', //托管 API 地址
},
// 初始化位置
startExtent: [
118.54805985687483,
36.48416358185947,
120.25643388031263,
35.52697974396869,
],
}
在 src/map/init.js 中新建 ArcGIS 加载类
代码如下
/* eslint-disable no-unused-vars */
/*
* Description: arcgis地图部分
* Author: LuckRain7
* Date: 2020-04-28 20:44:49
*/
import { loadModules, loadCss } from "esri-loader"; // 异步加载模块
import config from "./config"; // 配置项
import { DataType } from "../utils/index"; // 工具函数
class ArcGIS {
constructor() {
this.map = null; // 地图
this.baseMap = null; // 地图底图
}
init($el) {
// 加载地图必备样式文件
loadCss("http://localhost:3000/arcgis-3.32/esri/css/esri.css");
loadCss("http://localhost:3000/arcgis-3.32/dijit/themes/claro/claro.css");
loadModules(
[
"esri/map",
"tdlib/SDTDTLayer",
"tdlib/SDRasterLayer",
"tdlib/SDRSAnnoLayer",
"esri/geometry/Extent",
"esri/SpatialReference",
"dojo/parser",
],
config.loadConfig
)
.then(
([
Map, // 地图模块
SDTDTLayer, // 山东天地图矢量地图
SDRasterLayer, // 山东天地图影像地图
SDRSAnnoLayer, // 山东天地图影像地图注记
Extent, // 范围模块
SpatialReference, // 坐标系模块
Parser, // 样式解析模块
]) => {
this.baseMap = {
vectorMap: new SDTDTLayer(), //矢量地图
rasterMap: new SDRasterLayer(), //影像地图
rasterMapAnnotation: new SDRSAnnoLayer(), //影像注记
type: 1, // 1 为矢量 | 2:影像
};
Parser.parse(); // 解析
// 设置初始化地图位置
const startExtent = new Extent(
...config.startExtent,
new SpatialReference({ wkid: 4490 })
);
//加载地图
this.map = new Map($el, {
extent: startExtent, // 初始化位置
zoom: 10, // 缩放级别
logo: false, // esri logo
maxZoom: 18, // 最大缩放级别
sliderPosition: "bottom-right", // 缩小放大按钮位置
});
this.map.addLayer(this.baseMap.vectorMap, 0);
}
) //end
.catch((err) => {
console.error(err);
});
}
/*
* description: 添加图层
* param {Layer,Array<Layer>} layer 需添加的图层
* param {number,Array<number>} lever 添加图层的层数
*/
addLayer(layer, lever) {
// <!--StartFragment-->判断是否为数组<!--EndFragment-->
if (DataType(layer, "array")) {
layer.forEach((item, index) => {
lever ? this.map.addLayer(item, lever[index]) : this.map.addLayer(item);
});
} else {
lever ? this.map.addLayer(layer, lever) : this.map.addLayer(layer);
}
}
}
export default ArcGIS;
3. 创建地图组件并加载地图
引入我们上面创建好的模块,并进行实例化 执行其中的 init 方法。并传入对应 dom 的 ID
<template>
<div id="app">
<Header />
<div class="main">
<div id="map"></div>
</div>
</div>
</template>
<script>
import Header from "./components/Header.vue";
// 引入 ArcGIS 模块,并进行实例化
import ArcGIS from "./map/init.js";
let Map = new ArcGIS();
export default {
name: "App",
components: {
Header,
},
mounted() {
Map.init("map"); // 初始化地图模块
},
};
</script>
<style lang="less">
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.main {
position: absolute;
top: 70px;
bottom: 0;
width: 100%;
#map {
width: 100%;
height: 100%;
}
}
</style>
4. 效果图
![](https://imgkr.cn-bj.ufileos.com/209cc2d9-db38-4a11-a36a-7578fd225856.png)
推荐阅读
您的关注是莫大鼓励