arcgis api for js 超簡單離線部署 不需要IIS或Tomcat服務器

還在爲arcgis api for js離線部署煩惱嗎?來吧,看這邊文章就對啦。

一、離線部署好處

首先我們說一下爲什麼明明可以在線調用arcgis api 爲什麼要離線部署呢。

1.離線部署可以在沒有網絡的時候使用(但是你要加載在線地圖服務的話就必須要連接網絡啦)。

2.離線部署相比在線調用速度更快,因爲只需從本地加載不需要經過網絡。

二、本文方法和部署到服務器方法對比

1.說起arcgis api for js 的離線部署,一般都會將api文件部署到IIS或者Tomcat服務器上,這樣做的最大好處是你的網頁文件可以存放在任何位置,不需要和api接口文件放在一起,但是壞處就是需要先安裝服務器,還需要一些配置,對於新手來說不太友好,且過程較爲繁瑣。如果你想看部署到服務器的過程的話請進去看吧,嘻嘻,我師兄的文章(https://blog.csdn.net/yy284872497/article/details/78878435

2.本文方法的一個小壞處就是需要將api文件和你的網頁文件放在一個目錄下(其實這個沒什麼影響啦),最大的好處就是簡單、簡單、簡單!簡單啊朋友們,心動嘛?好的嘛 ,開始啦!

三、api文件下載

1.首先先到百度搜索 arcgis api for js,進入官網。

2.找到Get the api按鈕,如圖所示:

3.找到下載頁面,選擇你想要的版本進行下載,如圖所示:(注意下載的時候需要有arcgis的賬號,按照提示註冊即可)

四、離線配置

1、首先將你現在的文件解壓,然後進去找到以你的api版本號命名的文件夾,我的版本是4.1.0,所以我打開4.1.0這個文件夾,文件夾裏面的內容如下:

2.將4.1.0這個文件夾拷貝出來(也可以不拷貝出來,就在原位置操作),隨便放在一個位置,然後把文件夾名字改成你想要的名字(不改也可以),這裏我將文件夾名字改成“whe”。

3.打開whe文件夾,找到並打開init.js文件和dojo文件夾下的dojo.js文件,crtl+f搜索找到[HOSTNAME_AND_PATH_TO_JSAPI]這串文字然後將包含這串文字的引號裏面裏的內容用"你修改的文件夾名字/dojo"替換,這裏我用"whe/dojo"替換,好啦,大功告成了,讓我們來測試一下吧!

五、Test

1.首先在whe文件夾的同一目錄中新建一個名爲test的txt文件,然後打開api官網,在Sample code選項卡中點擊Intro to SceneView,然後將裏面的代碼複製到你的txt文件中,然後把下圖一的內容用下圖二中的內容代替,注意裏面的whe內容用你修改的文件夾的名字代替哦。然後就可以運行試一試啦。

2.這是我的代碼:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Intro to SceneView - Create a 3D map</title>
<style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
</style>
<link rel="stylesheet" href="whe/esri/css/main.css">
<script src="whe/init.js"></script>
<script>
require([
  "esri/Map",
  "esri/views/SceneView"
], function(Map, SceneView){
  var map = new Map({
    basemap: "streets",
    ground: "world-elevation"
  });
  var view = new SceneView({
    container: "viewDiv",     // Reference to the scene div created in step 5
    map: map,                 // Reference to the map object created before the scene
    scale: 50000000,          // Sets the initial scale to 1:50,000,000
    center: [-101.17, 21.78]  // Sets the center point of view with lon/lat
  });
});
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

3.效果圖

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章