vue scss 使用 script 中的變量_Vue中使用ArcGIS JS API 4.14開發

一、概述

在之前很長的一段時間中，使用ArcGIS JS API(以下簡稱“JS API”)開發WebGIS系統的時候，還是基于傳統的前端架構和各種前端技術來開發，這些架構和技術各位使用過的大概有這些：Dojo、jQuery、Bootstrap、CommonJS等。用這些傳統的技術架構結合JS API去開發的時候，我們引入JS API是在系統的HTML頁面中通過

目前，随着前端技術的不斷發展，React和Vue等前端開發技術已經成為了一名前端開發者的标配，作為GISer的我們也毫無例外，在開發許許多多的WebGIS項目系統時，我們都會去選擇目前主流的這些開發技術，其中使用最多的就是React和Vue這兩種。是以本文就主要介紹下我們如何使用Vue結合JS API去開發我們的項目系統。

二、開始前的技術基礎

• 有一定的Vue基礎知識，熟悉ES6(能看懂一個Vue檔案中HTML标簽、CSS代碼、JS代碼之前的聯系就行)
• 計算機安裝了NodeJS,聽說過npm這個東西

三、操作步驟

1、環境準備

在開始今天的介紹之前，我們要準備下開發環境，本文對開發環境有兩個要求：NodeJS環境和Vue環境。如果各位沒有這兩個環境的話，請看下文進行安裝；如果機子上有這兩個環境，請跳過此節，從第二節開始閱讀。

1.1、NodeJS環境安裝

1.1.1、進入到NodeJS官網(https://nodejs.org/en/)下載下傳最新版的NodeJS，此處推薦下載下傳LTS版本，這是穩定的并且官方長期支援更新的一個版本，如圖：

1.1.2、下載下傳完安裝包之後，輕按兩下安裝包，彈出安裝界面，選擇相應的安裝目錄後，我們一路點選【Next】按鈕即可，中間過程并沒有特别需要注意的地方。

1.1.3、安裝完成後，我們打開指令行視窗，通過以下指令檢視是否安裝成功，如果出現以下版本号資訊，則表示NodeJS環境安裝部署成功：

node -vnpm -v
           

在這裡可能有人會問NodeJS和npm的關系，其實NodeJS就是javaScripe的一個運作環境，它對谷歌V8引擎做了封裝，是一個伺服器端的JS解釋器。npm是NodeJS的一個包管理器。我們在開發時如果要用到什麼插件，需要先搜尋、下載下傳、安裝到NodeJS環境中，然後才可以使用這個插件來開發完成某個需求，這個過程是相當繁瑣的。有了npm包管理器，我們隻需要在項目根目錄下運作指令行，然後通過npm的安裝指令将需要的插件一鍵安裝到此項目或者NodeJS環境中，這是非常便捷的一件事情，而且很多大神将自己開發好的輪子上傳到了npm網站上面，是以我們需要哪個插件，直接npm安裝即可，不需要再去進行搜尋、下載下傳、安裝這麼麻煩的過程。

1.1.4、在此處我們安裝NodeJS環境，說白了也是為了安裝npm這個包管理器才進行的操作。

1.2、Vue環境搭建

Vue環境搭建其實就做兩件事情，安裝Vue和Vue腳手架工具。這兩個安裝都是通過npm來安裝的，詳細過程如下：

1.2.1、打開指令行工具，通過以下兩個指令來分别安裝Vue環境和Vue的腳手架工具，如下：

npm install vuenpm install -g @vue/cli
           

1.2.2、安裝完成後，通過以下指令進行測試，出現版本号資訊，則說明安裝成功：

 vue --version
           

到此處為止，我們的環境準備工作已經完成，接下來我們進入今天的正題，使用Vue結合JS API來開發。

2、初始化項目demo

2.1、在合适的目錄下建立檔案夾，然後在此檔案夾中打開指令行工具，通過以下指令來建立一個基礎的Vue項目demo，如下：

 vue create vuejsapi414demo
           

以上指令使用了Vue的腳手架工具來初始化一個項目demo，demo名稱為“vuejsapi414demo”，此名稱可以自己随意取名。輸入以上指令按回車之後，會出現項目初始化視窗，在此處需要我們選擇項目中使用的插件，此處選擇第一個預設的即可：

選擇之後按回車，會進行插件安裝和項目初始化工作，如下：

2.2、項目初始化結束後，我們使用指令行中提示的指令進入到項目根目錄，然後通過提示指令來啟動項目，并且在浏覽器中通過位址“localhost:8080”來檢視，如下：

cd .vuejsapi414demo npm run serve
           

2.3、此時，初始化項目操作已經完成。我們通過vue腳手架來建立了一個基礎的vue項目demo，接下來我們通過這個demo來介紹JS API如何跟Vue結合來開發使用。

3、ArcGIS JS API和Vue結合開發

以上過程已經完成了環境安裝部署和項目初始化工作，接下來就要進行JS API的開發介紹了。

3.1、在Vue項目中使用JS API時已經不像傳統的開發方式那樣在index.html中引入JS和CSS檔案來使用JS API，而是通過一個叫“esri-loader”的中間件，将我們的JS API和Vue項目做一個無縫銜接。

3.2、在指令行中通過Ctrl+C來停止項目的運作，然後通過以下指令來安裝esri-loader，如下：

 npm install esri-loader --save-dev
           

3.3、安裝結束後，通過指令“npm run serve”重新啟動項目，然後用編輯器打開我們初始化的這個項目代碼，此處使用的是VS Code編輯器，各位可以使用Hbuilder、SublimeText3、webStrom等編輯器，不做強制要求，如下：

3.4、然後打開項目根目錄下的package.json檔案，在這個檔案中我們可以看到剛才安裝的esri-loader插件，此時使用的是V2.13.0版本，如下所示：

3.5、接下來我們就在項目根目錄下的src檔案夾中，通過修改App.vue這個檔案夾來介紹如何在Vue中使用JS API開發。如下，我們先删除App.vue這個檔案中多餘的HTML标簽和一些JS代碼，最後這個檔案代碼如下所示：

3.6、在此處我們就不建立标簽了，直接在id為“app”的這個div中來執行個體化一個地圖。接下來我們修改下body标簽和id為“app”這個div的标簽樣式。代碼如下：

body {    margin: 0;   /**主要是去除谷歌浏覽器預設的8像素的外邊距 */}#app {    position: absolute;   /**使這個div的大小撐滿整個螢幕 */    width: 100%;    height: 100%;}
           

3.7、然後加載引入我們安裝的esri-loader插件，如下：

 import {loadModules} from 'esri-loader';
           

3.8、引入esri-loader之後，接下來就讓我們的項目系統和JS API做一個銜接。在這裡大家一定要了解一個概念：我們在Vue中使用JS API時，調的接口這些還是我們傳統開發調的那些接口API，esri-loader在這裡僅僅是充當一個橋梁的作用，是以大家不要誤認為esri-loader也是一個開發包哈。也就是說，你最終使用的JS API開發包還是我們本地部署或者JS API官網的開發包，并不是esri-loader裡面的開發包。

做銜接之前，我們先建立一個mounted生命周期函數，然後在這個函數裡調用建立地圖的函數，代碼如下：

import {loadModules} from 'esri-loader';export default {  name: 'app',  methods: {      //建立地圖      _createMapView: function() {            const _self = this;   //定義一個_self防止後續操作中this丢失            const option = {      //定義一個包含有JS API中js開發包和css樣式檔案的對象                url: 'http://localhost/4.14/init.js',                css: 'http://localhost/4.14/esri/themes/light/main.css',            };            //通過loadModules來做銜接            loadModules([], option)                .then(([]) => {                                        //業務代碼在此處編寫                                    }).catch((err) => {                    _self.$message('地圖建立失敗，' + err);                });      },  },  mounted: function() {      this._createMapView();  }}
           

通過以上的代碼，就将我們的項目系統代碼和JS API做了一個銜接，其實就是在我們Vue項目中引入了JS API。接下來進行JS API的開發。

3.9、本文主要是通過執行個體化一張地圖來介紹如何使用JS API開發。接下來的操作跟我們傳統的開發方式就變得類似了，先是加載相應的JS API子產品，然後在執行個體化各個子產品，如下所示：

//通過loadModules來做銜接            loadModules(['esri/Map',            'esri/views/MapView'], option)                .then(([Map, MapView]) => {                                        //業務代碼在此處編寫                    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) => {                    _self.$message('地圖建立失敗，' + err);                });
           

3.10、通過以上步驟，就執行個體化了一張二維地圖，最終的效果如下所示：

四、總結

本文沿着Vue基礎項目demo搭建到JS API的引入，并最終生成一張二維地圖的過程進行了詳細的介紹。本篇文章适合有一定Vue基礎和JS API開發基礎的人員檢視學習，在本文中我們使用的JS API是本地部署的JS API，大家也可以将API位址換成官網的，隻需要修改option這個對象的屬性值即可，類似于下面：

const option = {      //定義一個包含有JS API中js開發包和css樣式檔案的對象url: 'https://js.arcgis.com/4.14/init.js',css: 'https://js.arcgis.com/4.14/esri/themes/light/main.css',};
           

通過修改如上的代碼，就将JS API的引用位址換成了官網位址，隻不過在此處運作的時候需要注意下跨域的問題。如果遇到跨域問題，可以通過配置Vue的配置檔案來解決，具體操作不在本文範圍内，可自行百度解決。大家在Vue和JS API結合開發時如果遇到什麼問題，請聯系部落客解答。

附：

項目demo全部代碼：

https://gitee.com/XuQianWen/use_of_arcgis_js_api_in_vue

App.vue全部代碼：