ArcGIS API for JavaScript開發環境搭建與發佈以及基本功能實現

一、背景介紹javascript

ArcGIS API for JavaScript 咱這就不介紹了,具體可看ESRI中國的介紹:http://support.esrichina.com.cn/2011/0223/960.htmlcss

之前在ESRI中國還能下載到 ArcGIS API for JavaScript 各版本的Library和SDK,不過最近是一直下載不了,可能官方更推薦引用在線的樣式與腳本庫吧;html

我比較過在線引用本地部署兩種不一樣方式,在線引用的話,加載速度畢竟仍是沒有本地部署快(並且感受還比較明顯),特別是第一次加載的時候,須要徹底下載。java

因此最後我採用的仍是本地部署的方式,我用的是 ArcGIS API for JavaScript 3.9的版本,咱們的項目需求都能知足,4.x的版本我沒有測試。api

 ArcGIS API for JavaScript 3.9  Library & SDK 下載地址:http://download.csdn.net/download/xiaosy1021/10215796服務器

 

二、開發環境搭建網絡

①將 arcgis_js_v39_api 與 arcgis_js_v39_sdk下載下來後,解壓dom

②確保本地已安裝了IIS,打開C:\Inetpub\wwwroot文件夾。ide

③將arcgis_js_v39_sdk文件夾直接拷貝到C:\Inetpub\wwwroot下,變成C:\Inetpub\wwwroot\arcgis_js_v39_sdk,以下圖所示(如下部分圖片引用自網絡):測試

④將arcgis_js_v39_api\arcgis_js_api目錄下的library文件夾拷貝到

C:\inetpub\wwwroot\arcgis_js_v39_sdk\arcgis_js_api下,變成

C:\inetpub\wwwroot\arcgis_js_v39_sdk\arcgis_js_api\library,以下圖所示:

⑤打開IIS,以下圖所示,瀏覽install.htm,以下圖所示,說明初步部署成功:

⑥找到C:\inetpub\wwwroot\arcgis_js_v39_sdk\arcgis_js_api\library\3.9\3.9\init.js文件,利用記事本或EditPlus打開;Ctrl+F組合鍵查找[HOSTNAME_AND_PATH_TO_JSAPI],並替換爲<myserver>/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/,其中<myserver>爲機器名稱或者機器IP,注意沒有http前綴。能夠是localhost或者192.168.11.195,這裏我使用的是localhost,以下圖所示:

⑦ 找到C:\inetpub\wwwroot\arcgis_js_v39_sdk\arcgis_js_api\library\3.9\3.9\js\dojo\dojo\dojo.js文件,利用記事本或者EditPlus打開,Ctrl+F組合鍵查找[HOSTNAME_AND_PATH_TO_JSAPI],並替換爲<myserver>/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/,其中<myserver>爲機器名稱或者機器IP,沒有http前綴。能夠是localhost或者192.168.11.195,這裏我使用的是localhost,以下圖所示:

⑧以下圖所示,找到3.9compact文件夾,接下來9)、10)步驟的操做和6)、7)徹底相同,只是9)、10)操做針對3.9compact文件夾,而6)、7)操做針對3.9文件夾,以下圖所示:

⑨ C:\inetpub\wwwroot\arcgis_js_v39_sdk\arcgis_js_api\library\3.9\3.9compact\init.js文件,利用記事本或者EditPlus打開;Ctrl+F組合鍵查找[HOSTNAME_AND_PATH_TO_JSAPI],並替換爲<myserver>/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9compact/,其中<myserver>爲機器名稱或者機器IP,注意沒有http前綴。能夠是localhost或者192.168.11.195,這裏我使用的是localhost,以下圖所示:

⑩ 找到C:\inetpub\wwwroot\arcgis_js_v39_sdk\arcgis_js_api\library\3.9\3.9compact\js\dojo\dojo\dojo.js文件,利用記事本或者EditPlus打開,Ctrl+F組合鍵查找[HOSTNAME_AND_PATH_TO_JSAPI],並替換爲<myserver>/ arcgis_js_v39_sdk/arcgis_js_api/library/3.9/ 3.9compact/,其中<myserver>爲機器名稱或者機器IP,沒有http前綴。能夠是localhost或者192.168.11.195,這裏我使用的是localhost,以下圖所示:

通過上面10個步驟,咱們就完成了ArcGIS  API for JavaScript的本地部署。

三、示例demo

我是在ASP.Net MVC環境下搭建的,也能夠直接寫純html頁面。部分CSS樣式,還有一些懸浮div等我去掉了,重要的代碼都放上來了,咱主要關注功能實現。

@{ ViewBag.Title = "GIS地圖"; <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/tundra/tundra.css" />
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css" />
    <script type="text/javascript" src="http://localhost/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/init.js"></script> } <div style="padding-left: 1px; padding-top: 1px;">
    <div id="mapDiv" style="width: 1180px; min-height: 800px; "></div>

    <div id="controls">
        <a id="ctrl-waring-info">預警信息</a>
    </div>

</div>


<script type="text/javascript"> require(["esri/map", "dojo/dom", "dojo/on", "dojo/colors", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/GraphicsLayer", "esri/geometry/Point", "esri/SpatialReference", "esri/symbols/SimpleMarkerSymbol", "dojo/domReady!"], function (Map, dom, on, Color, ArcGISTiledMapServiceLayer, GraphicsLayer, Point, SpatialReference, SimpleMarkerSymbol ) { var map = new Map("mapDiv", { logo: false, //basemap: "streets",
 center: [120.6168, 31.42], slider: false, zoom: 9, showLabels: true, }); //定位中心點
            var centerPnt = new Point(120.6168, 31.42, new SpatialReference({ wkid: 4490 })); map.centerAndZoom(centerPnt, 9); //==========如下爲加載江蘇水利地圖與相城區邊界============

            var bgLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://218.94.6.92:6080/arcgis/rest/services/jssl_vector_L3_L17/MapServer"); map.addLayer(bgLayer); //======== 地圖中添加繪製層 =======
            var gl = new GraphicsLayer({ id: "bound" }); map.addLayer(gl); var gl_pnt = new GraphicsLayer({ id: "gl_point" }); map.addLayer(gl_pnt); //======== 添加邊界線 =======
            var line = new esri.geometry.Polyline({ "paths": [[ [120.614, 31.553], [120.623, 31.5407], [120.7507, 31.531], [120.8113, 31.436] ]], "spatialReference": { "wkid": 4490 } }); var lineSymbol = new esri.symbol.CartographicLineSymbol( esri.symbol.CartographicLineSymbol.STYLE_SOLID, new dojo.Color("#0000FF"), 2, esri.symbol.CartographicLineSymbol.CAP_ROUND, esri.symbol.CartographicLineSymbol.JOIN_MITER, 5 ); var polyline = new esri.Graphic(line, lineSymbol); gl.add(polyline); //給按鈕綁定click事件
 on(dom.byId("ctrl-waring-info"), "click", function () { console.log("點擊了預警按鈕了!"); //========= 添加 點 ========
                //定義點符號l
                var pSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 20, lineSymbol, new Color([255, 0, 0])); var pnt1 = new Point(120.6168, 31.42, new SpatialReference({ wkid: 4490 })); var polypoint = new esri.Graphic(pnt1, pSymbol); gl_pnt.add(polypoint); }) //給按鈕綁定click事件
 on(dom.byId("ctrl-rain-info"), "click", function () { console.log("點擊了雨情按鈕!"); //========= 清除 點 ========
 gl_pnt.clear(); }) }) </script>

運行效果:

四、最後是外網的部署

好比咱們要部署在外網地址爲222.95.237.125的服務器上的1001端口號上,服務器對應的內網地址爲192.168.26.21,

那咱們應該如何去部署ArcGIS  API for JavaScript 的API與SDK包呢?

①首先應該把ArcGIS  API for JS 的包放到222.95.237.125:1001(也就是192.168.26.21這太服務器的IIS 1001端口號)對應的基礎文件路徑下;

②和以前的本地部署相似,但須要將 localhost 改成 222.95.237.125:1001

③固然地圖頁面引用也須要相應的修改:

@using Drision.Framework.Mvc; @{ ViewBag.Title = "GIS地圖"; <link rel="stylesheet" type="text/css" href="http://222.95.237.125:10001/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/js/dojo/dijit/themes/tundra/tundra.css" />
    <link rel="stylesheet" type="text/css" href="http://222.95.237.125:10001/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css" />
    <script type="text/javascript" src="http://222.95.237.125:10001/arcgis_js_v39_sdk/arcgis_js_api/library/3.9/3.9/init.js"></script> }

基本的部署就OK了!

以後我會將涉及到的ArcGIS API for JS相關的功能實現代碼整理貼出來,等待下一篇文章吧~

相關文章
相關標籤/搜索