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 >  



 

你可能感兴趣的:(dynamic)