2. 程式人生 > >（十九）ArcGIS API For Javascript之專案真實部署

（十九）ArcGIS API For Javascript之專案真實部署

阿新 • • 發佈：2019-01-15

1.引言(友情提示：新手勿看)

      在先前的部落格當中我們已經說了，ArcGIS API在本地如何部署，但是在先前的本地部署過程中存在什麼問題呢？現在我們來看一下先前的部署當中哪一些不合適的地方。

  • 先前我們的js檔案引入方式為:
<script src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script>
這種引入的方式的缺點有：
1.直觀來看，js的路徑太長
2.js引入方式為絕對路徑，我們希望是js引入的路徑為相對路徑，例如：
    <script src="js/esriapi/init.js"></script>
3.我們更希望將我們的jsapi複製到我們的專案中來。

2.進一步理解ArcGIS API的配置

      為了解決我們上述的問題，首先我們回顧一下我們最初配置的步驟：

  • 修改了init.js檔案
  • 修改了dojo.js檔案

      修改這兩個檔案肯定是修改了ArcGIS API的配置，但是具體起到了什麼作用呢？在dojo框架中提供給我們一個類(dojo/_base/config)可以檢視該框架的配置情況，接下來我們就用config檢視一下，修改這兩個檔案到底修改了什麼配置？

2.1程式碼實現

<!DOCTYPE html>
<html>
<head>
    <meta charset
 
="utf-8">
    <title>dojo配置</title>
    <link href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/claro/claro.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
<script src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"
 
></script>
<script>
require(["dijit/registry", "dojo/parser", "dojo/json", "dojo/_base/config", "dijit/Dialog", "dojo/domReady!"]
, function(registry, parser, JSON, config) {
    parser.parse();
    var dialog = registry.byId("dialog");
    dialog.set("content", "<pre>" + JSON.stringify(config, null, "\t") + "```");
    dialog.show();
});
</script>
</head>
<body class="claro">
   <div id="dialog" data-dojo-type="dijit/Dialog" data-dojo-props="title: 'dojoConfig / dojo/_base/config'"></div>
</body>
</html>
  • 程式碼的意思是：用對話方塊顯示dojo的配置資訊。

2.2執行結果及分析

這裡寫圖片描述

  • 可以發現我們修改的兩個js檔案，其實就是在修改baseUrl的值
  • 我們可以人為的修改baseUrl來達到我們想要的效果

3.配置ArcGIS API（實戰篇）

首先我們專案的路徑如下：

js/
    esriapi/
            dgrid
            dgrid1
            dijit
            dojo
            dojox
            dstore
            esri
            moment
            put-selector
            xstyle
            build-report.txt
            builddate.txt
            buildsources.txt
            init.js
index.html

如圖所示：

這裡寫圖片描述

  • 注意兩點
  • dojo資料夾（注意是dojo資料夾）相對於index.html的相對路徑為：js/esriapi/dojo，
  • 修改的baseUrl的值要和相對路徑一致

3.1方法一：修改init.js和dojo.js的baseUrl

  • 修改init的baseUrl為上面相對路徑：我們的為js/esriapi/dojo，找到HOSTNAME_AND_PATH_TO_JSAPI那一行

這裡寫圖片描述

將選中的部位替換為js/esriapi/dojo

這裡寫圖片描述

  • 修改dojo的baseUrl為上面相對路徑：我們的為js/esriapi/dojo，找到HOSTNAME_AND_PATH_TO_JSAPI那一行

這裡寫圖片描述

將選中的部位替換為js/esriapi/dojo

這裡寫圖片描述

  • 配置成功，我們網頁的程式碼為：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>dojo配置</title>
    <link rel="stylesheet" type="text/css" href="js/esriapi/dijit/themes/claro/claro.css"/>
    <link rel="stylesheet" type="text/css" href="js/esriapi/esri/css/esri.css" />
    <script type="text/javascript" src="js/esriapi/init.js"></script>
    <script>
        require(["esri/map","dojo/domReady!"],function(Map){
            var myMap = new Map("mapDiv",{
                basemap:"topo"
            });
        })
    </script>
</head>
<body class="claro">
<div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
</body>
</html>

3.2方法二：通過dojoConfig修改baseUrl

有的同學認為第一種方法還是太麻煩了，修改兩個檔案呢，太繁瑣了，如果覺得方法一比較麻煩，可以直接通過設定dojoConfig達到我們的效果。（不需要修改檔案）

  • 直接修改dojoConfig的baseUrl
dojoConfig={
            baseUrl:"js/esriapi/dojo",
        }
  • 修改為程式碼為：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>dojo配置</title>
    <link rel="stylesheet" type="text/css" href="js/esriapi/dijit/themes/claro/claro.css"/>
    <link rel="stylesheet" type="text/css" href="js/esriapi/esri/css/esri.css" />
    <script>
        dojoConfig={
            baseUrl:"js/esriapi/dojo",
        }
    </script>
    <script type="text/javascript" src="js/esriapi/init.js"></script>
    <script>
        require(["esri/map","dojo/domReady!"],function(Map){
                var myMap = new Map("mapDiv",{
                        "basemap":"topo"                
                });
        })
    </script>

</head>
<body class="claro">
    <div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
</body>

</html>

3.3 執行網頁結果（注意）

這裡寫圖片描述

  • 注意這是通過web伺服器訪問的成功

這裡寫圖片描述

  • 通過本地檔案訪問：失敗,但是這個錯誤可以忽略，因為在實際專案中，網頁都是通過http請求資料。（即通過web伺服器請求資料）

4.引入自定義的模組

假設我們的檔案目錄為：

js/
    esriapi/
    myjs/
      mymoudle.js
  • 通過dojoConfig的packages屬性配置自定義模組
var dojoConfig = {       
            packages: [{
                name: "js",
                location: location.pathname.replace(/\/[^/]*$/, '') + '/js'
            }]
        };
  • 如何利用require引入我們自己的木塊
 require([
            'js/myjs/mymoudle'
        ], function (myModule) {
            //此處寫模組的具體使用
        });
注意：
    js是我們在dojoConfig中packages的其中的一個name屬性
    js/myjs/mymoudle：js，myjs代表資料夾；mymoudle代表mymoudle.js檔案，myModule代表mymoudle.js的引用。

相關推薦

（十九）ArcGIS API For Javascript之專案真實部署

1.引言(友情提示：新手勿看)       在先前的部落格當中我們已經說了，ArcGIS API在本地如何部署，但是在先前的本地部署過程中存在什麼問題呢？現在我們來看一下先前的部署當中哪一些不合適的地方。 先前我們的js檔案引入方式為:

（十三）ArcGIS API For Javascript之網路分析

require(["esri/map", "dojo/on", "dojo/dom", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/tas

（三）ArcGIS API For Javascript之呼叫動態地圖服務

1.引言       在本篇部落格中主要記錄一下在ArcGIS API如何呼叫自己釋出的動態地圖服務,利用動態地圖服務我們可以完成哪一些需求等等。 注：（如何利用ArcGIS Server釋出動態地圖服務請看部落格ArcGIS Server釋出動

（六）ArcGIS API For Javascript之查詢功能

1.引言 在ArcGIS API中查詢功能是非常常用的，Esri給我們提供了三個類用於實現向量資料查詢功能。FindTask,QueryTask,IdentifyTask，他們之間的區別為： FindTask只能進行屬性查詢，QueryTask,

【十】ArcGIS API for Javascript之專題圖的製作（四）熱力圖渲染（上）

一 、熱力圖定義 熱力圖（heat map）也稱熱圖，是以特殊顏色高亮區域的形式表示密度、溫度、氣壓、頻率等分佈的不易理解和表達的資料。 二、HeatmapRenderer esri/renderers/HeatmapRenderer類用來快速繪製熱力圖，將要

ArcGIS API for JavaScript 3.26本地部署（不使用iis）

首先大家可以將3.26下載到本地，隨便找一個資料夾進行存放。 1、以下是我的存放目錄：   me.html則是我寫程式碼的地方。 2、接下來看我在wbstrom中的工作引用資料夾 這裡我引用的是sublime資料夾，所以相對應我開啟me.html的時候，網站

【十】ArcGIS API for Javascript之Mix Echarts熱力圖

一、引言 Echarts對於WebGIS開發人員來說並不陌生，特別是隨著版本的更新，與地圖相結合的資料視覺化方式使得專題圖製作更加直觀明瞭。近期專案需求，需要動態地根據業務資料生成熱力圖。解決方案即：A

（十九）ArcGIS JS 加載WMS服務（超圖示例）

reference title dom content add local type super 版本號 前言 在工作中，需要在ArcGIS API for JavaScript中加載超圖服務，因為超圖的rest服務只可以用於Leaflet 、openlayers

深度學習論文翻譯解析（十九）：Searching for MobileNetV3

論文標題：Searching for MobileNetV3 論文作者：Andrew Howard, Mark Sandler, Grace Chu, Liang-Chieh Chen, Bo Chen, Mingxing Tan, Weijun W

ArcGIS API For Javascript之顏色分類實現

   在博文（http://blog.csdn.net/lovecarpenter/article/details/52672046）的基礎上，利用該文章中的客戶端渲染唯一值實現了功能。但是做了修改，我渲染的是SimpleLineSymbol。在API3.8的版本中set

ArcGIS API For Javascript之呼叫動態地圖服務+屬性、空間查詢

1.引言       在本篇部落格中主要記錄一下在ArcGIS API如何呼叫自己釋出的動態地圖服務,利用動態地圖服務我們可以完成哪一些需求等等。 注：（如何利用ArcGIS Server釋出動態地圖服務請看部落格ArcGIS Server釋出動態地圖服務）， 2.呼叫動態地

ArcGIS API for JavaScript之text轉換成CAD(.dwg)檔案

最近根據使用者的需求寫了這個功能。 需求：先在web端編輯文字標註，然後轉換成CAD檔案。  使用者想將註記釋出成要素服務，然後再轉換成CAD(.dwg)檔案使用。但是註記是不支援釋出成要素服務的，下面是我想到的實現思路（如有其它方案，歡迎補充！）： 定

Golang從入門到精通（十九）：Golang併發程式設計之Channel

Go語言併發模型 Go 語言中使用了CSP模型來進行執行緒通訊，準確說，是輕量級執行緒goroutine之間的通訊。CSP模型和Actor模型類似，也是由獨立的，併發執行的實體所構成，實體之間也是通過傳送訊息進行通訊的。 Actor模型和CSP模型區別 A

ArcGIS API For Javascript之GraphicsLayer和Graphic

1、map物件中預設有一個GraphicLayer，置於最頂層，使用它的方式是map.graphics. 比如map.graphics.add(graphci); 2、可以給GraphicLayer新增事件，比如點選事件， dojo.connect(map.

ArcGIS API For Javascript之多圖層顯示與隱藏，圖層要素選框查詢

5、多圖層的載入與隱藏 利用Html+Javascript前端程式設計實現上傳到服務端的地圖服務中的多圖層的載入與隱藏。本實驗中除了底圖之外，添加了共10個圖層，分別為 賓館酒店_point (0) 餐飲_point (1) 超市商城_point (2) 地級市_font

ArcGIS API For JavaScript官方文件（二十）之圖形和要素圖層——①Graphics概述

Working with graphics    ArcGIS JavaScript API允許在地圖上繪製graphic(圖形)。graphic可以由使用者作為標記或輸入繪製，也可以由應用程式根據任務繪製。例如，應用程式可能會將查詢結果作為graphics新增到地圖。   

ArcGIS API for JavaScript學習（1）：第一個地圖

樣式表 參數 資源 charset 底層 arcgis 順序 api navi 1.簡介 ArcGIS API for JavaScript跟隨ArcGIS 9.3同時發布，是ESRI根據JavaScript技術實現的調用ArcGIS Server REST API接口的一

ArcGIS API For JavaScript（六）InfoWindow

ArcGIS API For JavaScript（六）InfoWindow <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"&n

ArcGIS API For JavaScript（五）呼叫GP服務--簡單網路路徑分析

ArcGIS API For JavaScript（五）呼叫GP服務--簡單網路路徑分析 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

ArcGIS API For JavaScript（四）呼叫GP服務--簡單緩衝區分析

ArcGIS API For JavaScript（四）呼叫GP服務--簡單緩衝區分析   <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g