ArcGis API JS 4.X本地化部署與地圖的基礎使用

kiba518發表於2021-07-27

準備工作

首先下載ArcGIS API for JavaScript4.x,這裡下載的是4.19。

官方下載地址:https://developers.arcgis.com/downloads/

arcgis_js_v419_api:這個是ArcGIS的Api網站,部署後,我們可以引用這個網站裡的JS,然後實現地圖的使用。

arcgis_js_v419_sdk:這個是ArcGIS的Api的SDK網站,裡面詳細介紹各個JS類的使用方式的軟體開發幫助文件(因為官網經常打不開,所以部署這個API的SDK網站很有用)

arcgis_js_v419_api解壓後如下圖。

開始安裝

在arcgis_js_api檔案下找到Init.js和dojo.js兩個檔案。

然後,替換Init.js和dojo.js裡的[HOSTNAME_AND_PATH_TO_JSAPI]為localhost:419/arcgis_js_api/javascript/4.19/或192.168.1.100:419/arcgis_js_api/javascript/4.19/

PS1:區域網使用則替換為IP模式——192.168.1.100:419/arcgis_js_api/javascript/4.19/

PS2:這裡的使用的埠號是419,因為我之後建網站也使用419埠。

PS3:如果搜尋不到[HOSTNAME_AND_PATH_TO_JSAPI],就搜尋HOSTNAME_AND_PATH_TO_JSAPI,但替換時要記得把[]刪掉。

PS:注意,原始檔中的是協議是HTTPS,這裡我們改為http,不然的話,我們還得建一個帶證照的網站。

替換後地址如下:

baseUrl:"http://192.168.1.100:419/arcgis_js_api/javascript/4.19/dojo"

然後IIS新建網站,網站名稱arcgis_js_api,物理路徑選擇arcgis_js_v419_api,埠419。

然後順序執行下面三個網址

http://192.168.1.100:419/arcgis_js_api/javascript/4.19/init.js

http://192.168.1.100:419/arcgis_js_api/javascript/4.19/dojo/dojo.js

http://192.168.1.100:419/arcgis_js_api/javascript/4.19/esri/themes/light/main.css

如下圖,則網站啟動成功。

然後啟用網站的目錄瀏覽。

然後進行網站跨域配置,點選HTTP響應頭。

配置頭名稱及值

  • Access-Control-Allow-Origin 值:*

  • Access-Control-Allow-Methods 值:GET, POST, PUT, DELETE, OPTIONS

  • Access-Control-Allow-Headers 值:Content-Type

然後新增字型型別,因為本地API會下載一些字型檔案。

點選MIME型別。

新增如下型別:

.ttf application/octet-stream

.wasm application/wasm

.woff application/font-woff

.woff2 application/font-woff2

.wsv application/octet-stream

如下圖:

如果已經存在了MIME型別配置,則需要修改,如下圖.woff型別預設配置是font/x-woff,我們需要修改未application/font-woff 。

配置完成後,重啟IIS,重啟網站,清空瀏覽器快取,然後我們的本地JS就可用了。

地圖使用

想使用ArcGIS API for JavaScript4.x,我們得現有一個地圖服務才行,我們可以安裝一個Arcgis Server。參考:https://www.cnblogs.com/kiba/p/15061456.html

Arcgis Server安裝完成後,會提供一個預設的Map服務地址http://192.168.1.100:6080/arcgis/rest/services/SampleWorldCities/MapServer

然後,我們新建一個網站,然後新建一個網頁—MapLocal,然後編寫如下程式碼:

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebArcGis_JS4</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="http://192.168.1.100:419/arcgis_js_api/javascript/4.19/esri/themes/light/main.css"> 
    <script src="http://192.168.1.100:419/arcgis_js_api/javascript/4.19/init.js"></script>
    <script>
​
        require(["esri/config",
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/MapImageLayer",
            "esri/Basemap",
            "esri/layers/Layer"
        ], function (
            esriConfig,
            Map,
            MapView,
            MapImageLayer,
            Basemap,
            Layer) {
​
            var baseUrl = "http://192.168.1.100:6080/arcgis/rest/services/SampleWorldCities/MapServer";
            esriConfig.apiKey = "YOUR_API_KEY";
            let layer = new MapImageLayer({
                url: baseUrl
            });
​
            const map = new Map({
                container: "map-container",
                basemap: new Basemap({ baseLayers: [layer] }),
                logo: false,  //不顯示Esri的logo
​
            });
            const view = new MapView({
                map: map,
                center: [125.04658531829789, 41.978062677899004],
                zoom: 13, // Zoom level
                container: "viewDiv" // Div的Id
            });
            //監聽單擊事件
            view.on("click", function (event) {
​
                console.log(event);
                console.log("x:" + event.mapPoint.x);
                console.log("y:" + event.mapPoint.y);
                console.log("longitude:" + event.mapPoint.longitude);
                console.log("latitude:" + event.mapPoint.latitude);
            });
​
            //監聽比例尺編號
            var handle = view.watch("scale", function (newValue, oldValue, propertyName, target) {
                console.log(propertyName + " changed from " + oldValue + " to " + newValue);
            });
            //移除監聽
            //handle.remove();
​
        });
    </script>
</head>
<body>
    <div id="viewDiv"></div>
</body>
</html> 

執行如下圖:

 

----------------------------------------------------------------------------------------------------

到此,ArcGis API JS 4.X本地化部署與地圖的基礎使用,就講完成。

----------------------------------------------------------------------------------------------------

注:此文章為原創,任何形式的轉載都請聯絡作者獲得授權並註明出處!
若您覺得這篇文章還不錯,請點選下方的推薦】,非常感謝!

https://www.cnblogs.com/kiba/p/15064109.html

 

 

相關文章