Openlayers 2> click event doesn't doesn't trigger when using with drawfeature line
Question
Using Openlayers 2 drawline feature exemple I try to get a "click' event triggered each time you click to create a new line segment. The code works well without drawfeature line, but as soon as you add it, click event is not detected. It seems that click events are not propagated ! see code bellow pretty basic
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Draw Feature Example</title>
<link rel="stylesheet" href="files/style.css" type="text/css">
<link rel="stylesheet" href="files/style(1).css" type="text/css">
<style type="text/css">
#controlToggle li {
list-style: none;
}
p {
width: 512px;
}
/* avoid pink tiles */
.olImageLoadError {
background-color: transparent !important;
}
</style>
<script src="files/OpenLayers.js"></script>
<script type="text/javascript">
var map, drawControls;
//*****************************************************************************//
// An OpenLayer's control class for capturing click events...
//*****************************************************************************//
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
defaultHandlerOptions: {
'single': true,
'double': true,
'pixelTolerance': 0,
'stopSingle': false,
'stopDouble': false
},
handleRightClicks: true,
initialize: function (options) {
this.handlerOptions = OpenLayers.Util.extend(
{}, this.defaultHandlerOptions
);
OpenLayers.Control.prototype.initialize.apply(
this, arguments
);
this.handler = new OpenLayers.Handler.Click(
this, this.eventMethods, this.handlerOptions
);
},
CLASS_NAME: "OpenLayers.Control.Click"
});
//*****************************************************************************//
//*****************************************************************************//
function init(){
map = new OpenLayers.Map('map');
var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0?", {layers: 'basic'});
var lineLayer = new OpenLayers.Layer.Vector("Line Layer");
map.addLayers([wmsLayer, lineLayer]);
map.addControl(new OpenLayers.Control.MousePosition());
var line = new OpenLayers.Control.DrawFeature(lineLayer,
OpenLayers.Handler.Path,
{
single: true,
double: true,
stopDouble: false,
stopSingle: false
});
var lineClick = new OpenLayers.Control.Click({eventMethods:{
'click' : function (e) {
console.log('CLICK !');
},
'dblclick' : function (e) {
console.log('DBCLICK !');
}
}
});
map.addControl(lineClick);
map.addControl(line);
line.activate();
lineClick.activate();
map.setCenter(new OpenLayers.LonLat(0, 0), 3);
}
</script>
</head>
<body onload="init()">
<h1 id="title">OpenLayers 2 Draw Feature Example</h1>
<div id="map" class="smallmap"></div>
<div id="docs">
<p>With the line drawing control active, click on the map to add the points that make up your line.
Double-click to finish drawing.</p>
</div>
</body>
</html>
1 answers
solution1
0 ACCPTED 2018-05-07 07:40:14
I don't think you can have two active controls that listen to the same event.
If you want to do something on every click during drawing, you can use the OpenLayers.Handler.Path callback named 'point'.
Something like this should do the trick
var line = new OpenLayers.Control.DrawFeature(lineLayer,
OpenLayers.Handler.Path,
{
single: true,
double: true,
stopDouble: false,
stopSingle: false,
callbacks: {
point: function() {
console.log('click');
}
}
});
The callbacks object is merged with the control's default callbacks and passed to the handler.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.