1. 程式人生 > >ArcGIS For JavaScript API 新增一個dynamic Service(動態服務)————(一)

ArcGIS For JavaScript API 新增一個dynamic Service(動態服務)————(一)

描述:

此示例演示如何新增一個地圖繪製伺服器在使用者每次縮放或平移這樣的地圖不具有快取記憶體的瓦片被稱為動態地圖服務在ArcGISJavaScript API的動態地圖服務為代表的ArcGISDynamicMapServiceLayer

下面的程式碼行建立地圖

var map =new esri.Map("map");

注意:(1)動態地圖服務的建構函式需要服務的REST端點URL您可以使用服務指南地圖服務找到的URL。使用時,需開啟rest端的服務才能呼叫顯示。

           (2)透明使用其setOpacity方法然後地圖上addLayer方法新增

地圖

dynamicMapServiceLayer.setOpacity(0.5);
map.addLayer(dynamicMapServiceLayer);

(3)本示例中的引用資源是我之前在本地IIS服務中部署好的,所以是localhost,大家可以參考下篇文章中的聯接地址直接替換調即可。

程式碼如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples 
      on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Create Map</title>
<!--<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" />
    <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script>
    與下面的引用相同,一種是本地,一種是線上
    -->
    
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.2/jsapi/js/dojo/dijit/themes/claro/claro.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.2/jsapi/js/esri/css/esri.css" />
    <script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.2/jsapi/init.js"></script>
    <script type="text/javascript">
      dojo.require("esri.map");	// 相當於引入必要的包

      function init() {
	  	//建立一個map物件
        var map = new esri.Map("map");
		
        var imageParameters = new esri.layers.ImageParameters();		//建立一個新的ImageParameters物件。建構函式沒有引數
        imageParameters.format = "jpeg";  //設定影象型別PNG24,注意,預設情況下是PNG8.型別有: png | png8 | png24 | jpg | pdf | bmp | gif | svg 
		
        //非快取的地圖服務的URL
        var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer", {"opacity":0.8, "imageParameters":imageParameters});
		
        map.addLayer(dynamicMapServiceLayer);// 放入地圖物件中
      }

      dojo.addOnLoad(init);
    </script>
    </head>
    <body class="claro">
<div id="map" style="width:900px; height:600px; border:1px solid #000;"></div>
建立一個地圖,並增加了一個ArcGISDynamicMapServiceLayer.<br />
地圖導航使用滑鼠:
<ul>
      <li>拖動進行平移</li>
      <li>SHIFT + Click 回到中心位置</li>
      <li>SHIFT + Drag 放大</li>
      <li>SHIFT + CTRL + Drag 縮小</li>
      <li>滑鼠向前滾動來放大</li>
      <li>滑鼠向後滾動來放小</li>
      <li>使用箭頭鍵移動</li>
      <li>+ 水平放大一級</li>
      <li>- 水平縮小一級</li>
      <li>雙擊中心和放大</li>
    </ul>
</body>
</html>

效果圖如下: