Learning notes for ArcGIS Server javascript API

Something about the concept of ArcGIS Server javascript API is not too long here, so you can go directly to the topic and use ArcGIS Server javascript API to develop a more interactive WebGIS idea.

 

If you are familiar with geoserver + openlayer, the well-known Google API, or the Baidu API, I believe you will be able to learn the ArcGIS Server javascript API. In fact, they are similar in principle, all call the map service on the client... Of course this is a digress.

 

The most effective way to learn a technology is to look at the official help. Here there are two resources for reference.

The first is api reference. I think no one can leave the API and write complicated WebGIS code. I can view and summarize it at any time, which is undoubtedly a good solution for us to develop WebGIS.

Its web site is: http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/help/jsapi_start.htm

The second is to look at several examples of programs officially provided by ESRI for our reference. I personally think it is very helpful, covering almost all the APIS, and some examples can even be copied directly.

Its web site is: http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/help/jssamples_start.htm

 

The following describes the structure of an API based on your own understanding (or understanding differences.

This is an official ESRI screenshot that contains all JavaScript APIs.

In fact, JavaScript does not have a similar concept in Java, nor is it similar. net is similar to the namespace concept, but considering that all JavaScript objects have their own properties, attributes can also contain objects, in this way, you can create something similar to the namespaces in other languages. For details, see my blog "namespaces in JavaScript". arcGIS Server javascript API is built with the help of dojo and based on this idea.

 

The following describes the functions of objects in various namespaces (different from objects in Java and. net, equivalent to classes in Java and. net.

1. ESRI namespace

All objects are in the ESRI namespace, and ESRI has its own attributes and methods.

For example, ESRI. Version returns the version number of the current javascript API. ESRI. Hide (element) hides HTML elements, such as Div or table elements.

2. Graphic object

If you have developed ARCserver ADF or ARCserver API for Silverlight, you should be familiar with graphic objects. This is an image in memory. This object is used when we need to highlight the map we have queried.

3. infotemplate object

In terms of English meaning, we know that this is an information template object. It is a content template string containing the title and used to convert the graphic. Attributes attribute to the HTML representation.

4. map object

This is an object that must be used by any WebGIS. It can be used to load maps and perform various operations on maps.

5. spatialreference object

Space reference object.

6. Units object

Unit object.

7. dijits namespace

We know that dojo has a dijit package, which contains some page layout and HTML controls.

The dijits namespace in ESRI also contains HTML controls. However, this is only a custom ESRI control, which is infowindow, as the name suggests, this object is a window that can be used to display information, just like a pop-up window of a desktop product.

8. Geometry namespace

The namespace contains some geographic and geometric types, such as point, polyline, and polygon.

9. Layers namespace

This namespace contains objects of various layer types, such as arcgisdynamicmapservicelayer, arcgisimageservicelayer, and arcgistiledmapservicelayer.

10. Render namespace

This namespace contains some objects related to rendering, such as classbreakrenderer, simplerenderer, and uniquevaluerenderer.

11. symbol namespace

This namespace contains some objects related to the dot, line, surface, and other styles, such as simplemarkersymbol, simplelinesymbol, and simplefillsymbol.

12. Tasks namespace

This namespace contains some objects related to tasks, such as findtask, querytask, and routetask.

13. toolbars namespace

This namespace contains some objects in the toolbar, such as draw and navigition.

14. vitrualearth namespace

The namespace contains some objects related to Microsoft's Bing map, such as veaddress, vegeocoder, and vetilelayer.

 

The following example is a test. The following code can be edited directly in notepad.

 

Code

<HTML>
<Head>
<Title> WebGIS test </title>
<Style type = "text/CSS">
@ Import "http://serverapi.arcgisonline.com/jsapi/arcgis/2.0/js/dojo/dijit/themes/tundra/tundra.css"; <! -- Import style -->
</Style>
<Style type = "text/CSS">
IMG {margin: 5px}
</Style>
<SCRIPT type = "text/JavaScript" src = "http://serverapi.arcgisonline.com/jsapi/arcgis? V = 2.0 "> <! -- Introduce JS -->
</SCRIPT>
<SCRIPT type = "text/JavaScript">
Dojo. Require ("ESRI. Map"); // load the package
VaR map, mytiledmapservicelayer;
Function Init (){
Esriconfig. defaults. Map. panduration = 1000; // you can zoom in, zoom out, or move the map.
Esriconfig. defaults. Map. panrate = 50;
Esriconfig. defaults. Map. zoomduration = 1000;
Esriconfig. defaults. Map. zoomrate = 50;

Map = new ESRI. Map ("mapdiv"); // instantiate the map control
Dojo. Connect (MAP, "onmousemove", showcoordinates); // registers an event. The event name is case sensitive.
Dojo. Connect (MAP, "onmousedrag", showcoordinates );

Mytiledmapservicelayer = new ESRI. layers. arcgistiledmapservicelayer

("Http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"); // instantiate the map service
Map. addlayer (mytiledmapservicelayer); // Add a map
}

Function showcoordinates (EVT) // display map coordinates
{
VaR MP = EVT. mappoint;
Dojo. byid ("info"). innerhtml = "coordinates:" + MP. x + "," + MP. Y;
}

Dojo. addonload (init );
</SCRIPT>
</Head>
<Body>
<Div style = "width: 100%; Height: 100%; text-align: center;">
<Div id = "mapdiv" class = "tundra" style = "border: solid 1px red; width: pixel PX; Height: 800px; margin-

Left: auto; margin: 0 auto; position: relative; ">
<Div style = "position: absolute; margin: 100px; Z-index: 10000">
</img> <br/>
</img>
</img> <br/>
</img>
</Div>
</Div>
<Div id = "info" style = "width: pixel PX; Border: solid 1px blue;"> </div>
</Div>
</Body>
</Html>

 

As follows:

 

NOTE: If Chinese characters cannot be properly displayed, open the HTML file in notepad, save it as UTF-8 text, and change the suffix of the text. HTML.

 

This is just a start. Javascript APIs involve a lot of things and are also very rich. If you have ideas, learn from the instance program and view the API help, and give full play to your imagination, it is not difficult to build a perfect WebGIS system...