1. 程式人生 > WINDOWS開發 >vue + ArcGIS 地圖應用系列一:arcgis api本地部署(開發環境)

vue + ArcGIS 地圖應用系列一:arcgis api本地部署(開發環境)

技術分享圖片
封面

1. 下載 ArcGIS API for JavaScript

官網地址: https://developers.arcgis.com/javascript/3/

下載地址:http://links.esri.com/javascript-api/latest-download

需要穩定的網路環境註冊賬號後才可以下載,也可以關注微信公眾號 RainCode 後臺回覆 arcgisapi 獲取。

下載完成後解壓檔案,檔案比較大可能需要很長時間進行解壓。

解壓後文件層級很多。

建議大家使用,arcgis_js_v332_api\arcgis_js_v332_api\arcgis_js_api\library\3.32

資料夾下3.32compact 壓縮過的程式碼(程式碼是不開源的,直接用壓縮的就完事了)。

2. 新建靜態檔案伺服器

我自己使用 Express 自己寫的一個靜態檔案伺服器(因為要配置跨域,所以習慣了),大家也可以使用 IIS 、Tomcat 等伺服器進行搭建。(Express靜態檔案伺服器放在了 https://github.com/LuckRain7/arcgis-api-for-javascript-vue 倉庫中的 static-server 檔案中,大家可以去 clone 使用。)

3.32compact 資料夾拷貝到 靜態資料夾 public 下,修改一個自己喜歡的名字,我這裡修改為 arcgis-3.32

自建靜態檔案伺服器地址為 http://localhost:3000/

2. 修改 [HOSTNAME_AND_PATH_TO_JSAPI] 路徑

1、找到以下兩個檔案

static-server\public\arcgis-3.32\init.js

static-server\public\arcgis-3.32\dojo\dojo.js

2、用編輯器開啟,搜尋 [HOSTNAME_AND_PATH_TO_JSAPI]

3、將兩個檔案中的 baseUrl 內容都改為 http://localhost:3000/arcgis-3.32/dojo

技術分享圖片
baseUrl

3. 測試

複製一下程式碼到 HTML 檔案中,將其中 link

script 標籤地址修改為定義的地址,開啟檔案進行測試,出現地圖則表示本地部署成功。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>test arcgis </title>
    <style>
        body,html {
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }

        #test {
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="http://localhost:3000/arcgis-3.32/esri/css/esri.css">
    <script src="http://localhost:3000/arcgis-3.32/init.js"></script>
</head>

<body>
    <div id="test">

    </div>

    <script>
        require(["esri/map"],function (Map) {
            var map = new Map("test",{
                center: [-118,34.5],zoom: 8,basemap: "topo"
            });
        });
    </script>
</body>

</html>

推薦閱讀

您的關注是莫大的鼓勵

技術分享圖片

本文使用 mdnice