作為一名剛?cè)腴T的小白,還沒開始一個helloworld就在軟件安裝,環(huán)境部署時遇到了一大堆問題,簡直太讓人頭禿了,腦殼疼。話不多說,這篇主要想分享一下自己部署ArcGIS API for js 4.15的過程。
網(wǎng)站鏈接:https://developers.arcgis.com/downloads/
有賬號的直接登錄,沒有賬號的需要注冊一下,只能注冊ArcGIS Online試用賬號,Esri開發(fā)者賬號中國區(qū)暫不支持注冊。
登錄進(jìn)去以后點(diǎn)擊Download APIs&SDKs
找到ArcGIS API for javascript4.15,上面顯示的就是最新的版本,點(diǎn)擊API進(jìn)行下載,其他的版本點(diǎn)擊All versions就可以查看。
將下載下來的壓縮包進(jìn)行解壓,解壓后的目錄如下:
關(guān)于IIS服務(wù)器的安裝部署很簡單,直接百度就行,此處不再贅述。
將上面的第一個文件夾arcgis_js_api拷貝到IIS服務(wù)器的根目錄下面。
下面我們要找到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文件替換的內(nèi)容與上面一樣,至此,初步配置基本完成,然后記得重新啟動一下服務(wù)器。
二話不說我們上代碼,下面給出兩個示例代碼,一個是線上資源的調(diào)用,一個是本地部署資源的調(diào)用,已經(jīng)實(shí)現(xiàn)線上ArcGIS API for js 4.15調(diào)用的小伙伴,可以跳過代碼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,//放大倍數(shù) center:[15,65] }); }); </script> </html>
<!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>
對比上面兩個代碼我們發(fā)現(xiàn)只是改動了link和script標(biāo)簽的引用,就是將引用位置改為自己本地部署的資源包的位置。
<!--線上資源的調(diào)用--> <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)復(fù)制到C:\inetpub\wwwroot目錄下,打開IIS服務(wù)器,點(diǎn)擊刷新,找到需要測試的頁面,右擊瀏覽,在Firefox或者chorme瀏覽器中打開(不要使用ie瀏覽器,因?yàn)樾掳姹镜暮芏喾椒╥e不支持)。