Let's walk through a sample application that adds a basemap from ArcGIS.com to the map. View a live version of the application here.
-
Reference the ArcGIS API for JavaScript（引用ArcGIS API for JavaScript）To begin working with the ArcGIS API for JavaScript, add the following script and style sheet tag inside the HTML HEAD element of your HTML page:
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.1" type="text/javascript"></script> <link href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/claro/claro.css" rel="stylesheet" type="text/css" >
The script references the location of the ArcGIS Server JavaScript API files. When new versions of the JavaScript API are released just update the version number to work with the updated version.
The referenced style sheet is a Dijit theme and is used to add a consistent look and feel to the widgets. There are four themes available: claro, tundra, soria and nihilo. To use one of the alternate themes in your application substitute "tundra" with the theme name.
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.1/js/dojo/dijit/themes/tundra/tundra.css">
-
Create the Map（创建底图）Add a new script tag to the page, this is where you will add code for working with maps and tasks. First use
dojo.requireto load any necessary modules（首先使用dojo.require来加载任何需要的模块）. Dojo is an open source DHTML toolkit written in JavaScript. The JavaScript API is built on top of Dojo and relies on Dojo for handling core functionality and browser differences（JavaScript API 是建立在Dojo的基础上并且依赖Dojo处理核心的功能和浏览器差异）. For more information on the relationship between Dojo and the JavaScript API, see About Dojo.<script type="text/javascript"> dojo.require("esri.map"); </script>Next, use
dojo.addOnLoadto specify an initialization function that will execute once the HTML is loaded（然后，使用dojo.addOnLoad设置一个初始化函数，这个函数将会在HTML加载后立刻执行）. In the initialization function, namedinit, the map is created and a new basemap layer is added to the map. The basemap layer is a service from ArcGIS.com.A new Map is created using
esri.Mapwhich is the full reference to the Map class. Class names are always capitalized. The value "mapDiv" is the name of the DIV element that will contain the map.Next, the Street Map service, a tiled MapService layer, is initialized using the ArcGISTiledMapServiceLayer constructor. The URL you see is the endpoint for this service. This endpoint is a unique reference to a service that you can generate using Services Directory. Once the layer is initialized, it is added to the map using the map's
addLayermethod.<script type="text/javascript"> dojo.require("esri.map"); var map; function init() { map = new esri.Map("mapDiv"); var basemapURL= "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer" var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapURL); map.addLayer(basemap); } dojo.addOnLoad(init); </script>
Note:You can browse the ArcGIS.com site for additional online basemap and reference map services or publish your own geographic data as a service using ArcGIS Server.
-
Define the Page Content（定义页面内容）In this step, you will define the BODY section of the HTML page. The BODY section contains everything that will be displayed, in this case a map. The DIV id "mapDiv" references the same variable set in the Map constructor. Note also that a reference to class="claro" is included in the DIV. This references the claro style sheet from the HEAD section. If you use another style, you need to replace "claro" with the new style name.
<body class="claro"> <div id="mapDiv" style="900px; height:600px; border:1px solid #000;"></div> </body>