I have an OpenLayers map that draws features in a vector layer. The features are selectable and have a popup on select. Unfortunately in a lot of cases the features overlap so it can be impossible to select some features. I think that what I need to do to fix this is change my select control so that it uses a click handler and searches the map for features at this point. What sort of function do i need to write? are there any examples of this being implemented before?
This is how the features are drawn:
var vector_Layer = new OpenLayers.Layer.Vector();function GetFeaturesFromKMLString (strKML) { var format = new OpenLayers.Format.KML({ 'internalProjection': new OpenLayers.Projection("EPSG:900913"), 'extranalProjection': new OpenLayers.Projection("EPSG:4326") }); return format.read(strKML);};vector_Layer.addFeatures(GetFeaturesFromKMLString('$newkml'));And this is how Layers are currently selected:
var select = new OpenLayers.Control.SelectFeature(vector_Layer, {clickout: true}); vector_Layer.events.on({ "featureselected": onFeatureSelect, "featureunselected": onFeatureUnselect}); map.addControl(select); select.activate(); select.handlers['feature'].stopDown = false; select.handlers['feature'].stopUp = false;here is the click event listener I was planning on using:
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { defaultHandlerOptions: { 'single': true, 'double': false, 'pixelTolerance': 0, 'stopSingle': false, 'stopDouble': false }, initialize: function(options) { this.handlerOptions = OpenLayers.Util.extend( {}, this.defaultHandlerOptions ); OpenLayers.Control.prototype.initialize.apply( this, arguments ); this.handler = new OpenLayers.Handler.Click( this, { 'click': this.onClick, 'dblclick': this.onDblclick }, this.handlerOptions ); }, onClick: function(evt) { //function that seachers for and selectas features at this point },
أكثر...
This is how the features are drawn:
var vector_Layer = new OpenLayers.Layer.Vector();function GetFeaturesFromKMLString (strKML) { var format = new OpenLayers.Format.KML({ 'internalProjection': new OpenLayers.Projection("EPSG:900913"), 'extranalProjection': new OpenLayers.Projection("EPSG:4326") }); return format.read(strKML);};vector_Layer.addFeatures(GetFeaturesFromKMLString('$newkml'));And this is how Layers are currently selected:
var select = new OpenLayers.Control.SelectFeature(vector_Layer, {clickout: true}); vector_Layer.events.on({ "featureselected": onFeatureSelect, "featureunselected": onFeatureUnselect}); map.addControl(select); select.activate(); select.handlers['feature'].stopDown = false; select.handlers['feature'].stopUp = false;here is the click event listener I was planning on using:
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, { defaultHandlerOptions: { 'single': true, 'double': false, 'pixelTolerance': 0, 'stopSingle': false, 'stopDouble': false }, initialize: function(options) { this.handlerOptions = OpenLayers.Util.extend( {}, this.defaultHandlerOptions ); OpenLayers.Control.prototype.initialize.apply( this, arguments ); this.handler = new OpenLayers.Handler.Click( this, { 'click': this.onClick, 'dblclick': this.onDblclick }, this.handlerOptions ); }, onClick: function(evt) { //function that seachers for and selectas features at this point },
أكثر...