首頁 > 開發者 > JavaScript
標籤：init img 2.3 速度 set size 建立 構造 元素
1.簡介ArcGIS API for JavaScript跟隨ArcGIS 9.3同時發布，是ESRI根據JavaScript技術實現的調用ArcGIS Server REST API介面的一組指令碼。當前的最新版本是Version 3.20。通過ArcGIS API for JavaScript可以將ArcGIS Server提供的地圖資源和其它資源(ArcGIS Online)嵌入到Web應用中。
在ArcGIS API For JS中，esri.Map類是最重要的一個類，Map作為地圖圖層的容器，存放各種地圖服務，同時Map具有一些常用的屬性和事件可以協助我們完成一些複雜的操作。接下來我們使用Map類開始我們的HelloWorld程式。
2.建立第一個地圖程式2.1首先，設定一個基本的HTML文檔。如下：<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title></title> </head> </html>2.2 引用ArcGIS API for JavaScript
要開始使用ArcGIS API for JavaScript，需要在??代碼中添加以下指令碼和連結標籤<head>：
<link rel="stylesheet" href="http://jsapi.thinkgis.cn/esri/css/esri.css"> <script src="http://jsapi.thinkgis.cn/"></script>
因為官方的連結速度較慢，這裡引用thinkgis社區提供的國內鏡像。
（可選）這裡還可以引用一個Dojo Dijit主題樣式。有四個主題可供選擇：Claro，tundra，soria和nihilo。使用Dojo Dijit主題是可選的，這樣做可以為API中包含的小組件設定一致的外觀。各種主題樣式表的URL如下所示：
http://jsapi.thinkgis.cn/dijit/themes/claro/claro.csshttp://jsapi.thinkgis.cn/dijit/themes/tundra/tundra.csshttp://jsapi.thinkgis.cn/dijit/themes/nihilo/nihilo.csshttp://jsapi.thinkgis.cn/dijit/themes/soria/soria.css2.3建立地圖對象並載入地圖
var map; require(["esri/map", "dojo/domReady!"], function(Map) { map = new Map("mapDiv", { center: [-56.049, 38.485], zoom: 3, basemap: "streets" }); });
現在，建立地圖的JavaScript已經到位了，下一步是添加關聯的HTML。對於這個例子，HTML是非常簡單的：一個body標籤，它定義了瀏覽器中可見的內容，以及一個單一的div元素，在body裡面會建立地圖。
<body class="claro"> <div id="mapDiv"></div> </body>
對於本例子，地圖需要填充瀏覽器視窗。要實現這一點，在頁面的<head>標籤中添加以下css ：
<style> html, body, #mapDiv { padding: 0; margin: 0; height: 100%; } </style>2.6運行結果及完整代碼
<!DOCTYPE html><html><head> <title>Create a Map</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <link rel="stylesheet" href="http://jsapi.thinkgis.cn/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://jsapi.thinkgis.cn/esri/css/esri.css"> <style> html, body, #mapDiv{ padding: 0; margin: 0; height: 100%; } </style> <script src="http://jsapi.thinkgis.cn/init.js"></script> <script> var map; require(["esri/map", "dojo/domReady!"], function(Map) { map = new Map("mapDiv", { center: [-56.049, 38.485], zoom: 3, basemap: "streets" }); }); </script></head><body class="claro"> <div id="mapDiv"></div></body></html>
require函數是dojo提供的一個全域函數，只要引入init.js便可使用，require函數支援AMD（非同步模組定義，Asynchronous Module Definition）規範。
require函數有兩個參數，第一個參數是一個數組（用於載入的模組），第二個參數是一個回呼函數，注意前後載入的順序一定要一致，例如require的第一個參數是esri.map,回呼函數的第一個參數必須是Map
require載入的第二個是dojo/domReady！,dojo/domReady！是一個外掛程式（如果載入的模組以驚嘆號結尾，一般都為外掛程式），此外掛程式的作用是，當Html的dom載入完畢後在執行此函數，類似與window.onload事件。
Map類中有一個比較特殊的屬性叫做basemap,在arcgis api中，esri自己定義了一些底圖可直接供我們使用，這些底層的調用，我們可以根據制定basemap屬性直接調用已經定義好的底圖。
esri給我們定義的底圖有：streets ,satellite ,hybrid, topo, gray,dark-gray, oceans, national-geographic,terrain, osm,dark-gray-vector, gray-vector,streets-vector, streets-night-vector, streets-relief-vector,streets-navigation-vector,topo-vector.terrain, dark-gray, dark-gray-vector, gray-vector,streets-vector,streets-night-vector, streets-relief-vector, streets-navigation-vector , topo-vector,注意：要使用esri定義的底圖屬性basemap電腦必須連網。
ArcGIS API for JavaScript學習（1）：第一個地圖
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
