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="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>