ArcGIS API for JavaScript learning Note (i)--the first Webgis application

Last Update:2016-04-03 Source: Internet

Author: User

Tags map class

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Description: A local deployment follow-up I will try.

Brief introduction:

The development environment is visual Studio 2012 because it provides IntelliSense (smart hints) for all. aspx files,. htm files, and external. js files, which is handy for the automatic completion of code for other software. Next is my first JavaScript API application. ESRI provides an online ArcGIS API for JavaScript in its ArcGIS Web, which can be referenced directly in a website, without downloading the installation, and of course, by downloading the API and then deploying it to its own web server, where I use the online API.

1. Open vs2012 Create a new empty Web application, then add an HTML named First.html, and then add a reference to the ESRI-provided stylesheet in the also need to refer to dojo provided by the stylesheet, mainly four, now only learn the two commonly used, as follows:

<link rel= "stylesheet" href= "Http://js.arcgis.com/3.9/js/esri/css/esri.css"/> <link rel= "stylesheet" href= "Http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css"/><link rel= "stylesheet" href= "http// Js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css "/>

(After dojo I will continue to study, now I can only do while learning.) )

　　2. Then add a <script> tag to the reference the API in this tab

<script src= "http://js.arcgis.com/3.9/" >

3. Add a <div> element to the <body> area to display the map

<body class= "Tundra" >   <div id= "Mapdiv" ></div></body>                                after setting the class property to Tundra, Body will automatically refer to the style provided by dojo

4. In the load the map module .

<script type= "Text/javascript" >        require (["Esri/map", "Esri/layers/arcgistiledmapservicelayer", "dojo/ domready! "], function (Map, arcgistiledmapservicelayer) {}); </script>//an explanation of the above code ArcGIS API for JavaScript Contains a number of resources, map modules, which are organized by purpose, such as esri/map for maps, geometric objects, graphics and symbols, esri/tasks/locator for geocoding and so on, and later I will learn more map modules. To use these resources, you need to call the global require function provided by Dojo first. The Require function consists of two parameters, the first is a dependency, the second is a callback function, the first parameter consists of two classes, one is a real dependency and the other is a plug-in. So the above code ["Esri/map", "Esri/layers/arcgistiledmapservicelayer", "dojo/domready!"] The first two parameters are the real dependency map module, and finally the plugin (with! The parameter in the callback function is followed by the name of the dependency class specified by the first parameter of the Require function, such as: Map,arcgistiledmapservicelayer) {} My popular understanding loading map modules is equivalent to the namespaces in C #, and only joins namespaces, You can use the property method of a class in Esri/map.

5. Initialize the map and add content to the map by adding the following code to the callback function specified by the Require function:

Here is the code to create the map and add the Basemap to                       var map = new Map ("Mapdiv");            var agoserviceurl = "Http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer";            var agolayer = new Arcgistiledmapservicelayer (Agoserviceurl, {displaylevels: [0, 1, 2, 3, 4, 5,6,7]});            Map.addlayer (Agolayer);//The  first line uses the map class to create a new map. The second line specifies the URL of a map service, the third row creates a tile layer from the URL, and the fourth row joins the tile layer to the map.

6. All codes are as follows:

1<! DOCTYPE html>234<meta charset= "Utf-8"/>5<title> first JavaScript API app </title>6<link rel= "stylesheet" href= "Http://js.arcgis.com/3.9/js/esri/css/esri.css"/>7<style type= "Text/css" >8 html, body, #mapDiv {9padding:0;Tenmargin:0; Oneheight:100%; A         } -</style> -<script type= "Text/javascript" src= "http://js.arcgis.com/3.9/" > the</script> -<script type= "Text/javascript" > -Require (["Esri/map", "Esri/layers/arcgistiledmapservicelayer", "dojo/domready!"],function(Map, arcgistiledmapservicelayer) { -         //Here's the code for creating maps and adding Basemaps +         varMap =NewMap ("Mapdiv"); -         varAgoserviceurl = "Http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"; +         varAgolayer =NewArcgistiledmapservicelayer (Agoserviceurl, {displaylevels: [0, 1, 2, 3, 4, 5,6,7] }); A Map.addlayer (Agolayer);  at         }); -</script> - -<body class= "Tundra" > -<div id= "Mapdiv" ></div> -</body> inView Code
7. Running Results
　
ArcGIS API for JavaScript learning Note (i)--the first Webgis application

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More