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>?
?
轉載于:https://www.cnblogs.com/pandy/archive/2011/03/06/1972603.html
總結
以上是生活随笔為你收集整理的2.4 Add a dynamic map的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: JAVA时间格式的处理 SimpleD
- 下一篇: ipad2“新瓶装老酒” 苹果创新乏力?