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

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

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

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

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



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

ol2.js



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>



相关内容推荐