Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/460.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何从开放图层中矢量图层的单个特征中删除样式?_Javascript_Openlayers - Fatal编程技术网

Javascript 如何从开放图层中矢量图层的单个特征中删除样式?

Javascript 如何从开放图层中矢量图层的单个特征中删除样式?,javascript,openlayers,Javascript,Openlayers,我正在学习JS的OpenLayers库。 我已成功设置单击事件以更改单个功能的样式。但是,我希望在单击其他地方或其他功能后删除该样式 var white = [255, 255, 255, 1]; var blue = [0, 153, 255, 1]; var width = 3; // Basic Style for the point layer const pointStyle = new ol.style.Style({ image: new ol.style.Circle(

我正在学习JS的OpenLayers库。 我已成功设置单击事件以更改单个功能的样式。但是,我希望在单击其他地方或其他功能后删除该样式

var white = [255, 255, 255, 1];
var blue = [0, 153, 255, 1];
var width = 3;

// Basic Style for the point layer
const pointStyle = new ol.style.Style({
    image: new ol.style.Circle({
        radius: width * 2,
        fill: new ol.style.Fill({
            color: blue
        }),
    }),
})
const map = new ol.Map({
    //Some Parameters
})

const points = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: './res/points.json',
        format: new ol.format.GeoJSON(),
    }),
    style: pointStyle,
    title: 'Points'
})

const myLayerGroup = new ol.layer.Group({
    layers: [boundary, points]
})
map.addLayer(myLayerGroup);

map.on('click', function(e) {
    map.forEachFeatureAtPixel(e.pixel, function(feature, layer) {
        if (feature.get('Name')) {
            if (feature.getStyle() == null) {
                layer.setStyle(pointStyle);
                feature.setStyle(); //Tried setting style to null here, didn't work
                feature.setStyle(new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: width * 2,
                        fill: new ol.style.Fill({
                            color: white //Basically points change to white here
                        }),
                    })
                }))
            }
        }
    })
})

似乎一旦我为单个元素设置了样式,即使我覆盖了整个层的样式,单个元素的样式仍然存在。我还没有找到一种方法来循环每个功能,并将它们各自的样式设置为空白。

您可以使用一个变量来记录更改的功能

let changedFeature;
map.on('click', function(e) {
    if (changedFeature)
        changedFeature.setStyle();
        changedFeature = undefined;
    }
    map.forEachFeatureAtPixel(e.pixel, function(feature, layer) {
        if (feature.get('Name')) {
            if (feature.getStyle() == null) {
                feature.setStyle(new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: width * 2,
                        fill: new ol.style.Fill({
                            color: white //Basically points change to white here
                        }),
                    })
                }))
                changedFeature = feature;
            }
        }
    })
})

非常感谢。我试图访问功能的样式并将其设置为空。但我可以这样做。非常感谢。