<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Map</title>
<link rel="stylesheet" type="text/css"
href="http://172.7.24.250:8018/arcgis_js_api/library/2.6/jsapi/js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript"> var djConfig = { parseOnLoad: true, url: "172.7.24.250:8018" };</script>
<script type="text/javascript"
src="http://172.7.24.250:8018/arcgis_js_api/library/2.6/jsapi/" charset="utf-8"></script>
<script type="text/javascript">
try{
//dojo.require("dijit.layout.BorderContainer");
//dojo.require("dijit.layout.ContentPane");
dojo.require("esri.dijit.InfoWindow");
dojo.require("esri.dijit.InfoWindow");
dojo.require("esri.map"); //类似引入命名空间
dojo.require("esri.tasks.query");//添加query任务
dojo.require("esri.tasks.geometry");
dojo.require("esri.toolbars.draw");
}catch(e){
alert("ARCGIS API加载失败！");
}
var myMap,geometryService,businessGraphicsLayer,queryTask,query;
//初始化加载地图的方法
function init() {
var startExtent = new esri.geometry.Extent(120.1044117860087,30.24444042330439, 120.25890702814839,30.347437251397523,esri.SpatialReference({wkid:32662}));
//构造函数esriMap(divId,options?),options?参数总结如下： nav：true/false 是否在地图边上显示 8 个方向移动的功能按钮。 slider：true/false 是否显示比例滚动条。 extent：Extent 设置地图控件的初始地图范围 var map = new esri.Map("map",{ nav:true,slider:true,extent:startExtent});
//howInfoWindowOnClick：true/false 点击的时候是否显示infowindow。 displayGraphicsOnPan:true/false 设置地图上的图形在移动时是否显示，这个是对esri.toolbars.Draw画出来的图形的设置，默认为true，当需要提供浏览器的效率可以设置成false这样就不会消耗过多的cpu资源。
myMap = new esri.Map("mapDiv",{ nav:true,slider:true,extent:startExtent,logo:false});
//note that if you do not have public Internet access then you will need to point this url to your own locally accesible cached service.
//用于支持cache的Tile地图
var myTiledMapServiceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://172.7.24.250:8018/ArcGIS/rest/services/HZSL/MapServer");
var myDynMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://172.7.24.250:8018/ArcGIS/rest/services/HZSL/MapServer");
//把myTiledMapServiceLayer添加到地图控件中（ArcGISDynamicMapServiceLayer用于支持Dynamic地图）
myMap.addLayer(myTiledMapServiceLayer);
myMap.addLayer(myDynMapServiceLayer);
//自己添加的业务层，可以在此层上面添加各种元素
businessGraphicsLayer = new esri.layers.GraphicsLayer();
myMap.addLayer(businessGraphicsLayer);
geometryService = new esri.tasks.GeometryService("http://172.7.24.250:8018/ArcGIS/rest/services/Geometry/GeometryServer");//GeometryService服务
//设置slider条的位置大小
esriConfig.defaults.map.slider = {left : "30px",top : "20px",width : null,height : "120px"};
/*var lods = Layer.tileInfo.lods;
//记录各级比例信息
for (var i=0, il=lods.length; i<il; i++)
{
labels[i] = lods[i].scale;
}*/
esriConfig.defaults.map.sliderLabel =
{
tick: 2,//横刻度线大小
labels: "",//显示信息
//slider条信息文字样式设置，字体、字大小、字颜色、字离左边的距离
style: "width:2em; font-family:Verdana; font-size:12px; color:#fff; padding-left:2px;"
};
//分别设置地图放大缩小的持续时间和刷新时间设置
esriConfig.defaults.map.zoomDuration = 1000;//默认250
esriConfig.defaults.map.zoomRate = 50;//默认25
//分别设置地图移动的持续时间和刷新时间设置
esriConfig.defaults.map.panDuration = 10000;//默认250
esriConfig.defaults.map.panRate = 50;//默认25
//esriConfig.defaults.map.sliderLabel = null;设置不显示sliderLabel
//ToolBar功能按钮 esri.toolbars.Navigation(map)
navToolbar = new esri.toolbars.Navigation(myMap);
draToolbar = new esri.toolbars.Draw(myMap);
dojo.connect(draToolbar,"onDrawEnd",doDraw);//绘制完成后调用doDraw
dojo.connect(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);//为Navigation绑定事件监听
//给地图控件添加视图变化监听事件
dojo.connect(myMap,"onExtentChange",showExtent);
//给地图控件添加载入完成（onload）监听事件
//在onload监听事件里在去添加对鼠标移动和拖拽的监听了
dojo.connect(myMap,"onLoad",function(){
//给地图控件添加鼠标移动监听事件
dojo.connect(myMap,"onMouseMove",showCoordinates);
//给地图控件添加鼠标拖拽监听事件
dojo.connect(myMap,"onMouseDrag",showCoordinates);
});
//获取元素信息窗口
dojo.connect(businessGraphicsLayer, "onClick", addPoint);
//businessGraphicsLayer右键处理（删除）
dojo.connect(businessGraphicsLayer, "onMouseDown", removePoint);
//dojo.connect(businessGraphicsLayer,"onMouseDrag",changePoint);
}
//画图
function doDraw(geometry){
//根据图形的类型定义显示样式
switch(geometry.type){
case "point":
//var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE,10,new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,new dojo.Color([255,0,0]),1),new dojo.Color([0,255,0,0.25]));
var symbol = new esri.symbol.PictureMarkerSymbol('D:/项目/GIS资料/image/crossing-alarm.png', 25, 40);//esri.symbol.PictureMarkerSymbol(url, width, height)
break;
case "line":
var symbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASH,new new dojo.Color([255,0,0]),1);
break;
case "polygon":
var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_DASHDOT, new dojo.Color([0,0,0]),1), new dojo.Color([255,0,0,0.25]));
break;
}
//把绘制的图形添加到businessGraphicsLayer上显示
var graphic = new esri.Graphic(geometry,symbol);
//myMap.graphics.clear();//清除上次画的内容
businessGraphicsLayer.add(graphic);//myMap.graphics.add(graphic);
}
//显示地图范围
function showExtent(extent)
{
var s="地图范围：<br/>XMin:"+extent.xmin+"<br/>YMin:"+extent.ymin+"<br/>XMax:"+extent.xmax+"<br/>YMax:"+extent.ymax;
dojo.byId("info").innerHTML=s;
}
//显示鼠标坐标
function showCoordinates(event){
var mp=event.mapPoint;
var mp2=event.screenPoint;
dojo.byId("info2").innerHTML="地理坐标："+mp.x+","+mp.y+"<br/>屏幕坐标："+mp2.x+","+mp2.y;
}
//地图范围变化的事件
function extentHistoryChangeHandler(){
document.getElementById("preview").disabled=navToolbar.isFirstExtent();//前一视图按钮不可用
document.getElementById("nextview").disabled=navToolbar.isLastExtent();//后一视图按钮不可用
}
//绘制图形控制函数按钮相应事件
function Draw(type){
switch(type){
case "showzoom":{//漫游
draToolbar.deactivate();
navToolbar.deactivate();
myMap.showZoomSlider();
break;
}
case "point":{//画点
draToolbar.activate(esri.toolbars.Draw.POINT);
myMap.hideZoomSlider();
break;
}
case "line":{//画线
draToolbar.activate(esri.toolbars.Draw.LINE);
myMap.hideZoomSlider();
break;
}
case "polygon":{//画面
draToolbar.activate(esri.toolbars.Draw.POLYGON);
myMap.hideZoomSlider();
break;
}
}
}
//地图浏览控制函数，按钮相应事件
function Navigation(tool){
switch(tool){
case "zoomin":{//放大
navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);
break;
}
case "zoomout":{//缩小
navToolbar.activate(esri.toolbars.Navigation.ZOOM_OUT);
break;
}
case "pan":{//平移
navToolbar.activate(esri.toolbars.Navigation.PAN);
break;
}
case "preview":{//上一视图
navToolbar.zoomToPrevExtent();
break;
}
case "nextview":{//下一视图
navToolbar.zoomToNextExtent();
break;
}
case "fullextent":{//全图显示
navToolbar.zoomToFullExtent();
break;
}
}
}
//弹窗
function addPoint(evt) {
myMap.infoWindow.resize(200,100);//设置窗口大小
myMap.infoWindow.setTitle("Coordinates"); //设置窗口标题
//Need to convert the coordinates from the map's spatial reference (web mercator) to geographic to display lat/lon values
var geoPt = esri.geometry.webMercatorToGeographic(evt.mapPoint);
myMap.infoWindow.setContent("<a href = '#'>test</a>"+":"+"lat/lon : " + geoPt.y.toFixed(2) + ", " + geoPt.x.toFixed(2) +
"<br />screen x/y : " + evt.screenPoint.x + ", " + evt.screenPoint.y);
myMap.infoWindow.show(evt.mapPoint,myMap.getInfoWindowAnchor(evt.screenPoint)); //为获取系统建议的显示位置
}
//删除点
function removePoint(evt){
if(evt.button==2){//检查其event.button的值是不是2（代表右键）。
businessGraphicsLayer.remove(evt.graphic);
}
}
//拖拽改变点的位置
function changePoint(evt){
var point = new esri.geometry.Point(evt.x, evt.y, new esri.SpatialReference({wkid : 4326}));
var symbol = new esri.symbol.PictureMarkerSymbol('E:/地图/部署/images/crossing-alarm.png', 25, 40);
var graphic = new esri.Graphic(point, symbol);
businessGraphicsLayer.add(graphic);
}
//用dojo的addOnload方法初始化地图
dojo.addOnLoad(init);
</script>
</head>
<body class="tundra" oncontextmenu="return false">
<table>
<tr>
<td>
<div id="mapDiv"style="width: 1200px; height: 800px; border: 1px solid #000;"></div>
</td>
<td valign="top">
<div id="info"></div><div id="info2""></div>
</td>
</tr>
</table>
<input id="showzoom" type="button" value="漫游" onclick="Draw(this.id)"/>
<input id="point" type="button" value="画点" onclick="Draw(this.id)"/>
<input id="line" type="button" value="画线" onclick="Draw(this.id)"/>
<input id="polygon" type="button" value="画面" onclick="Draw(this.id)"/>
<input id="zoomin" type="button" value="放大" onclick="Navigation(this.id)"/>
<input id="zoomout" type="button" value="缩小" onclick="Navigation(this.id)"/>
<input id="pan" type="button" value="平移" onclick="Navigation(this.id)"/>
<input id="preview" type="button" value="上一视图" onclick="Navigation(this.id)"/>
<input id="nextview" type="button" value="下一视图" onclick="Navigation(this.id)"/>
<input id="fullextent" type="button" value="全图" onclick="Navigation(this.id)"/>
</body>
</html>
分享到：
相关推荐
【ArcGIS数据——欧洲.rar】是一个包含详细欧洲地理信息的数据集，专为在ArcGIS软件中使用而设计。ArcGIS是Esri公司开发的一款强大的地理信息系统（Geographic Information System），它能够处理、分析和展示地理...
《ArcGIS数据——世界（1）》这个压缩包文件提供了丰富的全球地理信息，适用于各种科研需求。...使用时，用户需熟悉ArcGIS的基本操作，并根据具体研究需求选择合适的数据和分析方法，以发挥其最大价值。
【ArcGIS Server——WebGIS开发新手体验】 ArcGIS Server是一款由Esri公司推出的强大的地理信息系统（GIS）服务器软件，主要用于构建和部署地理空间服务。它允许开发者将地图、地理处理功能以及空间数据集通过网络...
ArcGIS是由Esri公司开发的一款强大的地理信息系统软件，它允许用户进行地图制作、空间分析以及地理数据管理。这份压缩包中的数据涵盖了世界范围内的多种地理要素，如河流、湖泊、海洋和地形等，为用户提供了一个全面...
这两个实验覆盖了ArcGIS的基础操作，旨在帮助初学者熟悉GIS的基本概念，掌握地图制作、数据查询、空间分析和数据库管理等技能。通过这些实践，学生能够逐步提升对地理信息系统的理解和应用能力，为进一步的学习和...
无论是构建复杂的地理信息系统，还是实现基本的地理编码和地图服务，ArcGIS Server都能提供高效的支持。 #### 六、ArcGIS Server版本演进 随着技术的不断进步，ESRI持续对ArcGIS Server进行升级优化。从最初的...
基于AO的ArcGIS二次开发——地图操作
需要大量、批量出图者的福音、批量出图工具集成：支持多个mxd文件批量出图、支持单个mxd文件批量分图斑出图（自动更改图件标题等要素）、支持多个mxd文件按照图层出图！
基于AO的ArcGIS二次开发——ArcGIS控件开发实例，基于AO的ArcGIS二次开发——ArcGIS控件开发实例，基于AO的ArcGIS二次开发——ArcGIS控件开发实例。
1. **IMapControlDefault**：基础接口，提供了基本的地图控制操作。 2. **IMapControl2**：扩展了IMapControlDefault，增加了更多的地图操作功能。 3. **IMapControl3**：进一步增强了地图控制的功能，如地图导航、...
"ArcGIS在线地图插件升级——MapOnline v1.1：解锁更多功能！" 在这个版本中，我们可以看到MapOnline v1.1版本的ArcGIS在线地图插件升级了许多新的功能。首先，它添加了ArcGISworldImagery（无偏）地图，这个功能...
FlexViewer1.3 版本包含了基本的地图操作、图层控制、查询、工具条等元素，是学习如何集成 ArcGIS Server 服务、创建地图应用的绝佳起点。 2. **源码分析** - **配置文件 (configuration.xml)** 这个文件定义了...
《ArcGIS电信培训——空间分析》这一文档深入探讨了如何利用ArcGIS软件在电信行业中进行高效的空间数据分析。本文将从该文档的标题、描述、标签和部分内容中提炼关键知识点，以便于读者理解和掌握。 ### 标题与描述...
Esri提供了一个庞大的在线数据集库——ArcGIS Online，用户可以直接从中获取数据。 2. 数据管理：ArcGIS提供了强大的数据管理工具，如ArcGIS Desktop（ArcMap、ArcCatalog等），用户可以在这里编辑、清洗、转换数据...
本文将深入探讨“arcgis地图打印”这一主题，基于提供的资源——“arcgis中国工具2.3版本”，它包含了视频教程和文档，并且提供了密码。 1. **ArcGIS中国工具**：这是一个专门为处理中国地理数据而设计的插件，可能...
【ArcGIS Engine 二次开发——基础篇】 ArcGIS Engine 是一款强大的地理信息系统（GIS）开发工具，用于构建桌面、移动和Web应用。本基础篇主要介绍如何从零开始创建一个简单的地图显示程序，并添加基本的缩放和漫游...
ArcGIS Server是一款强大的地理信息系统（GIS）软件，用于发布、管理和操作地图服务。在这个设计模式中，地图分为底图和专题图层两部分，每部分都有特定的处理策略。 底图是地图的基础，提供背景信息，如卫星影像、...
**小班自动编号——ArcGIS Desktop 10插件** 在地理信息系统（GIS）中，"小班"通常指的是森林管理、土地利用调查或城市规划等领域中的最小单元。对小班进行编号是管理工作的重要环节，它能帮助我们有序地识别和记录...