Home > Developer > JavaScript
Beginner ArcGIS API for JavaScript
For starters, Some of the styles offered by ESRI and some of the styles that dojo comes in need to be understood, especially in the Webgis development from basics to practice , where you can help yourself to understand and remember in the form of Notes.
the esri.css style is used primarily for widgets and components provided by esri, such as maps, information boxes, and so On. In addition, you can refer to the stylesheet provided by dojo, Dojo provides 4 sets of styles, namely Claro\tundra\soria and nihilo, each of which is a set of fonts, colors, and sizes that define the user Interface. Tundra and Claro are most commonly used in ArcGIS API for Javascript. their URLs are as follows:
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
We can use http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html to understand the display of different dojo widgets in each set of Styles. The page is as Follows:
In addition to referencing the provided stylesheet, you need to add a <script> tag to refer to the ArcGIS API for JavaScript code as follows : <script src= "http://js.arcgis.com/ 3.17/"></script>
Add a <div> element to the <body> area to display the map;
<div id= "mapdiv" ></div>
Go back to the
<script>
Require (["esri/map", "esri/layers/arcgistiledmapservicelayer", "dojo/domready!"],function (map, Arcgistiledmapservicelayer) {
Here is the code to create the map and add the Basemap
})；
</script>
note: ArcGIS API for JavaScript contains a number of "resources" that are organized by purpose , such as esri/map for maps, geometric objects, graphics, and symbols;
Esri/tasks/locater for geocoding;
If you want to use these resources in your application, you need to first invoke the global require function load provided by Dojo . The Require function requires two parameters, the first parameter is a dependency, and the second parameter is a callback Function. The first parameter of the Require function includes two classes, one is the real dependency class, the other is a plug-in, such as "dojo/dom", "dojo/fx", "dojo/domready!" such as For a dependent class, if it does not exist, dojo is loaded according to the directory structure, and the callback function executes when the load is Complete. Plug-ins are used to extend the loader function, plug-ins are loaded in a way that is no different from regular modules, except that special symbols are used at the end of the module identifier "! "to indicate that its request is a plug-in Request. Dojo default with some plug-ins, the 4 most important plug-ins are: dojo/text, dojo/i18n, dojo/has, and Dojo/domready,dojo/domready plug-in is the DOM after parsing the completion of the callback function, This makes sure that the DOM is available before any code is Executed. The parameters in the callback function, in turn, are the dependent class names specified by the first argument of the require function, and can of course be specified as non-repeating variable names, but for readability and maintainability of the code, it is best to use the same alias for the same module.
To initialize the map and add content to the map, in the callback function specified by the Require function, add the following code to load the Map:
var map = new Map ("mapdiv");//use The map class (loaded from Esri/map Module) to create a new mapping, the parameter mapdiv is the div name that contains the map in the HTML page
var agoserviceurl = "http://server.arcgisonline.com/arcgis/rest/services/ESRI_StreetMap_World_2D/MapServer";// Specify the URL of the map service you want to load
var agolayer = new Arcgistiledmapservicelayer (agoserviceurl, {displaylevels:[0,1,2,3,4,5,6,7]});// Create a map tile layer based on the URL of the map service
Map.addlayer (agolayer);//add the created map tile layer to the map
Note: ArcGIS API for JavaScript provides two types of layers: a layer of pre-made map slices, also known as cached maps (static layers), or Esri//layers/arcgistiledmapservicelayer The other is a layer that needs to dynamically generate maps based on parameters, that is, esri/layers/arcgisdynamicmapservicelayer; if you are using a tiled map of ArcGIS online as a map, you can also encode it in a faster way:
var map = new map ("mapdiv", {center:[-56.049,38.485],zoom:3,basemao: "streets"});
The code above uses the second parameter of the Map's constructor to develop other properties of the maps, such as basemaps, Initial center points, and Hierarchies. In addition to "streets", ArcGIS Online also distributes the tiled map service, only to provide "satellite", "hybrid", "topo", "gray", "ocean", "osm" and "national_ Geographic "and other basic maps. If you are using a tiled map service that you have published with ArcGIS server, simply change the URL to your own service Address.
Return to the
<style>
html,body, #mapDiv {padding:0;margin:0;height:100%;}
</style>
here, we have completed a Web application with simple GIS Functionality.
Beginner ArcGIS API for JavaScript
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
