1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
3 <html lang="en">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=8" />
7 <title>Directions方位展示</title>
8 <!-- <link rel="stylesheet" type="text/css" href="http://localhost:8080//arcgis_js_api/library/3.18/3.18/dijit/themes/tundra/tundra.css"> -->
9 <!-- <link rel="stylesheet" type="text/css" href="http://localhost:8080//arcgis_js_api/library/3.18/3.18/dijit/themes/claro/claro.css"> -->
10 <!-- <link rel="stylesheet" type="text/css" href="http://localhost:8080//arcgis_js_api/library/3.18/3.18/init.js"> -->
11 <!-- <link rel="stylesheet" type="text/css" href="js/dojo.js"> -->
12 <link rel="stylesheet" href="http://localhost:8080/arcgis_js_v311_api/arcgis_js_api/library/3.11/3.11/esri/css/esri.css"/>
13 <link rel="stylesheet" href="http://localhost:8080/arcgis_js_v311_api/arcgis_js_api/library/3.11/3.11/dijit/themes/claro/claro.css"/>
14 <script type="text/javascript" src="http://localhost:8080/arcgis_js_v311_api/arcgis_js_api/library/3.11/3.11/init.js"></script>
15
16
17
18 <!-- <link rel="stylesheet" type="text/css" href="js/jquery-1.8.3.min.js"> -->
19 <script type="text/javascript">
20 dojo.require("esri.map");//类似引入命名空间
21 //var map = [];
22 function init(){
23 esri.config.defaults.io.proxyUrl = "/proxy/proxy.ashx";
24 var map = new esri.Map("map", {
25 extent:new esri.geometry.Extent({ xmin:110, ymin:31, xmax:117, ymax:37, spatialReference:{ wkid:4326 } })//选取的空间坐标系范围
26 });
27 var henan = new esri.layers.ArcGISTiledMapServiceLayer("http://124.200.40.4:6080/arcgis/rest/services/hnxzqh/MapServer");
28 //dynamicMapServiceLayer.setOpacity(0.5);//不透明度设置
29 map.addLayer(henan);
30 dojo.connect(map,"onExtentChange",showExtent);
31 dojo.connect(map,"onLoad",function(){
32 dojo.connect(map,"onMouseMove",showCoordinates);
33 dojo.connect(map,"onMouseDrag",showCoordinates);
34 });
35 }
36 function showExtent(extent){//显示地图范围(经纬度坐标)
37 var s="extent<br/>XMin:"+extent.xmin+"<br/>YMin:"+extent.ymin+"<br/>XMax:"+extent.xmax +"<br/>YMax:"+extent.ymax;
38 dojo.byId("info").innerHTML=s;
39 }
40 function showCoordinates(event){//显示坐标
41 var mp=event.mapPoint;
42 var mp2=event.screenPoint;
43 dojo.byId("info2").innerHTML="mapPoint"+mp.x+","+mp.y+"<br/>screenPoint"+mp2.x+","+mp2.y;
44 }
45 dojo.addOnLoad(init);
46 </script>
47 </head>
48 <body>
49 <table>
50 <tr>
51 <td><div id="map" style="width:600px; height:450px; border:1px solid #000;"></div></td>
52 <!-- 设置垂直对齐位置： -->
53 <td valign="top">
54 <div id="info"></div>
55 <div id="info2"></div>
56 </td>
57 </tr>
58 </table>
59 </body>
60 </html>
