arcgis地图————————基础操作

最新推荐文章于 2020-11-21 03:08:01 发布
最新推荐文章于 2020-11-21 03:08:01 发布
阅读量312 收藏
点赞数
分类专栏： ArcGis 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fan578/article/details/84217866
版权 

<!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>
不爱吃萝卜的兔子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于AO的ArcGIS二次开发——地图操作
04-19
基于AO的ArcGIS二次开发——地图操作
ArcGIS数据——欧洲.rar
06-22
该资源为为详细的欧洲数据，包括欧洲的很多国家，可以在ArcGIS中打开使用，是不错的数据哦！快来下载吧！
ArcGIS数据——世界（2）.rar
06-24
ArcGIS世界数据，包括世界主要河流、湖泊、海洋、地形等数据，十分详细，方便做科研和学习，快来下载吧！
arcgis engine 鼠标中键拖动平移地图(AE10.2.2)
01-18
实现了arcgis engine 鼠标中键拖动平移地图(AE10.2.2)，支持在放大、缩小、平移、要素选择等所有原有功能的基础上，当按下鼠标中键可以拖动地图，类似CAD操作。
ARCGIS实用工具箱——地图兴趣点POI爬取
05-19
查找区域内的所有的公交站点、学校、金融设施等等所有兴趣点！无需进行坐标转换！输出结果为点图层。 通过地图开放的接口获取某一范围内的POI数据（带有坐标信息的兴趣点，包含该类型样点的属性信息，如地址、所在行政区、公交的班次等），并通过坐标系转换、数据转换成为可以使用的ArcGIS要素类。 可用于学术研究、项目工程、地图输出等等，方便快捷。 内附使用说明，傻瓜操作一用就懂！ 要保证精度，需要限定搜索范围要素坐标系必须为国家大地2000坐标系。如果工具判断不为国家大地2000坐标系，将提示并结束进程。 使用方法 1、在ArcMAP目录中找到该工具箱所保存的位置并展开，选择高德POI双击打开。 2、在打开的工具界面填写输入参数。通过显示帮助，可以查看每个参数如何填写。填写完成后点击确定运行。参数说明如下： 范围图层（必填）：用于获取范围的图层，检索得到的点要素将在此范围图层四至形成的矩形内生成。 关键词（必填）：检索的关键词，如公交站、学校、金融设施等。 行列（必填）：检索范围划分的行列，比如行列为3，即将搜索矩形划分为3*3的范围分别进行检索。
ArcGIS Server Rest for Javascript API 学习教程-1
天下有雪的专栏
10-18 5427
大家好，前一阵子时间一直在学习ArcGIS的JS API，这个东西从08年的1.0已经发展到现在已经到了2.5版本，每个版本都推出了很多新功能，现在可以说是一个功能非常强大的GIS的js框架。它的技术是基于dojo的，所以学习它的同时连同dojo也就一块学了，一举两得啊呵呵~ 学习了一段时间之后，我觉得需要把所学到的东西进行沉淀、总结，因此从今天开始我会在我的csdn博客里发表对JsAPI学习的
4、map类和Navigation类小结
青椒炒蛋
03-11 4956
 Map类：1、概述：esri.Map类是一种容器，其中可以放置layer（图层），Graphic（），infowindow（动态信息窗口）。其在网页中可以加载到DIV中，其高度宽度位置等有DIV决定。其方法事件map.onload在第一个图层加载完成后激发，因此，onloadhandler事件经常用来初始化map的一些参数和加载图层。2、引用方式为：esri.Map(di
arcgis js 3.x实现地图上的要素查询属性信息
01-08
1.直接上代码： html, body, #map { width: 100%; height: 100%; margin: 0; padding: 0; } .esriPopup .esriPopupWrapper { box-shadow: 0 0 0.75em #777777; -webkit-box-shadow: 0 0 0.75em #777777; bo
arcgis中map属性方法
热门推荐
zxq520131422222的博客
12-28 1万+
花了财富值下载的   贡献给大家  别忘记点个赞 类: Map 描述 esri.Map类创建一个容器和为增加图层，图形，信息窗口和其它导航控件所必需的DOM结构。  地图通常使用DIV添加到页面。地图的宽度和高度被初始化为DIV容器的宽度和高度。  第一个图层添加到地图后，Map.onLoad事件被触发。此时，map对象的功能可以完全使用了。Map.onLoad的
ArcGIS数据——世界（1）.rar
06-24
该资源为ArcGIS关于世界的数据，包括人口、政区图、交通等数据，十分详细，可以以用来进行科研，快下载吧！
Arcgis中map属性方法
vaecer
01-28 4478
类: Map 描述 esri.Map类创建一个容器和为增加图层，图形，信息窗口和其它导航控件所必需的DOM结构。  地图通常使用DIV添加到页面。地图的宽度和高度被初始化为DIV容器的宽度和高度。  第一个图层添加到地图后，Map.onLoad事件被触发。此时，map对象的功能可以完全使用了。Map.onLoad的处理函数应该可以用来添加地图内容，改变地图行为了。 
ArcGIS JS 学习笔记4 实现地图联动
06-20 301
1.开篇 守望屁股实在太好玩了，所以最近有点懒，这次就先写个简单的来凑一下数。这次我的模仿目标是天地图的地图联动。 天地的地图联动不仅地图有联动，而且鼠标也有联动，我就照着这个目标进行山寨。 2.准备 地图联动其实就是当一张的extent发生了变化，另一张图的extent也要同步变化，这样就可以两张图的范围同步了。同理，这样就可以扩展到N张图进行联动。...
在arcgis javascript 的sdk中 地图自动居中和放大 到一个graphic的位置.并且自动打开InfoWindow
shileimohan的专栏
06-08 3129
原文链接：http://blog.csdn.net/remote_roamer/article/details/47806647 if (graphic.geometry.type === 'point') { maxZoom = map.getMaxZoom(); //缩放和居中 var maxZoom = self._map.getMaxZoom();
Create web map from id.html
weixin_42193179的博客
01-22 178
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;meta name="viewport" content="initial-scale=1, max
ArcGIS Server 9.3 JavaScript API实战（二）----一个具体的小系统示例介绍
天天好心情
11-26 4397
<br /><br />这个系统是学习ArcGIS Server 9.3 JavaScript API过程中慢慢做起来的，算是我学习的一个见证。先给个图，看看模样：<br />在数据库中存储人员信息，其中包括人员经纬度坐标；在地图上可以根据人员坐标进行定位；可以进行人员信息删改，添加。<br />相关配置是：SQLServer 2005 + JDK1.6+Tomcat 6+ArcGIS Server 93。<br />整个系统基本上分两部分：数据库库操作和地图操作。数据库部分没什么可说的，就是简单的数据插入
python 实现对地图的点击_python使用folium库绘制地图点击框
weixin_39861955的博客
11-21 242
python使用folium 库生成地图网页的具体代码，供大家参考，具体内容如下folium 官网import foliumimport pandas as pddef mark_map(data):"""带有标注的地图:param data::return:"""# 地图制作myMap = folium.Map(location=[20, 0], tiles="Mapbox Bright", z...
ArcGIS基本操作
gangganggood的专栏
04-27 5780
1、影像格式的转换 例如把jpg格式转换为tiff格式。可以在arctoolbox中的conversiontools-->toRaster-->RastertoOtherFormatmultiple)。 2、矢量化准备 矢量化前建立一个.mxd工程文件,该文件为索引文件，记录的是所有图层的相对路径和图层渲染标注等信息。然后通过arcaltalog建立点线面图层...
arcgis学习指南——arctoolbox下载网盘
最新发布
05-16
作为兼容多种数据格式的GIS软件ArcGIS，在使用时需要用到各种工具来完成数据处理，其中arctoolbox是其中一个强大的工具。针对初学者，可以通过网盘下载arctoolbox来提高学习效率。 首先，我们可以在百度网盘、天翼...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值