I have a very simple setup where I have a feature vector layer on top of an OSM layer in OpenLayers 2.13.1. However, I notice that the icons of my points in the vector layer begin to 'become invisible' despite their SVG DOM bounds being positioned where the icon should be, making them sort of invisible as I zoom in.
The layer that holds my features is not overly exciting:
var ooiLayer = new OpenLayers.Layer.Vector('OOI Layer'); And here is how I create my feature vectors:
// Declared elsewhere but added for completeness sake var ooiStyle = $.extend({}, OpenLayers.Feature.Vector.style['default'], { graphicWidth: 25, graphicHeight: 25, fillOpacity:.7, externalGraphic: 'img/ooi.png' }); function add(ooi) { var wkt = new OpenLayers.Format.WKT(ooi); // The following line looks more complicated than it is. Assume the variable holds something like "POINT (31.123 34.321)" after evaluation. var wktData = ooi.entityInstancesGeometry[0].geometry.geometry.wellKnownText; var vector = wkt.read(wktData); if (ooi.entityTypeId == 14 && vector.geometry instanceof OpenLayers.Geometry.Point) this.createArea.call(this, vector.geometry.x, vector.geometry.y, ooi); else { var actualVector = new OpenLayers.Feature.Vector( latLon(vector.geometry.x, vector.geometry.y), // just a helper function that applies the correct projection if required; works as intended, so no worries here ooi, $.extend({}, ooiStyle, { title: ooi.entityName, externalGraphic: graphicFor(ooi.entityTypeId) // returns an URL to a 25x25 PNG }) ); ooiLayer.addFeatures(actualVector); } } From the looks of it, it almost appears as if the first icon on the map sets the visual bounding box for all the other icons. I've created a small example to illustrate this behavior: http://youtu.be/_axFRI6Pw1U
I am not sure what is wrong here. Any ideas are appreciated
Regards,
Manny
أكثر...
The layer that holds my features is not overly exciting:
var ooiLayer = new OpenLayers.Layer.Vector('OOI Layer'); And here is how I create my feature vectors:
// Declared elsewhere but added for completeness sake var ooiStyle = $.extend({}, OpenLayers.Feature.Vector.style['default'], { graphicWidth: 25, graphicHeight: 25, fillOpacity:.7, externalGraphic: 'img/ooi.png' }); function add(ooi) { var wkt = new OpenLayers.Format.WKT(ooi); // The following line looks more complicated than it is. Assume the variable holds something like "POINT (31.123 34.321)" after evaluation. var wktData = ooi.entityInstancesGeometry[0].geometry.geometry.wellKnownText; var vector = wkt.read(wktData); if (ooi.entityTypeId == 14 && vector.geometry instanceof OpenLayers.Geometry.Point) this.createArea.call(this, vector.geometry.x, vector.geometry.y, ooi); else { var actualVector = new OpenLayers.Feature.Vector( latLon(vector.geometry.x, vector.geometry.y), // just a helper function that applies the correct projection if required; works as intended, so no worries here ooi, $.extend({}, ooiStyle, { title: ooi.entityName, externalGraphic: graphicFor(ooi.entityTypeId) // returns an URL to a 25x25 PNG }) ); ooiLayer.addFeatures(actualVector); } } From the looks of it, it almost appears as if the first icon on the map sets the visual bounding box for all the other icons. I've created a small example to illustrate this behavior: http://youtu.be/_axFRI6Pw1U
I am not sure what is wrong here. Any ideas are appreciated
Regards,
Manny
أكثر...