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
