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

luckrain7 2020-06-23 11:40:18
原文地址:https://segmentfault.com/a/1190000022554647

![2.png](https://segmentfault.com/img/bVbGNEI "2.png")

1. 创建 Vue 项目

我们利用 Vue-CLI 工具进行快捷创建

  1. 下载 Vue-CLI 工具
yarn add global @vue/cli  # or: npm i @vue/cli -g
  1. 创建 Vue 项目

根据自己项目需求进行配置,这里不过多的赘述。

vue create example # example为项目名称,我这里以example为例
  1. 进行项目并启动测试
cd example
yarn serve

访问 <http://localhost&gt;:8080 ,出现 vue 界面说明项目创建成功。

2. 引入 ArcGIS API

> 因为历史原因,ArcGIS API 使用的 AMD 模块化思想,与 Vue 的模块化思想相冲突。ArcGIS 官方给出了 esri-loader 解决方案,我们使用这个包进行 ArcGIS API 的异步加载

  1. 下载 esri-loader
yarn add esri-loader # or: npm i esri-loader -s
  1. 配置 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,
  ],
}
  1. 在 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 &quot;esri-loader&quot;; // 异步加载模块
import config from &quot;./config&quot;; // 配置项
import { DataType } from &quot;../utils/index&quot;; // 工具函数

class ArcGIS {
  constructor() {
    this.map = null; // 地图
    this.baseMap = null; // 地图底图
  }

  init($el) {
    // 加载地图必备样式文件
    loadCss(&quot;http://localhost:3000/arcgis-3.32/esri/css/esri.css&quot;);
    loadCss(&quot;http://localhost:3000/arcgis-3.32/dijit/themes/claro/claro.css&quot;);
    loadModules(
      [
        &quot;esri/map&quot;,
        &quot;tdlib/SDTDTLayer&quot;,
        &quot;tdlib/SDRasterLayer&quot;,
        &quot;tdlib/SDRSAnnoLayer&quot;,
        &quot;esri/geometry/Extent&quot;,
        &quot;esri/SpatialReference&quot;,
        &quot;dojo/parser&quot;,
      ],
      config.loadConfig
    )
      .then(
        ([
          Map, // 地图模块
          SDTDTLayer, // 山东天地图矢量地图
          SDRasterLayer, // 山东天地图影像地图
          SDRSAnnoLayer, // 山东天地图影像地图注记
          Extent, // 范围模块
          SpatialReference, // 坐标系模块
          Parser, // 样式解析模块
        ]) =&gt; {
          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: &quot;bottom-right&quot;, // 缩小放大按钮位置
          });
          this.map.addLayer(this.baseMap.vectorMap, 0);

        }
      ) //end
      .catch((err) =&gt; {
        console.error(err);
      });
  }

  /*
   *  description:  添加图层
   *  param {Layer,Array&lt;Layer&gt;} layer  需添加的图层
   *  param {number,Array&lt;number&gt;} lever 添加图层的层数
   */
  addLayer(layer, lever) {
    // &lt;!--StartFragment--&gt;判断是否为数组&lt;!--EndFragment--&gt;
    if (DataType(layer, &quot;array&quot;)) {
      layer.forEach((item, index) =&gt; {
        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. 创建地图组件并加载地图

  1. 引入我们上面创建好的模块,并进行实例化
  2. 执行其中的 init 方法。并传入对应 dom 的 ID
&lt;template&gt;
  &lt;div id=&quot;app&quot;&gt;
    &lt;Header /&gt;
    &lt;div class=&quot;main&quot;&gt;
      &lt;div id=&quot;map&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
import Header from &quot;./components/Header.vue&quot;;

// 引入 ArcGIS 模块,并进行实例化
import ArcGIS from &quot;./map/init.js&quot;;
let Map = new ArcGIS();
export default {
  name: &quot;App&quot;,
  components: {
    Header,
  },
  mounted() {
    Map.init(&quot;map&quot;); // 初始化地图模块
  },
};
&lt;/script&gt;

&lt;style lang=&quot;less&quot;&gt;
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.main {
  position: absolute;
  top: 70px;
  bottom: 0;
  width: 100%;

  #map {
    width: 100%;
    height: 100%;
  }
}
&lt;/style&gt;

4. 效果图

![init.png](https://segmentfault.com/img/bVbGNEJ "init.png")

推荐阅读

![wx.png](https://segmentfault.com/img/bVbFReC "wx.png")
您的关注是莫大鼓励

声明:该文章系转载,转载该文章的目的在于更广泛的传递信息,并不代表本网站赞同其观点,文章内容仅供参考。

本站是一个个人学习和交流平台,网站上部分文章为网站管理员和网友从相关媒体转载而来,并不用于任何商业目的,内容为作者个人观点, 并不代表本网站赞同其观点和对其真实性负责。

我们已经尽可能的对作者和来源进行了通告,但是可能由于能力有限或疏忽,导致作者和来源有误,亦可能您并不期望您的作品在我们的网站上发布。我们为这些问题向您致歉,如果您在我站上发现此类问题,请及时联系我们,我们将根据您的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。

本周热议
python每日一练之单元测试
zookeeper 实现一个简单的服务注册与发现(C++) 三:服务发现
zookeeper 实现一个简单的服务注册与发现(C++) 二:注册
zookeeper 实现一个简单的服务注册与发现(C++) 一:与zk保持连接
Java+MySQL笔记
一些零散笔记
TCP/IP协议栈相关知识点总结
Dart学习手册
9.ubuntu文件文本编码的查看与转换,乱码问题
C++输入输出流
扩展2
69-django-forms组件源码刨析、cookie与session
67-django-前后端传数据编码格式、ajax传json格式数据、ajax传文件数据、ajax与sweetalert结合二次确认、django自带的序列化组件、批量插入、分页器
66-django-模型层之choices参数、多对多三种创建方式、数据库三大设计范式、Ajax
64-django-模型层(ORM语法)单表查询、常见十几种查询方法、双下划线查询、多表操作、外键字段增删改查、跨表查询
62-django-无名有名分组反向解析、路由分发、名称空间、伪静态、pycharm虚拟环境、django版本区别、视图层之三板斧、JsonResponse、form表单上传文件、FBV与CBV
61-django-数据增删改、orm创建表关系、django请求生命周期流程图、路由层之路由匹配、无名分组、有名分组
60-django-静态文件配置、request对象方法初识、pycharm链接数据库(MySQL)、django链接数据库(MySQL)、orm简介、orm数据增删改查
巴基斯坦 4400 万移动用户信息泄露,黑客欲以 210 万美元比特币价格出售
支付宝杭州健康码出现异常 地铁大厅人满为患
HaowuliaoA

微信扫码关注 HaowuliaoA 订阅号

友情链接

支付猫
链才网-区块链英才
phpEnv集成环境
广州翻译公司
Lion技术博客
花香诱人醉
LyApi框架
凉风有信
快斗博客
佩晨的博客
蛙导
layui
WebIM
layer
layDate
申请友链
QQ联系