在IIS服務器上本地部署 ArcGIS API for js 4.15

小世界的野孩子 2021-10-27

展開全文

作為一名剛入門的小白，還沒開始一個helloworld就在軟件安裝，環(huán)境部署時遇到了一大堆問題，簡直太讓人頭禿了，腦殼疼。話不多說，這篇主要想分享一下自己部署ArcGIS API for js 4.15的過程。

一、ArcGIS API for js 4.15下載

網(wǎng)站鏈接：https://developers./downloads/
有賬號的直接登錄，沒有賬號的需要注冊一下,只能注冊ArcGIS Online試用賬號，Esri開發(fā)者賬號中國區(qū)暫不支持注冊。
登錄進去以后點擊Download APIs&SDKs

找到ArcGIS API for javascript4.15，上面顯示的就是最新的版本，點擊API進行下載，其他的版本點擊All versions就可以查看。

二、在IIS上進行部署

將下載下來的壓縮包進行解壓，解壓后的目錄如下：
關于IIS服務器的安裝部署很簡單，直接百度就行，此處不再贅述。
將上面的第一個文件夾arcgis_js_api拷貝到IIS服務器的根目錄下面。

下面我們要找到init.js，dojo.js兩個文件修改baseUrl。

(1)init.js:C:\inetpub\wwwroot\arcgis_js_api\library\4.15

(2)dojo.js:C:\inetpub\wwwroot\arcgis_js_api\library\4.15\dojo

打開init.js（這里用的是notepad++打開的）, 查找HOSTNAME_AND_PATH_TO_JSAPI，將baseUrl的地址替換為：http://localhost/arcgis_js_api/library/4.15/dojo。

dojo.js文件替換的內容與上面一樣，至此，初步配置基本完成，然后記得重新啟動一下服務器。

三、測試

二話不說我們上代碼，下面給出兩個示例代碼，一個是線上資源的調用，一個是本地部署資源的調用，已經(jīng)實現(xiàn)線上ArcGIS API for js 4.15調用的小伙伴，可以跳過代碼1，直接看代碼2。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>create a 2D map</title>
</head>
<style>
    html,body,#viewDiv{
        padding: 0; margin: 0;
        height: 100%; width: 100%;
    }
</style>

<link rel="stylesheet" href="https://js./4.15/esri/css/main.css">
<script src="https://js./4.15/"></script>
<body>
<div id="viewDiv"></div>
</body>
<script>
 require([
     "esri/Map",
     "esri/views/MapView",
     "dojo/domReady!"], function (Map,MapView) {
     //視圖分離
    var map=new Map({
        basemap: "streets"
    });

    var view=new MapView({
        container: "viewDiv",
        map: map,
        zoom:4,//放大倍數(shù)
        center:[15,65]
    });


});
</script>
</html>

代碼1--線上資源調用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>create a 2D map</title>
</head>
<style>
    html,body,#viewDiv{
        padding: 0; margin: 0;
        height: 100%; width: 100%;
    }
</style>
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/4.15/esri/css/main.css">
<script src="http://localhost/arcgis_js_api/library/4.15/init.js"></script>
<body>
<div id="viewDiv"></div>
</body>
<script>
 require([
     "esri/Map",
     "esri/views/MapView",
     "dojo/domReady!"], function (Map,MapView) {
     //視圖分離
    var map=new Map({
        basemap: "streets"
    });

    var view=new MapView({
        container: "viewDiv",
        map: map,
        zoom:4,//放大倍數(shù)
        center:[15,65]
    });
});
</script>
</html>

代碼2--調用本地部署資源

對比上面兩個代碼我們發(fā)現(xiàn)只是改動了link和script標簽的引用，就是將引用位置改為自己本地部署的資源包的位置。

<!--線上資源的調用-->
<link rel="stylesheet" href="https://js./4.15/esri/css/main.css">
<script src="https://js./4.15/"></script>


<!--更改為自己本地部署的資源包的位置-->
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/4.15/esri/css/main.css">
<script src="http://localhost/arcgis_js_api/library/4.15/init.js"></script>