openlayers2.13 地图绘点[点可以拖动,并且实时更新后台数据]，测距同时更新数据到数据库
2024-05-20 08:03:49
上图为最终效果，主要是实现以下几个功能
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();//从要素中删除popupf.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" οnclick="$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" οnclick="$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" οnclick="$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" οnclick="$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" οnclick="$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" οnclick="$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" οnclick="$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" οnclick="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" οnclick="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" οnclick="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" οnclick="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" οnclick="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" οnclick="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>openlayers2.13 地图绘点[点可以拖动,并且实时更新后台数据]，测距同时更新数据到数据库相关推荐
- python数据展示平台_Python获取各大地图平台经纬度数据，哪家的数据最准确？
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理 以下文章来源于菜J学Python ,作者J哥 前言 不知道大家会在什么场合使用地图 ...
- python获取地图上经纬度_Python获取各大地图平台经纬度数据，哪家的数据最准确？...
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理 以下文章来源于菜J学Python ,作者J哥 前言 不知道大家会在什么场合使用地图 ...
- 关于python数据的纬度_Python获取各大地图平台经纬度数据，哪家的数据最准确？...
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理 以下文章来源于菜J学Python ,作者J哥 前言 不知道大家会在什么场合使用地图 ...
- druid删除数据_Apache druid 删除数据流程 0.13
背景 由于前端时间数据导入出现问题,导致druid 中的数据需要重新导入,但又要防止数据重复,需要把数据彻底清理. 问题 由于druid 属于时间序列数据库,删除的时候只能时间范围删除. 删除流程 根 ...
- FullCalendar 六：FullCalendar应用——拖动与实时保存
我们可以使用FullCalendar建立一个非常强大的日历程序,用户可以轻松的在FullCalendar操作日程安排,诸如新建.修改.删除等操作以及本文将要讲解的拖动.缩放日程事件. 查看演示DEMO ...
- 13万张表+数亿行代码，迁移只需数小时，还是异构数据库
摘要:而对企业来说,构建统一的数据底座,才能让数据供应和业务端更高效.更安全.更易共享.随着技术的日新月异,上云已非难事,但异构数据库(转换数据库类型)迁移上云在业界仍是一个巨大的挑战. 本文分享自华 ...
- 从数据仓库到大数据平台再到数据中台（内附13张架构图）
现在,数据的新名词层出不穷,顶层的有数字城市.智慧地球.智慧城市.城市大脑-企业层面的有数字化转型.互联网经济,数字经济.数字平台- 平台层面的有物联网,云计算,大数据,5G,人工智能,机器智能,深度 ...
- python爬取地图地址_python爬取了高德地图一些地点的数据，爬出来数据大致情况如下：...
python爬取了高德地图一些地点的数据,爬出来数据大致情况如下: 下面是基本流程: 1.注册成为高德地图API开发者,网址http://lbs.amap.com/(主要是获取自己的keywords ...
- 11.（地图数据篇）OSM数据如何下载使用
地图之家总目录(订阅之前请先查看该博客) 地图之家:cesium+leaflet+echart+地图数据+地图工具等相关内容的介绍 实现需求点: 一.Openstreetmap下载数据 二.找出数据中 ...
最新文章
- “私有云”安全的“过渡”时期-“云朵”方案的设计思路
- 《当程序员的那些狗日日子》（五）工作中，工作外
- SAP FICO hande汉得培训资料---II 应收模块篇 PDF 电子版
- Athentech Perfectly Clear中文版
- redis安装，主从集群
- windows切换git账号
- linux与python客户端,LINUX平台下DM7与Python的适配
- mysql查询女生的成绩_MySQL 统计查询实现代码
- Linux查看和注销用户
- Maven--可选依赖
- Unity DOTS在hybird renderer v2 中rendermesh不显示
- kettle实现颗粒度转换
- 贴片钽电容封装及规格和参数资料
- 面对台风“烟花”，旅行延误会如何赔付？
- FPGA 之 时序分析
- 如何阅读AI顶会论文？
- 【单片机毕业设计】【mcuclub-cl-017】基于单片机的路灯的设计
- Ubuntu20.04 ros安装 摄像头
- mac Vue项目解决内存溢出
- ubantu14.4源更换