在IIS服務器上本地部署 ArcGIS API for js 4.15-有解無憂

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

一、ArcGIS API for js 4.15下載

網站鏈接：https://developers.arcgis.com/downloads/
有賬號的直接登錄，沒有賬號的需要注冊一下,只能注冊ArcGIS Online試用賬號，Esri開發者賬號中國區暫不支持注冊，
登錄進去以后點擊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，

init1

init2

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

三、測驗

二話不說我們上代碼，下面給出兩個示例代碼，一個是線上資源的呼叫，一個是本地部署資源的呼叫，已經實作線上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.arcgis.com/4.15/esri/css/main.css">
<script src="https://js.arcgis.com/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,//放大倍數
        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,//放大倍數
        center:[15,65]
    });
});
</script>
</html>

代碼2--呼叫本地部署資源

對比上面兩個代碼我們發現只是改動了link和script標簽的參考，就是將參考位置改為自己本地部署的資源包的位置，

<!--線上資源的呼叫-->
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css">
<script src="https://js.arcgis.com/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>

把需要的測驗的html頁面（代碼2）復制到C:\inetpub\wwwroot目錄下，打開IIS服務器，點擊重繪，找到需要測驗的頁面，右擊瀏覽，在Firefox或者chorme瀏覽器中打開（不要使用ie瀏覽器，因為新版本的很多方法ie不支持），

顯示如下結果，部署成功

如果你一步就成功了，那么恭喜你，撒花花，如果你和我一樣妥妥的遵循了小白定律（總是能夠遇到別人遇不到的錯誤），頭禿，深呼一口氣，莫慌，下篇博文里面我會跟大家分享一下自己在部署程序中遇到的錯誤（小白的錯誤問題集錦，哈哈哈，專踩別人找不到的坑）

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/100522.html

標籤：JavaScript

上一篇：23.JavaScript原型和原型鏈

下一篇：jQuery-事件委托