[GIS] Handling points in openlayers

javascriptopenlayers-2point

I have a several hundred points that I am showing on a map. At the moment, my method of adding the points seems inefficient. I create an array using the following approach:

var features = [new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(-4.2522971 45.3447353)").transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()),{"Name":"aaa"}),
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(-4.259215 45.344827)").transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()),{"Name":"bbb"})]

and then add this array to a map-layer:

var vectors = new OpenLayers.Layer.Vector("vector", {isBaseLayer: false, projection:"EPSG:4326", styleMap:myStyle});    

vectors.addFeatures(features);
map.addLayer(vectors);

Is there are a more efficient way of displaying the points? I also want to be able to dynamically change the radius of each point separately. I'm not sure if that is something that I should consider when constructing the point. For example, I can choose the radius when constructing, but I do not know how to update it:

new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(-4.2522971 45.3447353)").transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()),{"Name":"aaa"}, {radius: 10})

Best Answer

Regarding the second part of your question you can modify a features style and then redraw the feature using the drawFeature method of the layer. Example:

feature.style.pointRadius = (feature.style.pointRadius - 1) || 50;
feature.layer.drawFeature ( feature );

Regarding the first part of your question I would assume it is more efficient to use a Geometry.Point constructor directly. I would further assume it would be better to reuse your projection but I doubt you'll notice a performance difference. Here is full source for creating random features and resizing the radius:

function addRandomMarkers(extent, layer) {
    var features, dx, dy;
    dx = extent.getWidth();
    dy = extent.getHeight();

    features = array.map($.range(0, 100), function () {
        return new ol.LonLat(extent.left + dx * Math.random(), extent.bottom + dy * Math.random());
    });
    features = array.map(features, function (item) {
        return new ol.Geometry.Point(item.lon, item.lat);
    });
    features = array.map(features, function (item, index) {
        var attributes, style;
        attributes = null;
        style = { pointRadius: Math.round(1 + index / 10) };
        return new ol.Feature.Vector(item, attributes, style);
    });

    layer.addFeatures(features);

    features[10].style.pointRadius = 50;

    setInterval(function () {
        var feature = features[10];
        feature.style.pointRadius = (feature.style.pointRadius - 1) || 50;
        feature.layer.drawFeature ( feature );
    }, 500);
}
Related Question