Home > Developer > JavaScript

Javascript API (2)-Map Display and basic operations

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞
Javascript API (2)-Map Display and basic operations

Map Display and basic operations (zoom in, zoom out, move, and coordinate display) are the basic functions of JavascriptAPI and the basic content of WebGIS applications. Javascript provides a very convenient development method, of course, Online browsing requires the support of the Ags Server. If the Server service is not configured on your computer, you can use the ArcGIS Online service.
Content directory:

1. Cache and non-Cache Map Display
2. Map basic operations, such as zoom in, zoom out, and move, and associate with the mouse and keyboard buttons
3. The client displays the current location of the mouse

Use the online map to view the final result:
Http://resources.esri.com/help/9.3/arcgisserver/apis/javascript/arcgis/demos/Map/AddMapShowXYCoords.html

Developers who have used Dojo should be familiar with the entire page structure:

1. Use the style sheet provided by dojo

<Style type = "text/css">
@ Import "http://serverapi.arcgisonline.com/jsapi/arcgis/1/js/dojo/dijit/themes/tundra/tundra.css ";
</Style>

2. reference the script file
<Script type = "text/javascript" src = "http://serverapi.arcgisonline.com/jsapi/arcgis? V = 1 ">
</Script>

There may be a question: why is this directory structure containing the js libraries required by dojo and javascriptapi? In fact, when you deploy javascriptapi, there will be different Default pages for different types of server code (Java,. Net, and php). Taking. Net as an example, Default. ashx references three files:
Context. Response. WriteFile (context. Server. MapPath ("js" "esri" "esri. js "));
Context. Response. WriteFile (context. Server. MapPath ("js" "dojo. xd. js "));
Context. Response. WriteFile (context. Server. MapPath ("js" "esri" "jsapi. js "));

After setting this page as the start page, the three js files are directly merged and downloaded when you access "http: // ip/js/arcgis", which is about 300 KB.

3. Next, we need to customize the map elements and functions added to the page, which is also completed in the script, using the javascript api
<Script type = "text/javascript">
Dojo. require ("esri. map ");
Var myMap, myTiledMapServiceLayer;
Function init (){
MyMap =
New esri. Map ("mapDiv ");
MyTiledMapServiceLayer =
New esri. layers. ArcGISTiledMapServiceLayer
("Http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer ");
MyMap. addLayer (myTiledMapServiceLayer );
}
Dojo. addOnLoad (init );
</Script>

Dojo. require introduces the required package, where esri. the Map class implements layers, Graphics, message windows (query attributes), and other navigation control methods. Here, a Map is created in the specified div. Esri. layers. ArcGISTiledMapServiceLayer is used to obtain the cache map service provided by the rest api. This is an online service. You can view the RESTAPI documentation for other services provided by REST. Esri. layers. ArcGISTiledMapServiceLayer inherits from esri. layers. ArcGISMapServiceLayer. This parent class also has a subclass of ArcGISDynamicMapServiceLayer for obtaining non-cache map services.

Finally, add the layers in the service to the current Map through the addLayer method of esri. Map.

Dojo. addOnLoad (init) is equivalent to <body onload = init>. When a page is loaded, the init () script is executed.

4. Page body area
<Body>
<Div id = "mapDiv" class = "tundra" style = "width: 900px; height: 600px; border: 1px solid #000;"> </div>
<H4> Work flow: <Ul>
<Li> Create a map. </li>
<Li> Add an ArcGISTiledMapServiceLayer. </li>
</Ul>
</Body>

The final map will be drawn in the mapDiv area.

5. Zoom in and out the translation

Esri. Map class includes the implementation of basic functions such as Map zoom, zoom, and translation. You can bind these operations to business applications. Through esri. the Map object generated by the Map constructor actually contains shortcuts for some basic operations. For example, the keyboard arrow keys move up or down to move the fixed unit around the Map, and the mouse wheel is used to zoom in or out the Map, "shift + Click" center "," shift + double-click "center", "+" zoom in, "-" zoom in.

6. dynamically display the longitude and latitude coordinates of the current mouse position

There are two ways to dynamically display the coordinates of the mouse's longitude and latitude. One is to generate coordinates on the server side, and the other is to generate coordinates on the client side. Both the optimal and the inferior are clear. Generating coordinates on the server consumes a lot of server resources, onMouseMove always keeps sending requests to the server. In this mode, the mouse movement is stopped, but the coordinate information on the status bar is still changing, this is caused by the latency caused by server computing. Therefore, for a real online webgis website, you can use the client to obtain screen coordinates, convert geographical coordinates under the projection reference system, and display them on the page.

The Javascript API provides an API for obtaining geographic coordinates:
Function showCoordinates (evt ){
Var mp = evt. mapPoint;
Dojo. byId ("info"). innerHTML = mp. x +
","
+ Mp. y;
}

MapPoint is the geographic coordinate, and screenPoint is the screen coordinate.

7. Create a listener for mouse events through dojo. connect

Dojo. connect (map, "onMouseMove", showCoordinates );
Dojo. connect (map, "onMouseDrag", showCoordinates );

Listen to the mouse drag event and add it to map. onLoad. Of course, add the div that displays coordinates to the body area.
<Div id = "info" style = "padding: 5px; margin: 5px; background-color: # eee;"> </div>

Finished! Display effect. The interface is simple, but it contains shortcut keys for the mouse and keyboard:

Blog garden link: http://www.cnblogs.com/flyingis/archive/2008/07/20/1246963.html
This topic is highlighted by flyingis

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

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