无需交互即可更改对象的样式

Question

当我 select 在 OpenLayers3 中点击一个地铁站时喜欢这个网站的对象时，我想在地图上画笔画 :

http://vis.oobrien.com/tube/#tongues

为此我试过了：

map.on('click', function(evt)
        {
            // Delete the overlay if it's not null

            if (overlay = 'undefined'){map.removeLayer(overlay)};

            // Remove popups
            $(popup).remove();
            popup = null;

            var coord = evt.coordinate;

            var feature = map.forEachFeatureAtPixel(evt.pixel, 
                function(feature, layer) 
                {
                    return feature;
                },null,
                function(layer) 
                {
                    return layer == vector1;
                }
                );

            spawnPopup(coord,feature);
        }
    );

function spawnPopup(coord,feature)
{

    if (feature) {

            var props = feature.getProperties();
            console.log(props);

        }

    var test = null;

    popup = $("<div class='tad_popup'><div id='tad_close_popup' onclick='destroyPopup()'></div><div id='tad_text_popup'><p>Arr&ecirc;t "+  props.num + "</p><p>"+  props.nom + "</p></div></div>");

    var test = $(props.geometry);

    var overlay = new ol.Overlay({
        element:popup
    });

    var overlay_test = new ol.layer.Vector({source: test,
                                            style: new ol.style.Style
                                            ({
                                            image: new ol.style.Circle
                                                    ({
                                                    radius: 5,
                                                    fill: new ol.style.Fill({color: 'rgba(255,100,100,0.9)'}),
                                                    stroke: new ol.style.Stroke ({color: 'rgba(255, 255, 255, 1)',width: 2})
                                                    })})});

    overlay.setPosition(coord);
    map.addOverlay(overlay);
    map.addLayer(overlay_test);

但这不是解决方案。

我能为此做什么？

非常感谢。

Geo-x

Answer 1

您可以使用 Select interaction, and then set the style property in the constructor. Or manually add a feature (that you get with forEachFeatureAtPixel in a click event handler) to a feature overlay with a custom style, like in this example: http://openlayers.org/en/master/examples/vector-layer.html

无需交互即可更改对象的样式

Change style of an object without interactions

javascript

openlayers-3