openlayers2.13 地图绘点[点可以拖动,并且实时更新后台数据],测距同时更新数据到数据库

上图为最终效果,主要是实现以下几个功能

1地图上的坐标拖拽同时更新后台对应的经纬度。

2每个坐标的淡入弹出层支持对该坐标其它属性的修改。【手动修改校正】

3支持划线测距,将多个坐标之间的距离实时保存到后台。【系统自动校正】,坐标与坐标之间可以不为一条直线,最终保存的是一条直线或者多条直线的距离。

  先需要引入openlayers2.13 和下面几个js文件

ol2.js

var SHADOW_Z_INDEX = 10;
var MARKER_Z_INDEX = 11;

var DIAMETER = 200;
var NUMBER_OF_FEATURES = 15;

var synFun = function(oX,oY,nX,nY){};

var updateDistanceFun = function(X,Y,distance){};
var timer = null;// 定时器函数,鼠标移入移出时使用
var _total_point = new Array();// 地图上显示的所有桩号
var _total_measure = 0.0;// 连线的总长度,单位(M),算上了起点桩号的距离,用于修改后面的桩号的里程
var _distance_measure = 0.0// 连线的总长度,单位(M), 未算上了起点桩号的距离,用于页面上显示点与点之间的距离
$dswork.map.v = {
	map:null,
	x:0,
	y:0,
	ll:null,
	zoom:0,
	minzoom:3,
	maxzoom:17,
	
	popups:[],
	
	icon:null,
	currntDrag:null,// 当前移动的Drag对象
	currntDragX:0,// 当前移动的Drag对象的最初经度
	currntDragY:0,// 当前移动的Drag对象的最初纬度
	
	measureControls:null,
	markers:null,//点
	vector:null,
	startSgin:null,//起点桩号
	
	zoombox:null,
	xy:new OpenLayers.Projection("EPSG:3857")
};
$dswork.map.controls = {
	draws:null,//绘制点线面
	measures:null,//量算点线面的距离或面积
	selects:{select:null},
	x:null,
	use:function(v, o){
		$dswork.map.clearControls();
		try{var m = o[v];if(m){m.activate();$dswork.map.controls.x = m;}}catch(ex){}
	},
	draw:   function(v){$dswork.map.controls.use(v, $dswork.map.controls.draws);},
	measure:function(v){$dswork.map.controls.use(v, $dswork.map.controls.measures);},
	select: function(v){$dswork.map.controls.use(v, $dswork.map.controls.selects);}
	
};


$dswork.map.events = {
	featureselected:function(x){}
	,featureunselected:function(x){}
};

  $dswork.map.style = {
		getStyle:     function(){return {pointRadius:5,strokeColor:"#319730",strokeOpacity:1,strokeWidth:3,fillColor:"#acd5f6",fillOpacity:0.8,externalGraphic:getRootPath()+'/images/monitor_ico.png',graphicWidth:21,graphicHeight:25,graphicXOffset:-10,graphicYOffset:-25};}
		,getSelect:   function(){return {pointRadius:5,strokeColor:"#0000ff",strokeOpacity:1,strokeWidth:3,fillColor:"#948EF5",fillOpacity:0.8,externalGraphic:getRootPath()+'/images/marker-red.jpg',graphicWidth:21,graphicHeight:25,graphicXOffset:-10,graphicYOffset:-25,cursor:"pointer"};}
		,getTemporary:function(){return {pointRadius:5,strokeColor:"#ff0000",strokeOpacity:1,strokeWidth:3,fillColor:"#948EF5",fillOpacity:0.8};}
		,clear:function(o){o.externalGraphic=null;o.graphicWidth=null;o.graphicHeight=null;o.graphicXOffset=null;o.graphicYOffset=null;return o;}
	};
  

$dswork.map.load = function(o){
	var v = $dswork.map.v;
	var styleMap;
	v.x = o.x;
	v.y = o.y;
	v.zoom = o.zoom;
	if(o.minzoom){
		v.minzoom = o.minzoom;
	}
	if(o.maxzoom){
		v.maxzoom = o.maxzoom;
	}
	
	var options = {
			units:"m"
			//,projection:new OpenLayers.Projection("EPSG:3857")//900913以米作为xy,4326以经纬度作为xy
			,displayProjection:new OpenLayers.Projection("EPSG:3857")
			,controls:[]
			,minzoom:v.minzoom
			,maxzoom:v.maxzoom
		};
	
	var deStyle = new OpenLayers.Style($dswork.map.style.getStyle());
	deStyle.addRules(new OpenLayers.Rule({
		symbolizer:{graphic:true,label:"${label}",labelSelect:true,externalGraphic:"./sdk/ol2/img/marker-gold.png"},
		filter:new OpenLayers.Filter.Comparison({type:"==",property:"label",value:"p0"})
	}));
	
	styleMap = new OpenLayers.StyleMap({"default":deStyle,"select":$dswork.map.style.getSelect(),"temporary":$dswork.map.style.getTemporary()});
	v.icon = new OpenLayers.Icon('./css/images/marker_sprite.png',new OpenLayers.Size(21,25),new OpenLayers.Pixel(-10, -25));//Pixel根据实际的图片作定位偏移,默认图片左上角
	
    var bounds = new OpenLayers.Bounds(118.308865, 29.162737665, 120.87086111999999, 30.602299050000003);  //设置地图边界
	var map = v.map = new OpenLayers.Map("map", options);
    var wms_layer = new OpenLayers.Layer.WMS("Base layer", "http://121.199.2.100:18080/geoserver/HzMap2015/wms",
            {
                layers: ["HzMap2015:HzMapGroups"], format: 'image/png' // 叠层
            });
    map.addLayers([ wms_layer ]);
	map.zoomToExtent(bounds);
	//重载地图方法,用于限制图层缩放级
	map.isValidZoomLevel = function(zoomLevel) {
		var valid = ( (zoomLevel != null) && (zoomLevel >= this.options.minzoom) && (zoomLevel <= this.options.maxzoom) );
		return valid;
	};
	map.getNumZoomLevels = function(){return this.options.maxzoom+1;};
	map.getMinZoom = function(){return this.options.minzoom;};
	
	
    //添加wms图层
    var markers = $dswork.map.v.markers = new OpenLayers.Layer.Markers("Markers", {styleMap:styleMap});//放置点图层
	//map.addLayer(markers);
	var vector = $dswork.map.v.vector = new OpenLayers.Layer.Vector('Vector', {styleMap:styleMap});//标注点线面图层
	map.addLayer(vector);
    
    
	$dswork.map.controls.selects.select = new OpenLayers.Control.SelectFeature(vector, {
		clickout:true, toggle:false, multiple:false, hover:false, highlightOnly:false, box:false
		,onSelect:function(evt){return $dswork.map.events.featureselected(evt);}
		,onUnselect:function(evt){return $dswork.map.events.featureunselected(evt);}
	});
	$dswork.map.controls.selects.selectHover = new OpenLayers.Control.SelectFeature(vector, {
		clickout:true, toggle:false, multiple:false, hover:true, highlightOnly:true, box:false
	});
	$dswork.map.v.map.addControl($dswork.map.controls.selects.select);
	$dswork.map.v.map.addControl($dswork.map.controls.selects.selectHover);
	$dswork.map.controls.selects.selectHover.activate();
	
	//定义画点,线,面的对象.activate()激活绘画,.deactivate()禁用绘画
	var c_draws = $dswork.map.controls.draws = {
		point:new OpenLayers.Control.DrawFeature($dswork.map.v.vector, OpenLayers.Handler.Point)
		,polyline:new OpenLayers.Control.DrawFeature($dswork.map.v.vector, OpenLayers.Handler.Path)
		,polygon:new OpenLayers.Control.DrawFeature($dswork.map.v.vector, OpenLayers.Handler.Polygon)
		,drag:new OpenLayers.Control.DragFeature($dswork.map.v.vector, {
		    autoActivate: true,
		    // 添加悬浮层,用于显示改桩号的信息
		    onEnter: function (feature) {   
		    	
				var enterPoint = $dswork.map.getPointByLonLat(feature.geometry.x, feature.geometry.y);
				var p = $dswork.map.createPopup(null, new OpenLayers.LonLat(enterPoint.x, enterPoint.y), new OpenLayers.Size(0,20), "", false);
				p.autoSize = true;
				
				p.setContentHTML(
					"<div style='border:#999 solid 1px;padding:3px;' >" +
						"<form id='f_"+enterPoint.id+"' method='post' action='"+getRootPath()+"/property/sign/edit' >"+
						"<table >"	+
						"<tr hidden='hidden'>" +
								"<td class=w20'>ID<td>"+
								"<td><input class='easyui-textbox input' type='text' name='id' style='height:27px; width:120px' value="+enterPoint.id+"></input></td>"+
							"</tr>"	+	
							"<tr>" +
								"<td class=w20'>桩号<td>"+
								"<td><input class='easyui-textbox input' type='text' name='stakeNo' style='height:27px; width:120px' value="+enterPoint.stakeNo+"></input></td>"+
							"</tr>"	+	
							"<tr>" +
								"<td class=w20'>桩号+<td>"+
								"<td><input class='easyui-textbox input' type='text' name='addKilometer' style='height:27px; width:120px' value="+enterPoint.addKilometer+"></input></td>"+
							"</tr>"	+	
							"<tr>" +
								"<td><input class='easyui-textbox input' type='submit'  style='height:27px;' ></input></td>"+
							"</tr>"	+
							"</table>"	+	
						"</form>"+
					"</div>");
				$dswork.map.v.map.addPopup(p);
				
				$("#f_"+enterPoint.id).hover(function(){
					clearTimeout(timer);
				},function(){
					timer =  setTimeout(function(){$dswork.map.clearPopups();}, 500);
				});
				
				// 监听该点的表单提交事件
				$("#f_"+enterPoint.id).form({
					success:function(data){
						data = eval('(' + data + ')');
						
						$.messager.alert('提示', data.msg, 'info');
						
						enterPoint.stakeNo = data.datas.stakeNo;
						enterPoint.addKilometer = data.datas.addKilometer;
						$dswork.map.updatePoint(enterPoint);
					}
				});
		    },
		    onLeave: function (feature) {   
		    	// 0.5秒关闭弹出桩号信息
		    	timer =  setTimeout(function(){$dswork.map.clearPopups();}, 500);
		    },
		    onStart: function (ft, pixel) {            
		    	currntDragX = ft.geometry.x;
		    	currntDragY = ft.geometry.y;
		    },
		    // 当拖拽执行完毕,鼠标即将离开矢量要素时执行该函数。
		    onComplete: function (feature) {   
		    	
		    	var oX=currntDragX;
		    	var oY=currntDragY;
		    	var nX=feature.geometry.x;
		    	var nY=feature.geometry.y;
		    	synFun(oX,oY,nX,nY);// 钩子函数
		    }
		})
	};
	
	map.addControl(c_draws.point);
	map.addControl(c_draws.polyline);
	map.addControl(c_draws.polygon);
	map.addControl(c_draws.drag);
	//map.addControl(new OpenLayers.Control.ModifyFeature($dswork.map.v.vector));
	
	//定制拖动地图对象的操作类。激活可以拖动地图上的要素,到指定位置。
	c_draws.drag.activate();
	
	styleMap = new OpenLayers.StyleMap({"default":$dswork.map.style.clear($dswork.map.style.getStyle())});
	//定义测量距离和面积的对象
	var c_measures = $dswork.map.controls.measures = {
		polyline:new OpenLayers.Control.Measure(OpenLayers.Handler.Path, {persist:true,handlerOptions:{layerOptions:{styleMap:styleMap}}})//layerOptions:{renderers:renderer}
		,polygon:new OpenLayers.Control.Measure(OpenLayers.Handler.Polygon, {persist:true,handlerOptions:{layerOptions:{styleMap:styleMap}}})
	};
	
	c_measures.polyline.events.on({"measurepartial":function(f){
			var arr = f.geometry.getVertices();
			var c_x = arr[arr.length -2].x;
			var c_y = arr[arr.length -2].y;
			var m = arr[arr.length-1];
			
			if(arr.length == 2){
				$dswork.map.clearPopups();//第一次绘制,清空旧的
				// 找到点击并且重合的桩号,获取桩号当前的桩号和桩号+,方面后面测距的时候做计算
				startSgin = $dswork.map.checkPoint(c_y, c_x);
				if(startSgin!=null){
					var SginStart = $dswork.map.getPointByLonLat(startSgin.x, startSgin.y);
					var km = parseInt(SginStart.stakeNo)*1000;// 千米
					var m = parseInt(SginStart.addKilometer);// 米
					_total_measure = km+m;
				}else{
					$.messager.alert('Info', "请准确选择一个起点桩号", 'info');
					$dswork.map.measureLength();
				}
			}
			
			if(arr.length > 2){ 
				
				var s_x = arr[arr.length -3].x;// 用于算出最近两个点之间的距离
				var s_y = arr[arr.length -3].y;// 用于算出最近两个点之间的距离
				var fs = $dswork.map.v.vector.features;// 地图上标注的所有点
				if(fs.length>2){
					_total_measure += Math.round(getDistance(s_y, s_x, c_y, c_x));
					_distance_measure += Math.round(getDistance(s_y, s_x, c_y, c_x));
					var checkSign = $dswork.map.checkPoint(c_y, c_x);
					if(checkSign!=null){
						
						updateDistanceFun(checkSign.x, checkSign.y, Math.round(_total_measure));
					}
				}
			}
			var units = f.units;
			var measure = f.measure; // 测量的距离 
			//var rs = units == "m" ? measure.toFixed(0) : measure.toFixed(1);
			var rs = _distance_measure;
			var p = $dswork.map.createPopup(null, new OpenLayers.LonLat(m.x, m.y), new OpenLayers.Size(0,20), "", false);
			p.autoSize = true;
			p.setContentHTML("<div style='border:#999 solid 1px;padding:3px;'>" + (arr.length == 2 ? "起点" : (rs + " " + (units == "m" ? "米" : "公里"))) + "</div>");
			$dswork.map.v.map.addPopup(p);
			
	},"measure":function(f){
			var arr = f.geometry.getVertices();
			var m = arr[arr.length-1];
			var units = f.units;
			var p = $dswork.map.createPopup(null, new OpenLayers.LonLat(m.x, m.y), new OpenLayers.Size(0,20), "", false)
			p.autoSize = true;
			p.setContentHTML("<div style='border:#ff0000 solid 1px;padding:3px;'>总长:<span style='color:#ff0000;'>" + _distance_measure + "</span> " + (units == "m" ? "米" : "公里") + units + "</div>");
			$dswork.map.v.map.addPopup(p);
			
			//console.log(arr);
		}});
	c_measures.polygon.events.on({"measurepartial":function(f){$dswork.map.clearPopups();}, "measure":function(f){
		var arr = f.geometry.getVertices();
		var m = arr[0];
		//var order = f.order;if(order == 2){units = "平方" + units;}// 1距离,2面积
		var p = $dswork.map.createPopup(null, new OpenLayers.LonLat(m.x, m.y), new OpenLayers.Size(0,20), "", false)
		p.autoSize = true;
		p.setContentHTML("<div style='border:#999 solid 1px;padding:3px;'>" + f.measure.toFixed(2) + " 平方" + (f.units == "m" ? "米" : "公里") + "</div>");
		$dswork.map.v.map.addPopup(p);
	}});
	
	$dswork.map.v.label = OpenLayers.Util.createDiv("handleMeasurementsID", null, new OpenLayers.Size(0,25),null,"relative",null,null);
	$dswork.map.v.map.viewPortDiv.appendChild($dswork.map.v.label);
	
	map.addControl(c_measures.polyline);
	map.addControl(c_measures.polygon);

	
	map.addControl(new OpenLayers.Control.Navigation());//鼠标导航
	map.addControl($dswork.map.v.zoombox = new OpenLayers.Control.ZoomBox());// 赋值并设置
	map.addControl(new OpenLayers.Control.PanZoomBar({position:new OpenLayers.Pixel(2,6)}));//平移缩放工具条 左上
	map.addControl(new OpenLayers.Control.MousePosition());//显示鼠标所在位置坐标  右下
	map.addControl(new OpenLayers.Control.ScaleLine());//比例尺
	map.addControl(new OpenLayers.Control.Permalink());//永久链接
	map.addControl(new OpenLayers.Control.KeyboardDefaults());//键盘
	
	$dswork.map.createPoint();
};

//清理
$dswork.map.clear = function(){
	$dswork.map.clearControls();
	$dswork.map.clearPopups();
	$dswork.map.v.vector.removeAllFeatures();
	$dswork.map.v.markers.clearMarkers();
};
$dswork.map.clearPopups = function(){
	$dswork.map.clearLayerPopups();
	$dswork.map.clearMapPopups();
};
$dswork.map.clearMapPopups = function(){
	var v = $dswork.map.v;
	for(var i = 0; i < v.popups.length; i++){
		var p =  v.popups[i];
		try{v.map.removePopup(p);}catch(ex){}
	}
	v.popups.length = 0;
};
$dswork.map.clearLayerPopups = function(){
	var r = $dswork.map.v.vector,f;
	if(r.selectedFeatures != null) {
		var n = 0;
		while(r.selectedFeatures.length > n) {
			f = r.selectedFeatures[n];
			if(f.popup != null){
				$dswork.map.v.map.removePopup(f.popup);
				f.popup.destroy();//从要素中删除popup
				f.popup = null;//设置为空
				$dswork.map.controls.selects.select.unselect(f);
			}
			else{
				++n;
			}
		}
	}
};
$dswork.map.clearControls = function(){
	if($dswork.map.controls.x != null){
		$dswork.map.controls.x.deactivate();
		$dswork.map.controls.x = null;
	}
};

$dswork.map.createPopup = function(id, ll, size, html, switchClose){
	var p = new OpenLayers.Popup(id, ll, size, html, switchClose);
	$dswork.map.v.popups.push(p);
	return p;
};

//点
$dswork.map.draw.point = function(p, o){
	$dswork.map.controls.draws.point.events.remove("featureadded");
	$dswork.map.controls.draw('point');
	$dswork.map.controls.draws.point.events.on({"featureadded":function(evt){
		var geometry=evt.feature.geometry.clone().transform($dswork.map.v.map.projection, $dswork.map.v.xy);
		if(typeof o == "function"){
			if(o('{"point":[' + geometry.x.toFixed(6) + ',' + geometry.y.toFixed(6) + ']}')){
				//$dswork.map.draw.point(p, o);
			}
			else{
				$dswork.map.controls.draws.point.deactivate();
			}
		}
		else{
			//$dswork.map.draw.point(p, o);
		}
	}});
};
//线
$dswork.map.draw.polyline = function(p, o){
	$dswork.map.controls.draws.polyline.events.remove("featureadded");
	$dswork.map.controls.draw('polyline');
	$dswork.map.controls.draws.polyline.events.on({"featureadded":function(evt){
		var geometry=evt.feature.geometry.clone().transform($dswork.map.v.map.projection, $dswork.map.v.xy);
		var v = '{"polyline":[';
		var arr = geometry.getVertices();
		for(var i = 0; i < arr.length; i++){
			v += '[' + arr[i].x.toFixed(6) + ',' + arr[i].y.toFixed(6) + '],';
		}
		v = v.slice(0, -1);
		v += ']}';
		if(typeof o == "function"){
			if(o(v)){
				//$dswork.map.draw.polyline(p, o);
			}
			else{
				$dswork.map.controls.draws.polyline.deactivate();
			}
		}
		else{
			//$dswork.map.draw.polyline(p, o);
		}
	}});
};
//面
$dswork.map.draw.polygon = function(p, o){
	$dswork.map.controls.draws.polygon.events.remove("featureadded");
	$dswork.map.controls.draw('polygon');
	$dswork.map.controls.draws.polygon.events.on({"featureadded":function(evt){
		var geometry=evt.feature.geometry.clone().transform($dswork.map.v.map.projection, $dswork.map.v.xy);
		var v = '{"polygon":[';
		var arr = geometry.getVertices();
		for(var i = 0; i < arr.length; i++){
			v += '[' + arr[i].x.toFixed(6) + ',' + arr[i].y.toFixed(6) + '],';
			//var xy = arr[i].transform($dswork.map.v.map.projection, $dswork.map.v.map.displayProjection);
		}
		v = v.slice(0, -1);
		v += ']}';
		if(typeof o == "function"){
			if(o(v)){
				//$dswork.map.draw.polygon(p, o);
			}
			else{
				$dswork.map.controls.draws.polygon.deactivate();
			}
		}
		else{
			//$dswork.map.draw.polygon(p, o);
		}
	}});
};

//面积测量
$dswork.map.measureArea = function(){
	$dswork.map.clearPopups();
	$dswork.map.controls.measure('polygon');
};
//距离测量
$dswork.map.measureLength = function(){
	
	$dswork.map.clearPopups();
	$dswork.map.controls.measure('polyline');
};

//地图初始状态
$dswork.map.reset = function(){
	$dswork.map.clear();
	$dswork.map.resetZoomLevel();
};
$dswork.map.resetZoomLevel = function(){
	var z = 0;
	if(!$dswork.map.v.map.isValidZoomLevel($dswork.map.v.zoom)){
		z = $dswork.map.v.map.options.minzoom;
	}
	else{
		z = $dswork.map.v.zoom;
	}
	$dswork.map.v.map.setCenter(
		$dswork.map.v.ll
		,z
		,true//是否触发 movestart/end事件
		,true//是否触发zoomchange事件
	);
	//$dswork.map.v.map.zoomToMaxExtent();// 缩放到最大级别
	$dswork.map.v.map.zoomTo(z);
};

//缩略图
$dswork.map.overview = function(){
	$dswork.map.v.map.addControl(new OpenLayers.Control.OverviewMap());//鹰眼 右下
};

//右上角显示地图类型切换控件
$dswork.map.switcher = function(){
	$dswork.map.v.map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));//图层切换 右上
};

//鼠标(null平移,true放大,false缩小)
$dswork.map.zoom = function(p){
	$dswork.map.clearControls();
	if(p == null){
	}
	else{
		$dswork.map.controls.x = $dswork.map.v.zoombox;
		if(p){
			$dswork.map.v.zoombox.out = false;
		}
		else{
			$dswork.map.v.zoombox.out = true;
		}
		$dswork.map.controls.x.activate();
	}
};

//绘点
$dswork.map.createPoint = function(o, func){
	if(o){
		var layer  = $dswork.map.v.vector;
		var map =$dswork.map.v.map;
		
		var center = map.getViewPortPxFromLonLat(map.getCenter());
		var features = [];
		
		features.push(
				new OpenLayers.Feature.Vector(
						new OpenLayers.Geometry.Point(o.x, o.y)
				)
		);
		
		layer.addFeatures(features);
		_total_point.push(o);
		synFun = func;// 绑定钩子函数
	}
    
	
};

//绘点
$dswork.map.caculateDistance = function(func){
	
		updateDistanceFun = func;// 绑定钩子函数
};

// 找出测距的点是否与桩号有重合,如果重合,返回对应的桩号
$dswork.map.checkPoint = function(c_y, c_x ){
	var fs = $dswork.map.v.vector.features;// 地图上标注的所有点
	
	if(fs.length>2){
		
		for(var i=0; i<fs.length; i++){
			var geometry = fs[i].geometry;
			var o_x=geometry.x;
			var o_y=geometry.y;
		
			// 两点之间的直线距离若为100 默认将改点重合为一个桩号
			if(getDistance(o_y, o_x, c_y, c_x)<=100){
				
				return geometry;
			}
		}
	}
	return null;	
};

// 测距的时候标记出桩号的起点
$dswork.map.signStart = function(data){
	var p = $dswork.map.createPopup(null, new OpenLayers.LonLat(data.lon, data.lat), new OpenLayers.Size(0,20), "", false);
	p.autoSize = true;
	p.setContentHTML("<div style='border:#999 solid 1px;padding:3px;'>起点</div>");
	$dswork.map.v.map.addPopup(p);
}

// 根据XY获取对应的桩号
$dswork.map.getPointByLonLat = function(x, y){
	if(_total_point.length>0){
		for(var i=0; i<_total_point.length; i++){
			var item = _total_point[i];
			if(x==item.x && y== item.y ){
				return item;
			}
		}
	}return null;
}

//更新前端里面桩号的信息,这里只更新前台的,后台的信息在调用该
//方法之前已经做过处理,所以不需要进行二次修改
$dswork.map.updatePoint = function(data){
	if(_total_point.length>0){
		for(var i=0; i<_total_point.length; i++){
			var item = _total_point[i];
			if(data.x==item.x && data.y== item.y ){
				_total_point[i] = data;
			}
		}
	}
}

/**测量两个坐标的直线距离 单位为M*/
function getDistance(lat1, lng1, lat2, lng2) { 
    var dis = 0;
    var radLat1 = toRadians(lat1);
    var radLat2 = toRadians(lat2);
    var deltaLat = radLat1 - radLat2;
    var deltaLng = toRadians(lng1) - toRadians(lng2);
    var dis = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(deltaLat / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(deltaLng / 2), 2)));
    return dis * 6378137;

    function toRadians(d) {  return d * Math.PI / 180;}//(米[M]为单位)
}

dswork.map.js

if(typeof ($dswork) != "object"){$dswork = {};}

$dswork.map = {};
//json字符串转JSON对象
$dswork.map.toJSON = function (jsonstr){var o;eval("o = " + jsonstr);if(o){return o;}else{return {};}};
//加载地图(p{x, y, jb, poi}中心经度,中心纬度,缩放级别,默认地图POI是否可用<POI仅百度>) 并在左上角显示缩放控件、左下角显示比例尺
$dswork.map.load = function(p){};


//清理地图上绘制的所有图形
$dswork.map.clear = function(){};

//绘制点线面
$dswork.map.draw = {
	point:function(p, fn){}//鼠标切换为绘制点工具 fn:callback(value) value={"point":[113.1,22.3]} callback返回true可画多个
	,polyline:function(p, fn){}//鼠标切换为绘制线工具 fn:callback(value) value={"polyline":[113.1,22.3],[113.2,22.2],[112.3,22.2]} callback返回true可画多个
	,polygon:function(p, fn){}//鼠标切换为绘制多边形工具 fn:callback(value) value={"polygon":[113.1,22.3],[113.2,22.2],[112.3,22.2]} callback返回true可画多个
};

//鼠标切换为面积测量工具<仅百度没有>
$dswork.map.measureArea = function(){};

//鼠标切换为距离测量工具
$dswork.map.measureLength = function(){};

//右下角显示缩略图(鹰眼)
$dswork.map.overview = function(){};

//右上角显示地图类型切换控件
$dswork.map.switcher = function(){};

//地图恢复初始状态
$dswork.map.reset = function(){};

//鼠标(null平移,true放大,false缩小)
$dswork.map.zoom = function(o){if(o==null){/*平移*/}else if(o){/*放大*/}else{/*缩小*/}};


//'{"point":[113.328488,23.240802]}';
//'{"polyline":[[113.287633,23.262567],[113.356297,23.262567],[113.396809,23.233862],[113.396466,23.213669]]}';
//'{"polygon":[[113.364880,23.198523],[113.348058,23.150233],[113.406766,23.147708],[113.431828,23.178957]]}';
//将json数组图形信息字符串显示在地图上
$dswork.map.show = function(jsonString){};


//加载地图并定位到用户城市<仅高德、百度>  并在左上角显示缩放控件、左下角显示比例尺
$dswork.map.loadmapGeo = function(){};


//定位用户<仅高德、百度>  
$dswork.map.geolocal = function(fn){};

//坐标定位p{x,y} 
$dswork.map.geoZB = function(p, fn){};


$dswork.map.creatgeometry = function(p, style, fn){};

//计算两点间距离(p{n1, e1, n2, e2}经度1、纬度1、经度2、纬度2)<百度、高德坐标单位为十进制度如:113.2333;arcgis坐标单位米> 返回值单位米
$dswork.map.distance = function(p){};

//显示信息窗体框<仅高德、百度>  p{html,x,y,width}
$dswork.map.showInfo = function(p){};

//绑定事件(对象,事件名称<click,mouseover,mouseout>,函数)
$dswork.map.bind = function(o, eventType, fn){};
//解绑事件
$dswork.map.unbind = function(eventType, o){};


jsp代码如下

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/global.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>综合平台</title>
<%@ include file="../../common/jsCss.jsp"%>
<script type="text/javascript" src="${ctx}/js/openlayers-2.13/OpenLayers.js"></script>
<script type="text/javascript" src="${ctx}/js/utils/map.js" ></script>
<script type="text/javascript" src="${ctx}/js/utils/data.js" ></script>
<script type="text/javascript" src="${ctx }/js/utils/openlayer.extends.js"></script>

<link rel="stylesheet" type="text/css" href="${ctx}/js/ol_cal_distance/sdk/ol2/theme/default/style.css" />
<%-- <link rel="stylesheet" type="text/css" href="${ctx}/js/ol_cal_distance/themes/map.css" /> --%>
<script type="text/javascript" src="${ctx}/js/ol_cal_distance/sdk/ol2/OpenLayers.js"></script>
<script type="text/javascript" src='${ctx}/js/ol_cal_distance/js/dswork.map.js'></script>
<script type="text/javascript" src='${ctx}/js/ol_cal_distance/js/mobile-drawing.js'></script>
<script type="text/javascript" src="${ctx}/js/ol_cal_distance/js/ol2/ol2.js"></script>

<style>
.mCSB_inside>.mCSB_container {
	margin-right: 0px;
}

.mCSB_scrollTools {
	width: 4px
}

.f_main_nav {
	margin: 0
}
.w100{width: 100%;height: 100%}
</style>
</head>
<body>
	<c:set var="index" value="3"></c:set>
	<c:set var="subIndex" value="9"></c:set>
	<%@ include file="../../common/header.jsp"%>
<div >
	<div style="width:300px;z-index:100;position:absolute;left:80px;top:220px;background-color:#c7c5c5;opacity:0.7;">
		<span title="平移"><input type="button" onclick="$dswork.map.zoom()" style="background: url('${ctx}/js/ol_cal_distance/themes/img/PanTool.png'); border-style: none; height: 32px; width: 32px;"/></span>
		<span title="放大"><input type="button" onclick="$dswork.map.zoom(true)" style="background: url('${ctx}/js/ol_cal_distance/themes/img/ZoomInTool.png'); border-style: none; height: 32px; width: 32px;"/></span>
		<span title="缩小"><input type="button" onclick="$dswork.map.zoom(false)" style="background: url('${ctx}/js/ol_cal_distance/themes/img/ZoomOutTool.png'); border-style: none; height: 32px; width: 32px;"/></span>
		<span title="清理"><input type="button" onclick="$dswork.map.clear()" style="background: url('${ctx}/js/ol_cal_distance/themes/img/GenericEraser.png'); border-style: none; height: 32px; width: 32px;"/></span>
		<span title="初始状态"><input type="button" onclick="$dswork.map.reset()" style="background: url('${ctx}/js/ol_cal_distance/themes/img/RotatingGlobe.png'); border-style: none; height: 32px; width: 32px;"/></span>
<%-- 		<span title="长度测量"><input type="button" id="distance" onclick="$dswork.map.measureLength()" style="background: url('${ctx}/js/ol_cal_distance/themes/img/MeasureTool.png'); border-style: none; height: 32px; width: 32px;"/></span> --%>
<%-- 		<span title="面积测量"><input type="button" onclick="$dswork.map.measureArea()" style="background: url('${ctx}/js/ol_cal_distance/themes/img/MeasureAreaTool.png'); border-style: none; height: 32px; width: 32px;"/></span> --%>
<%-- 		<span title="画点"><input type="button" onclick="point1(true)" style="background: url('${ctx}/js/ol_cal_distance/themes/img/ElementMarker32.png'); border-style: none; height: 32px; width: 32px;"/></span> --%>
<%-- 		<span title="画单点"><input type="button" onclick="point1(false)" style="background: url('${ctx}/js/ol_cal_distance/themes/img/ElementMarker32.png'); border-style: none; height: 32px; width: 32px;"/></span> --%>
<%-- 		<span title="画线"><input type="button" onclick="polyline1(true)" style="background: url('${ctx}/js/ol_cal_distance/themes/img/EditingAddStraightSegmentTool32.png'); border-style: none; height: 32px; width: 32px;"/></span> --%>
<%-- 		<span title="画单线"><input type="button" onclick="polyline1(false)" style="background: url('${ctx}/js/ol_cal_distance/themes/img/EditingAddStraightSegmentTool32.png'); border-style: none; height: 32px; width: 32px;"/></span> --%>
<%-- 		<span title="画面"><input type="button" onclick="polygon1(true)" style="background: url('${ctx}/js/ol_cal_distance/themes/img/EditingEditShape32.png'); border-style: none; height: 32px; width: 32px;"/></span> --%>
<%-- 		<span title="画单面"><input type="button" onclick="polygon1(false)" style="background: url('${ctx}/js/ol_cal_distance/themes/img/EditingEditShape32.png'); border-style: none; height: 32px; width: 32px;"/></span> --%>
	</div>
	

	<div class="w100 fl " id="map" width="100%" height="80%" style="position: fixed;top:220px;">
    </div>

	<div id="toolbar" style=" position:absolute; width:100%; padding:10px 0;border:none;border-bottom:#ddd solid 1px;"  >
    	<div class="fl pl">
            <em>路线</em>
            <div class="input">
	            <select class="easyui-combobox"  id="s_roadCode"  name="roadCode" data-options="panelHeight:'auto',valueField:'code',textField:'code',url:'${ctx}/property/road/getAll'" style="height:27px; width:100%">
	            </select>
            </div>
            <em>路段</em>
            <div class="input">
	            <select class="easyui-combobox input"  id='s_sectionId'  name="sectionId" data-options="panelHeight:'auto',valueField:'id',textField:'name'" style="height:27px">
	            </select>
            </div>
            <em>方向</em>
            <div class="input">
	            <select class="easyui-combobox input" name="direction"  id = "direction" data-options="panelHeight:'auto'" style="height:27px">
	                <option value="1">上行</option>
	                <option value="2">下行</option>
	            </select>
            </div>
            <a href="javascript:void(0);"  class="btn blue1" id="query"><i class="icon-search ico_r"></i>查询</a>
        </div>
        <div class="fr pr">
            <a href="javascript:startSign();" class="btn green"><i class="icon-play ico_r"></i>开始标记</a>
            <a href="javascript:endSign();" class="btn gules"><i class="icon-stop ico_r"></i>结束标记</a>
<!--             <a href="javascript:void(0);" class="btn blue"><i class="icon-save ico_r"></i>批量保存</a> -->
        </div>
    </div>
    
</div>   
<!--main END-->
<!--增加-->
<div id="add" class="easyui-window" title="新增标志" data-options="closed:true,collapsible:false,minimizable:false,modal:true,maximizable:false,href:'FlagAdd.php',footer:'#ft'" style="width:60%;height:600px; padding:15px"></div>
<div id="ft" style="text-align:center; padding:10px 0">
    <a href="javascript:void(0);" class="window_btn green"><i class="icon-save ico_r"></i>保存</a>
</div>
<!--增加 END-->
<script type="text/javascript" src="${ctx }/js/zcits.js"></script>
<script>
	var mNow = 5;
	var signArr = {};// 当前地图显示的图标集合
$(function() {
	$('#distance').unbind("click");// 默认不开启测距功能
	
	$('#content').height($('body').height()-260);
	$(window).resize(function(){
		$('#content').height($('body').height()-260);
	});
	function fixWidth(percent)  
	{  
	    return document.body.clientWidth * percent ; 
	}  
	$(window).resize(function(){  
		$('#tt').datagrid('resize'); 
	}); 
	 
	
	$("#s_roadCode").combobox({onChange : function(n,o){
       	$.get('${ctx}/property/section/selectByRoad', { "roadCode": n }, function (data) {  
              $("#s_sectionId").combobox("clear");
              $("#s_sectionId").combobox('loadData', data);  
              
          }, 'json'); 
		}
	});
	
	$("#query").click(function(){  
		var roadCode = $("#s_roadCode").combobox('getValue');
		if(roadCode == null || roadCode == "") {
			$.messager.alert('提示', "请选择路线", 'info');
			return;
		}
		var sectionId = $("#s_sectionId").combobox('getValue');
		if(sectionId == null || sectionId == "") {
			$.messager.alert('提示', "请选择路段", 'info');
			return;
		}
		var direction = $("#direction").combobox('getValue');
		if(direction == null || direction == "") {
			$.messager.alert('提示', "请选择方向", 'info');
			return;
		}
		$.ajax( {  
		    url:'${ctx}/property/sign/queryList',
		    data:{  
		    	roadCode :  roadCode,
		    	sectionId : sectionId,
		    	direction : direction
		    },  
		    type:'post',  
		    cache:false,  
		    dataType:'json',  
		    async :false,
		    success:function(data) {  
		    	$dswork.map.clear();
		    	
		    	signArr = data;
		    	if(data.length>0){
		    		var singleItem = data[0];
		    		$dswork.map.v.map.setCenter(new OpenLayers.LonLat(singleItem.lon, singleItem.lat));
		    	}
		    	$.each(data,function(index,item) {
		    		item.x = item.lon, item.y=item.lat;
			    	$dswork.map.createPoint(item, function(oX,oY,nX,nY){
			    		updateSign(oX,oY,nX,nY);
			    	});
			    	$dswork.map.caculateDistance(function(x,y,distance){
			    		 return updateDistance(x, y, distance);
			    	});
		    	})
		    	
		    	
		    },  
		    error : function() {  
		    	$.messager.alert('提示', "数据查询失败", 'info');
		    }  
		});
	}); 
});
/**
 *获取起点桩号 
 */
function getStartSign(data){
	var startSign = null;
	 if(data.length>0){
		 startSign = data[0];
		 
		 for(var i=1; i<data.length; i++){
			 var item = data[i];
			 if(getMile(startSign) > getMile(item) ){
				 startSign = item;
			 }
		 }
		 
	 }
	 return startSign;
}

function getMile(item){
	var km = parseInt(item.stakeNo)*1000;// 千米
	var m = parseInt(item.addKilometer);// 米
	return km + m;
}

function startSign(){
// 	if(signArr != null && signArr.length>0){
// 		var startSign = getStartSign(signArr);// 起点桩号
//     	$dswork.map.signStart(startSign);
// 	}
	$dswork.map.controls.measure('polyline');
}

function endSign(){
	$dswork.map.clearPopups();
}

/**
 * 更新拖动图标的位置
 * oX 旧lon, oY 旧lat, nX 新lon, nY 新lat
 */
function updateSign(oX,oY,nX,nY){
	$.post('${ctx }/property/sign/updatePosition', {
        lon : oX, lat:oY, nLon:nX, nLat:nY
    }, function(result) {
        if (result.success) {
            $.messager.alert('提示', result.msg, 'info');
        }else{
            $.messager.alert('提示', result.msg, 'info');
        }
    }, 'JSON');
}

function updateDistance(x, y, distance){
	var result = false;
	$.post('${ctx }/property/sign/updateDistance', {
        lon : x, lat:y, distance:distance
    }, function(result) {
    	if((result.result==1 )|| (result.result=='1')){
    		result = true;
    	}
    }, 'JSON');
	return result;
}
</script>

<script type="text/javascript">

//初始化地图
//$dswork.map.load({x:119.8065949,y:30.2118957,zoom:12,minzoom:3,maxzoom:17});//加载地图(x:中心经度,y:中心纬度,zoom:缩放级别,poi:默认地图POI是否可用<百度>)
$dswork.map.load({x:119.8065949,y:30.2118957,zoom:17,minzoom:3,maxzoom:17});//加载地图(x:中心经度,y:中心纬度,zoom:缩放级别,poi:默认地图POI是否可用<百度>)
$dswork.map.resetZoomLevel();
//$dswork.map.overview();

//console.log(getDistance(28.279956, 112.885267, 28.234266, 112.945393));
//init();

//绘制点
function point1(x){
	$dswork.map.clear();
//value {"point":[113.328488,23.240802]}
	$dswork.map.draw.point({},function(value){
		var j= $dswork.map.toJSON(value);
		alert("x:" +j.point[0]+", y:"+j.point[1]);
		$id("txt").value = value;
		return x?true:false;
	});
}
//绘制线
function polyline1(x){
	$dswork.map.clear();
	var p={};
	//value ={"polyline":[[113.287633,23.262567],[113.356297,23.262567],[113.396809,23.233862],[113.396466,23.213669]]};
	$dswork.map.draw.polyline(p,function(value){
		var j= $dswork.map.toJSON(value);
		var str="";
		for(var i=0;i<j.polyline.length;i++){
			str+="x:" +j.polyline[i][0]+", y:"+j.polyline[i][1]+" ";
		}
		alert(str);
		$id("txt").value = value;
		return x?true:false;
	});
}
//绘制面
function polygon1(x){
	$dswork.map.clear();
	var p={};
	//value {"polygon":[[113.364880,23.198523],[113.348058,23.150233],[113.406766,23.147708],[113.431828,23.178957]]}
	$dswork.map.draw.polygon(p,function(value){
		var j= $dswork.map.toJSON(value);
		var str="";
		for(var i=0;i<j.polygon.length;i++){
			str+="x:" +j.polygon[i][0]+", y:"+j.polygon[i][1]+" ";
		}
		alert(str);
		$id("txt").value = value;
		return x?true:false;
	});
}

</script>
</body>
</html>

转载自:https://blog.csdn.net/bas_ball/article/details/52458067

You may also like...