我正在制作一个流传给我的应用程序。 （因为我没有时间在OpenLayers 3中重写它，我很难让它在OpenLayers 2中工作）
之前的程序员基于鼠标事件（向下/移动/向上）创建了自己的线路测量功能，我不得不在其中添加徒手画。测量工具的初始使用起作用。如果我切换到另一个绘图特征，然后切换回测量工具，我会松开标记（遮阳板图像）。
一些奇怪的事： 选择测量图标后，我得到一个默认指针，如果我点击页面上的某个位置，标记会重新出现。
继承的代码：
功能
function mouse_touch_down(event) {
if ( pin_placement_enabled || distance_measurement_enabled ) {
if (event.preventDefault) {
event.preventDefault();
}
else {
event.returnValue = false;
}
position = map.getLonLatFromPixel(event.xy);
var rdx = longitude2rdx( position.lon );
var rdy = lattitude2rdy( position.lat );
if (pin_placement_enabled) {
return place_pin(position, rdx, rdy);
}
else if (distance_measurement_enabled) {
return place_distance_marker_1(position, rdx, rdy);
}
else {
sketch_pen_down = 0;
}
}
}
function mouse_touch_move(event) {
if (distance_measurement_enabled) {
if (event.preventDefault) event.preventDefault();
else event.returnValue = false;
move_distance_marker_2(event);
} else if (sketch_pen_down)
sketch_add_point(event.xy);
}
function mouse_touch_up(event) {
if (sketch_pen_down) {
sketch_pen_down = 0;
sketch_add_label(event);
}
if (distance_measurement_enabled) {
if (event.preventDefault) {
event.preventDefault();
}
else {
event.returnValue = false;
}
if ( distance_line != 0 ) {
if ( ! lbl2drawfeature[distance_line.geometry.id] ) {
lbl2drawfeature[distance_line.geometry.id] = {};
}
/**
* @todo: save distance line and markers data
*/
lbl2drawfeature[distance_line.geometry.id].layertype = 'marker';
lbl2drawfeature[distance_line.geometry.id].mrkr1 = distance_marker_1;
lbl2drawfeature[distance_line.geometry.id].mrkr2 = distance_marker_2;
}
distance_markers.push(distance_marker_1);
distance_markers.push(distance_marker_2);
distance_marker_1 = 0;
distance_marker_2 = 0;
distance_line = 0;
distance_label = 0;
}
}
/**
* sketch function => freehand/lineControl
*/
function toggle_freeline() {
freeline_enabled = !freeline_enabled;
document.getElementById("sketchicon").style.border = (freeline_enabled ? "3px solid red" : "3px solid white");
if (freeline_enabled) {
activate_pan_and_zoom(0);
if ( ! vector_layer_id ) {
create_vector_layer();
}
freelineControl.activate();
}
else {
activate_pan_and_zoom(1);
freelineControl.deactivate();
}
}
function place_distance_marker_1(position, rdx, rdy) {
distance_marker_1_position = position;
var size = new OpenLayers.Size(21,21);
var offset = new OpenLayers.Pixel(-10, -10);
var icon = new OpenLayers.Icon("img/marker-userclick-21x21.png", size, offset);
distance_marker_1 = new OpenLayers.Marker(distance_marker_1_position, icon);
marker_layer.addMarker(distance_marker_1);
distance_marker_1_rdx = rdx;
distance_marker_1_rdy = rdy;
}
function move_distance_marker_2(event) {
position = map.getLonLatFromPixel(event.xy);
var rdx = <?=(($klic_rd_ll_x + $klic_rd_ur_x) / 2);?> + ((<?=(($klic_rd_ur_x - $klic_rd_ll_x) / 2);?> * position.lon * <?=$square_size;?>) / <?=$klic_px_width;?>);
var rdy = <?=(($klic_rd_ll_y + $klic_rd_ur_y) / 2);?> + ((<?=(($klic_rd_ur_y - $klic_rd_ll_y) / 2);?> * position.lat * <?=$square_size;?>) / <?=$klic_px_height;?>);
distance_marker_2_position = position;
var size = new OpenLayers.Size(21,21);
var offset = new OpenLayers.Pixel(-10, -10);
var icon = new OpenLayers.Icon("img/marker-userclick-21x21.png", size, offset);
if (distance_marker_2) {
distance_marker_2.moveTo(map.getLayerPxFromViewPortPx(event.xy));
} else {
distance_marker_2 = new OpenLayers.Marker(distance_marker_2_position, icon);
marker_layer.addMarker(distance_marker_2);
}
distance_marker_2_rdx = rdx;
distance_marker_2_rdy = rdy;
if (distance_marker_1) {
var distance = Math.sqrt(((distance_marker_2_rdx - distance_marker_1_rdx) * (distance_marker_2_rdx - distance_marker_1_rdx)) + ((distance_marker_2_rdy - distance_marker_1_rdy) * (distance_marker_2_rdy - distance_marker_1_rdy)));
if (distance >= 100)
distance = Math.round(distance) + "m";
else {
distance = (Math.round(distance * 10) + "m");
distance = distance.slice(0, -2) + "," + distance.slice(-2);
}
if ( ! vector_layer_id ) {
create_vector_layer();
}
if (distance_line) {
vector_layer.removeFeatures([distance_line, distance_label]);
delete lbl2drawfeature[distance_line.geometry.id];
}
distance_line = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([new OpenLayers.Geometry.Point(distance_marker_1_position.lon, distance_marker_1_position.lat), new OpenLayers.Geometry.Point(distance_marker_2_position.lon, distance_marker_2_position.lat)]));
distance_line.style = { "strokeColor": "#008030", "strokeWidth": 3 };
distance_label = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point((distance_marker_1_position.lon + distance_marker_2_position.lon) / 2, (distance_marker_1_position.lat + distance_marker_2_position.lat) / 2));
distance_label.style = { "strokeColor": "#000000", "strokeWidth": 1, "fontColor": "#000000", "labelOutlineColor": "#ffffff", "labelOutlineWidth": 4, "label": distance, "labelAlign": "cm" };
vector_layer.addFeatures([distance_line, distance_label]);
if (distance_line) {
lbl2drawfeature[distance_line.geometry.id] = {};
lbl2drawfeature[distance_line.geometry.id].lbl = distance_label.id
}
}
}
function add_label(xy, refid) {
var textpoint = Math.round( xy.length /2 ) -1;
var position = new OpenLayers.LonLat(xy[textpoint].x, xy[textpoint].y);
var label_text = prompt('Tekst voor op de kaart', '');
if (label_text) {
lbl = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(position.lon, position.lat));
lbl.style = { "strokeColor": "#000000", "strokeWidth": 1, "fontColor": "#000000", "labelOutlineColor": "#ffffff", "labelOutlineWidth": 4, "label": label_text, "labelAlign": "cm" };
vector_layer.addFeatures(lbl);
lbl2drawfeature[refid].lbl = lbl.id;
return label_text;
}
n_sketch_shapes++;
return '';
}
function toggle_distance() {
distance_measurement_enabled = !distance_measurement_enabled;
if ( pin_placement_enabled ) {
toggle_pin_placement();
}
if (!distance_measurement_enabled ) {
vector_layer.removeAllFeatures();
remove_distance_markers();
}
document.getElementById("sketchicon").style.border = (distance_measurement_enabled ? "3px solid red" : "3px solid white");
if (distance_measurement_enabled) {
activate_pan_and_zoom(0);
if ( ! vector_layer_id ) {
create_vector_layer();
}
create_marker_layer();
}
else {
if (distance_marker_2 && (!distance_marker_1)) marker_layer.removeMarker(distance_marker_2);
if (!pin_placement_enabled) activate_pan_and_zoom(1);
}
}
function toggle_drawing_item(item) {
for( var i = 0; i <= drawtype.length; i++ ) {
switch( drawtype[i]) {
case 'pin_placement':
if( pin_placement_enabled || item == 'pin_placement' ) {
toggle_pin_placement();
}
break;
case 'distance_measurement':
if( distance_measurement_enabled || item == 'distance_measurement' ) {
toggle_distance_measurement();
}
break;
case 'polyline':
if( polyline_enabled || item == 'polyline' ) {
toggle_polyline();
}
break;
case 'polygon':
if( polygon_enabled || item == 'polygon' ) {
toggle_polygon();
}
break;
case 'pointer':
if( pointer_enabled || item == 'pointer' ) {
toggle_pointer();
}
break;
case 'freeline':
if( freeline_enabled || item == 'freeline' ) {
toggle_freeline();
}
break;
case 'eraser':
if( eraser_enabled || item == 'eraser' ) {
toggle_eraser();
}
break;
}
}
return true;
}
图层和功能
var sketchSymbolizers = {
"Point": {
pointRadius: 10,
externalGraphic: "/img/marker-userclick-21x21.png",
fillColor: "white",
fillOpacity: 1,
strokeWidth: 1,
strokeOpacity: 1,
strokeColor: "#333333"
},
"Line": {
strokeWidth: 3,
strokeOpacity: 1,
strokeColor: "#666666",
},
"Polygon": {
strokeWidth: 2,
strokeOpacity: 1,
strokeColor: "#666666",
fillColor: "white",
fillOpacity: 0.3
}
};
var style = new OpenLayers.Style();
style.addRules([
new OpenLayers.Rule({symbolizer: sketchSymbolizers})
]);
var styleMap = new OpenLayers.StyleMap({"default": style});
var vector_layer = new OpenLayers.Layer.Vector(
'Vector'
, {styleMap: new OpenLayers.StyleMap({ strokeColor: '#ff4000', strokeWidth: sketch_line_width, fillOpacity: 0.2, fillColor: '#ff4000' })}
);
var freelineControl = new OpenLayers.Control.DrawFeature ( vector_layer, OpenLayers.Handler.Path, { handlerOptions: { freehand: true } });
freelineControl.events.register( 'featureadded', freelineControl, function (e) {
++freelineCtrlId;
freelineControl.typeid = 'freeline_' + freelineCtrlId;
console.log(e.feature.geometry.components);
lbl2drawfeature[e.feature.geometry.id] = {};
var lbl_location = Math.round( e.feature.geometry.components.length / 2 );
lableText = add_label( e.feature.geometry.components, e.feature.geometry.id );
lbl2drawfeature[e.feature.geometry.id].layertype = 'vector';
for( var i =0; i < e.feature.geometry.components.length; ++i ) {
console.log(e.feature.geometry.components[i]);
}
// console.log(e.feature.geometry.bounds);
// console.log(e.feature.geometry.componentTypes);
});
var navigationControl = new OpenLayers.Control.Navigation();
var keyboardDefaultsControl = new OpenLayers.Control.KeyboardDefaults;
var attributionControl = new OpenLayers.Control.Attribution;
var map = new OpenLayers.Map({
div: "maplayer",
projection: "EPSG:900913",
layers: ol_layers,
center: [0, 0],
maxExtent: [-1, -1, 1, 1],
zoom: currentzoom,
controls: [ navigationControl, keyboardDefaultsControl, attributionControl, lineControl, polygonControl, selectControl, eraserControl, freelineControl ] // , measureControl ]
});
map.events.register("zoomend", null, highlight_zoom_button);
map.events.register("mousedown", map, mouse_touch_down);
map.events.register("mouseup", map, mouse_touch_up);
map.events.register("mousemove", map, mouse_touch_move);
map.events.register("touchstart", map, mouse_touch_down);
map.events.register("touchend", map, mouse_touch_up);
map.events.register("touchmove", map, mouse_touch_move);
jQuery切换功能：
var measure_src = 'img/icon-mark-userclick-60x60.png';
var drawing_src = 'img/icon-sketch-64x64.png';
var polyline_src = 'img/polyline_60x60.png';
var polygon_src = 'img/polygon_60x60.png';
var eraser_src = 'img/eraser_60x60.png';
var pointer_src = 'img/pointer_60x60.png';
var freeline_src = 'img/freehand_60x60.png';
var measure_src = 'img/icon-mark-userclick-60x60.png';
$(document).ready( function() {
$('.draw').on( 'click', function(e) {
map.raiseLayer(map.getLayersByName('Vector')[0], map.layers.length);
switch( $(this).attr('id') ) {
case 'freelineicon':
$( '#drawbar' ).toggle();
$( '#sketch' ).attr( 'src', freeline_src );
$( '#sketch' ).css('border-style','3px solid red');
toggle_drawing_item('freeline');
activeDrawControl = 'freeline';
break;
case 'measureicon':
$( '#drawbar' ).toggle();
$( '#sketch' ).attr( 'src', measure_src );
$( '#sketch' ).css('border-style','3px solid red');
toggle_drawing_item('distance_measurement');
activeDrawControl = 'measure';
break;
case 'polylineicon':
$( '#drawbar' ).toggle();
$( '#sketch' ).attr( 'src', polyline_src );
$( '#sketch' ).css('border-style','3px solid red');
toggle_drawing_item('polyline');
activeDrawControl = 'polyline';
break;
case 'polygonicon':
$( '#drawbar' ).toggle();
$( '#sketch' ).attr( 'src', polygon_src );
$( '#sketch' ).css('border-style','3px solid red');
toggle_drawing_item('polygon');
activeDrawControl = 'polygon';
break;
case 'erasericon':
$( '#drawbar' ).toggle();
$( '#sketch' ).attr( 'src', eraser_src );
$( '#sketch' ).css('border-style','3px solid red');
toggle_drawing_item('eraser');
activeDrawControl = 'eraser';
break;
case 'pointericon':
$( '#drawbar' ).toggle();
$( '#sketch' ).attr( 'src', pointer_src );
$( '#sketch' ).css('border-style','3px solid red');
toggle_drawing_item('pointer');
activeDrawControl = 'pointer';
break;
case 'sketchicon':
activeDrawControl = 'none';
if ( $( '#sketch' ).attr( 'src' ) != drawing_src ) {
$( '#sketch' ).attr( 'src', drawing_src );
$( '#sketch' ).css('border-style','none');
}
else {
$( '#drawbar' ).toggle();
}
toggle_drawing_item('sketching');
map.raiseLayer(map.getLayersByName('Boxes')[0], map.layers.length);
break;
}
return true;
});
});
当在drawingcontrol和鼠标事件定向测量之间切换时，如何避免标记在下一次测量时不被实例化
非常感谢您的意见/评论