ArcGIS api for javascript——建立地圖

描述

這個示例顯示ArcGIS Server的一個地圖。ArcGIS Server地圖是緩存的,意味着它有服務器管理員建來提高性能的一組預先渲染的切片。因爲這個緣由地圖經過 ArcGISTiledMapServiceLayer表示。javascript

若是地圖服務沒有一個可用的緩存,使用 ArcGISDynamicMapServiceLayer。若是不知道地圖服務是否有緩存可用,使用 Services Directory尋找。css

注意切片地圖服務圖層的構造函數包含服務的URL(http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer),使用Services Directory找到本身的地圖服務的URL。html

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Create Map</title>
    <link rel="stylesheet" type="text/css" href="styles.css" 
    	  href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.6/js/dojo/dijit/themes/tundra/tundra.css">
	<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.6"></script>
	<script type="text/javascript">
		dojo.require("esri.map");//基礎載體
		function init(){
			var map = new esri.Map("map");
			//根據服務的URL創造切片地圖服務層對象
			var tiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer(
				"http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer"
				//"http://map.51240.com"
				//"http://10.10.10.210:6080/arcgis/rest/services/test/zhengzhou526/MapServer"
			);
			map.addLayer(tiledMapServiceLayer);//添加地圖服務:切片地圖服務層
		}
		dojo.addOnLoad(init);
	</script>
  </head>
  <body class="tundra"><!-- dojo特有的風格 -->
    <div id="map" style="width:900px;height:600px;border:1px solid #000"></div>
    Creates a map and adds an ArcGISTileMapServiceLayer.<br/>
    Map navigation using mouse:
    <ul>
    	<li>Drag to pan</li>
    	<li>SHIFT + Click to recenter</li>
    	<li>Mouse Scroll Forward to zoom in</li>
    	<li>Mouse Scroll Backward to zoom out</li>
    	<li>Use Arrow keys to pan</li>
    	<li>+ Key to zoom in a level</li>
    	<li>- Key to zoom out a level</li>
    	<li>Double Click to Center and Zoom in</li>
    </ul>
  </body>
</html>
相關文章
相關標籤/搜索