2.4 Add a dynamic map

1.发布地图服务。

url：http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer

 

2.添加样式引用：

link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css">
此样式用来定义body的样式。引用后就可以在body中利用class=“tundra”

link标签的用法具体见：http://www.w3school.com.cn/tags/tag_link.asp

 

3.添加js引用，此引用必须有，javascript API就是依此包完成GIS功能的。

引用地址为：<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>

 

4.添加层div，用来显示地图：

<div id="map" style="width:900px; height:600px; border:1px solid #000;"></div>

5.添加JavaScript初始化地图，并加载本地图层。

 function init() {
        var map = new esri.Map("map");   //注册map控件

        var imageParameters = new esri.layers.ImageParameters();
        imageParameters.format = "png24";  //set the image type to PNG24, note default is PNG8.
        //Takes a URL to a non cached map service.
        var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer", {"opacity":0.5, "imageParameters":imageParameters});
        map.addLayer(dynamicMapServiceLayer);
      }

 

本例全部代码如下

 

<% @ page language = " java "  import = " java.util.* "  pageEncoding = " ISO-8859-1 " %>
<%
String  path  =  request.getContextPath();
String  basePath  =  request.getScheme() + " :// " + request.getServerName() + " : " + request.getServerPort() + path + " / " ;
%>

<! 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"   />
     < title > Create Map </ title >
     < link  rel ="stylesheet"  type ="text/css"  href ="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css" >
     < script  type ="text/javascript"  src ="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5" ></ script >
     < script  type ="text/javascript" >
      dojo.require( " esri.map " );

       function  init() {
         var  map  =   new  esri.Map( " map " );

         var  imageParameters  =   new  esri.layers.ImageParameters();
        imageParameters.format  =   " png24 " ;   // set the image type to PNG24, note default is PNG8.
         // Takes a URL to a non cached map service.
         var  dynamicMapServiceLayer  =   new  esri.layers.ArcGISDynamicMapServiceLayer( " http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer " , { " opacity " : 0.5 ,  " imageParameters " :imageParameters});
        map.addLayer(dynamicMapServiceLayer);
      }

      dojo.addOnLoad(init);
     </ script >
   </ head >
   < body  class ="tundra" >
     < div  id ="map"  style ="width:900px; height:600px; border:1px solid #000;" ></ div >
    Creates a map and adds an ArcGISDynamicMapServiceLayer. < br  />
    Map navigation using mouse:
     < ul >
       < li > Drag to pan </ li >
       < li > SHIFT + Click to recenter </ li >
       < li > SHIFT + Drag to zoom in </ li >
       < li > SHIFT + CTRL + Drag to zoom out </ 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 >