vue + ArcGIS 地圖應用系列二：加載地圖

1. 創建 Vue 項目

我們利用 Vue-CLI 工具進行快捷創建

1. 下載 Vue-CLI 工具

yarn add global @vue/cli  # or: npm i @vue/cli -g

2. 創建 Vue 項目

根據自己項目需求進行配置，這里不過多的贅述。

vue create example # example為項目名稱，我這里以example為例

3. 進行項目並啟動測試

cd example
yarn serve

訪問 http://localhost: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

2. 配置 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, ], } 

3. 在 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. 創建地圖組件並加載地圖

1. 引入我們上面創建好的模塊，並進行實例化
2. 執行其中的 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. 效果圖

推薦閱讀

• （一）ArcGIS API for JavaScript 本地部署(開發環境)

您的關注是莫大鼓勵