天天看點

ArcGIS API for Javascript 4.12離線部署ArcGIS API for Javascript 4.x離線部署

ArcGIS API for Javascript 4.x離線部署

本篇以ArcGIS API for Javascript 4.12版本之IIS 部署作為測試用例,離線部署到本地的操作如下:

一、 部署方法

1、 在esri官網下載下傳api及sdk包,解壓拷貝到C:\inetpub\wwwroot目錄下。

ArcGIS API for Javascript 4.12離線部署ArcGIS API for Javascript 4.x離線部署

2、分别修改C:\inetpub\wwwroot\arcgis_js_api\library\4.12\init.js檔案、C:\inetpub\wwwroot\arcgis_js_api\library\4.12\dojo\dojo.js檔案,查找[HOSTNAME_AND_PATH_TO_JSAPI]并替換成 api 在本機上的部署路徑,本例為:https://wl.arcgisonline.cn/arcgis_js_api/library/4.12/dojo (這裡我用的是計算機全域名也可以是localhost)

此時可以通路init.js 測試是否部署成功:

ArcGIS API for Javascript 4.12離線部署ArcGIS API for Javascript 4.x離線部署

sdk幫助文檔隻需要拷貝到目錄下,通路index.html即可成功調用:

ArcGIS API for Javascript 4.12離線部署ArcGIS API for Javascript 4.x離線部署

二、測試

編寫第一個one map頁面進行測試:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>Create a 2D map</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="https://WL.arcgisonline.cn/arcgis_js_api/library/4.12/esri/css/main.css" target="_blank" rel="external nofollow" >
    <script src="https://WL.arcgisonline.cn/arcgis_js_api/library/4.12/init.js"></script>
    <script>
        require([//引入對應子產品
            "esri/Map",
            "esri/views/MapView",
            "esri/layers/MapImageLayer",
            "dojo/domReady!"//dom所有都加載完才執行function中代碼
        ], function(Map, MapView,MapImageLayer) {
            var map = new Map({
                basemap: "streets"
            });

            var view = new MapView({
                container: "viewDiv",  // map div id
                map: map,              // 綁定map對象
                zoom: 4,  // 初始化縮放級别
                center: [15, 65]  // 初始化中心點
            });
            // var layer=new MapImageLayer({
            //url:"https://wl.arcgisonline.cn:6443/arcgis/rest/services/test/test1/MapServer" 
            //});
            // map.add(layer);
        });
    </script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
           

運作後第一張地圖被調用出來了,當然也可以使用自己釋出的地圖服務,但是此時會發現縮放按鈕不能正常顯示以及類似has been blocked by CORS policy:No ‘Access-Control-Allow-Origin’ header is present on the requested resource的錯誤,

ArcGIS API for Javascript 4.12離線部署ArcGIS API for Javascript 4.x離線部署

具體解決辦法:

1、打開任務管理器 ,在IIS中MIME類型,檢視是否具備以下幾種類型,沒有則需要添加

ArcGIS API for Javascript 4.12離線部署ArcGIS API for Javascript 4.x離線部署
ArcGIS API for Javascript 4.12離線部署ArcGIS API for Javascript 4.x離線部署
ArcGIS API for Javascript 4.12離線部署ArcGIS API for Javascript 4.x離線部署

2、在IIS中找到“HTTP響應标頭”,添加以下内容:

Access-Control-Allow-Credentials:true

Access-Control-Allow-Headers:origin,x-requested-with,content-type

Access-Control-Allow-Methods:POST,GET,OPTIONS

Access-Control-Allow-Origin:*

見下圖:

ArcGIS API for Javascript 4.12離線部署ArcGIS API for Javascript 4.x離線部署

3、完成之後,清除浏覽器的緩存,重新整理再次通路即可成功!

ArcGIS API for Javascript 4.12離線部署ArcGIS API for Javascript 4.x離線部署

繼續閱讀