vue + ArcGIS 地图应用系列二：加载地图

最新推荐文章于 2025-11-13 10:13:42 发布

原创

最新推荐文章于 2025-11-13 10:13:42 发布 · 2k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue #arcgis

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