javascript
初学ArcGIS API for JavaScript
初學ArcGIS API for JavaScript
對于初學者來說，關于esri提供的一些樣式和dojo自帶的一些樣式還是需要有一定的了解，這塊在《WebGIS開發從基礎到實踐》講解的特別詳細，在這里以筆記的形式來幫助自己加以理解和記憶。
1.樣式
? ? ? esri.css樣式主要用于ESRI提供的小部件與組件，比如地圖、信息框等。此外，還可以引用Dojo提供的樣式表，Dojo提供了4組樣式，分別是claro\tundra\soria以及nihilo，每種是一組定義用戶界面的字體、顏色與大小等設置。在ArcGIS API for JavaScript中最常用的是tundra與claro。它們的URL如下：
http://js.arcgis.com/3.17/js/dojo/dijit/themes/claro/claro.css
http://js.arcgis.com/3.17/js/dojo/dijit/themes/tundra/tundra.css
http://js.arcgis.com/3.17/js/dojo/dijit/themes/nihilo/nihilo.css
http://js.arcgis.com/3.17/js/dojo/dijit/themes/soria/soria.css
? ? ?我們可以通過http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html來了解每組樣式中不同Dojo小部件的顯示情況。頁面如下：
2.添加<script>標簽
? ? 除了引用提供的樣式表外，還需要添加<script>標簽來引用ArcGIS API for JavaScript，代碼如下：<script src="http://js.arcgis.com/3.17/"></script>
3.添加<div>元素
? ? 在<body>區域增加一個<div>元素，用于顯示地圖；
<div id="mapDiv"></div>
4.編寫加載地圖模塊的腳本
? ? 返回到<head>部分編寫腳本，加載地圖模塊。例如加載瓦片地圖：
<script>
require(["esri/map","esri/layers/ArcGISTiledMapServiceLayer","dojo/domReady!"],function(Map,ArcGISTiledMapServiceLayer){
//這里是創建地圖與加入底圖的代碼
})；
</script>
? ? ? 注：ArcGIS API for JavaScript包含了許多“資源”，這些資源是按用途組織的，比如說esri/map用于地圖、幾何對象、圖形與符號；esri/tasks/locater用于地理編碼；
? ? ?如果要在應用程序中使用這些資源，需要先調用Dojo提供的全局require函數加載。require函數需要兩個參數，第一個參數是依賴項，第二個參數是一個回調函數。require函數的第一個參數又包括兩類，一類是真正的依賴類，另一類是插件，例如“dojo/dom”、“dojo/fx”、“dojo/domReady!”等。對于依賴類，如果不存在，Dojo就會根據目錄結構去加載，當加載完成后，將執行回調函數。插件是用來擴展加載器功能的，插件的加載方式和常規模塊沒什么區別，只是在模塊標識符的結尾使用了特殊符號“！”來表明它的請求是插件請求。Dojo默認帶有一些插件，4個最重要的插件是：dojo/text、dojo/i18n、dojo/has、dojo/domReady，其中dojo/domReady插件是在DOM解析完畢以后再執行回調函數，這樣就可以確保在執行任何代碼前DOM可用。在回調函數中的參數依次是require函數的第一個參數指定的依賴類別名，當然可以指定為不重復的變量名即可，但是為了代碼的可讀性、可維護性，最好是對于同一個模塊使用同一個別名。
? ? 初始化地圖以及在地圖中加入內容，在require函數指定的回調函數中，加入如下代碼加載地圖：
var map = new Map("mapDiv");//使用Map類（加載自esri/map模塊）來創建一個新的地圖，參數mapDiv是在HTML頁面中包含地圖的DIV名稱
var agoServiceURL = "http://server.arcgisonline.com/arcgis/rest/services/ESRI_StreetMap_World_2D/MapServer";//指定你要加載的地圖服務的URL
var agoLayer = new ArcGISTiledMapServiceLayer(agoServiceURL ,{displayLevels:[0,1,2,3,4,5,6,7]});//根據地圖服務的URL創建一個地圖切片圖層
map.addLayer(agoLayer?);//將創建好的地圖切片圖層加入到地圖中
? ? ?注：ArcGIS API for JavaScript提供了兩類圖層：一類是事先做成地圖切片的圖層，又稱為緩存地圖（靜態圖層），即esri//layers/ArcGISTiledMapServiceLayer；另一類是需要根據參數動態生成地圖的圖層，即esri/layers/ArcGISDynamicMapServiceLayer；如果使用的是ArcGIS Online的切片地圖作為地圖，還可以用以下這種更快捷的方式來編碼：
var map = new Map("mapDiv",{center:[-56.049,38.485],zoom:3,basemao:"streets"});
上述代碼通過Map的構造函數的第二個參數制定了地圖的其他屬性，例如底圖、初始中心點與層級。除了“streets”外，ArcGIS Online還 分布的切片地圖服務，只需要將提供了“satellite”、"hybrid"、“topo”、“gray”、“ocean”、“osm”與“national_geographic”等基礎地圖。如果使用的是自己利用ArcGIS?Server發布出來的切片地圖服務，只需要將URL換成自己的服務地址即可。
5.設置樣式
? ? 返回到<head>部分設置樣式<style></style>，讓地圖重返整個瀏覽器窗口。
<style>
html,body,#mapDiv{padding:0;margin:0;height:100%;}
</style>
到這里，我們就完成了一個具有簡單GIS功能的Web應用了。
轉載于:https://www.cnblogs.com/khfang/p/6591701.html
總結
以上是生活随笔為你收集整理的初学ArcGIS API for JavaScript的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： DevExpress RichEditC
- 下一篇： NodeJS文档之Buffer(1)-B