WebGIS——部署ArcGIS API for JavaScript 4.11

部署ArcGIS API for JavaScript 4.11

本文介紹如何將ArcGIS API for JavaScript 4.11下載並部署到本機IIS上,系統WIN10 64位
參考文章:http://www.cnblogs.com/jerry-liuyu/p/10283714.html

一、下載並開啓ISS服務

官網鏈接:https://developers.arcgis.com/

  1. 右上角sign in登錄並進入下載(須註冊賬號或直接使用谷歌賬號登錄)

  2. 下載到本地即可:不想下的這裏提供網盤鏈接:https://pan.baidu.com/s/1VJb3cO2TBYOm2G1dRZhzlQ
    提取碼:ry1b
    複製這段內容後打開百度網盤手機App,操作更方便哦

在這裏插入圖片描述

  1. 解壓到某文件夾

  2. 開啓IIS服務,勾選即可

在這裏插入圖片描述

二、配置

IIS服務啓動後,C盤會出現一個名爲inetpub的文件夾——進入C:\inetpub\wwwroot

  1. 將解壓後arcgis_js_api下的library和sdkarcgis_js_v411_sdk\arcgis_js_api下的sdk,這兩個文件夾複製到C:\inetpub\wwwroot中去,如下圖

1556716112630

  1. 分別打開這兩個js文件:①C:\inetpub\wwwroot\arcgis_js_api\library\4.11\init.jsC:\inetpub\wwwroot\arcgis_js_api\library\4.11\dojo\dojo.js

  2. 找到以下內容(Ctrl+F查找)並替換:[HOSTNAME_AND_PATH_TO_JSAPI],並替換爲http://localhost/arcgis_js_api/library/4.11/dojo,如下:

  3. 測試以下是否可以順利打開,打開瀏覽器輸入:<http://localhost/arcgis_js_api/library/4.11/init.js>顯示如下頁面則說明正確:

在這裏插入圖片描述

三、測試運行

在這裏插入圖片描述

新建html文件運行粘貼以下代碼:瀏覽器打開運行,若出現上圖,說明已ok,(不顯示可以關閉瀏覽器重新打開試試,前述步驟沒出錯就應該沒問題),有問題一起交流。

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

​```
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/4.11/esri/css/main.css">
<script src="http://localhost/arcgis_js_api/library/4.11/dojo/dojo.js"></script>
​```

​```
<script>
    require([
        "esri/Map",
        "esri/views/MapView"
    ], function (Map, MapView) {

        var map = new Map({
            basemap: "streets"
        });

        var view = new MapView({
            container: "viewDiv",
            map: map,
            zoom: 4,
            center: [15, 65] // longitude, latitude
        });

    });
</script>
​```

</head>

<body>
    <div id="viewDiv"></div>
</body>
</html>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章