Openlayers设置属性为KML矢量图层标记？

Question

我对这一切都很陌生，如果这很明显的话，我很抱歉，但我尽我所能地四处寻找解决方案，所以还是如此。

我正在将各种KML文件加载到地图中，包括那些标记，这些标记都不会引起问题。我想让这些标记在光标停留在它们上面时发生变化，我可以通过修改 这些 例子.

然而，两者都只使用一种样式，而我希望不同的KML层有不同的样式。我试着定义并调用不同的样式，我想使用的样式是按照 这个问题.

我花了点时间来试错，但在我的'hoverStyler'函数中的控制台记录（在那里会选择风格），我的风格参数被返回'undefined'，无论我在哪里尝试定义它。知道这一点后，我进入KML本身并添加了我的参数（'hoverstyle'）的扩展数据，然后该函数对我添加的任何标记（或路由）都能工作。

我希望解决的问题是，要进入KML中为每个标记定义这个东西，有点麻烦，我想同样的，既然它们都是一起加载的，那么一定也有办法把它们的这个属性都分配到一起。

我只是不知道那是什么。任何的建议都是非常感激的

代码。

(为了更好地给我反馈什么是有效的，什么是无效的，特意在样式上做了一些冗余)

var map = new ol.Map({
    layers: [
    new ol.layer.Tile({
        source: new ol.source.OSM()
    })
    ],
    target: 'map',
    view: new ol.View({
    center: ol.proj.fromLonLat([132.4903, 34.0024]),
    zoom: 4
    })
});

var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: '../static/gpx/summer3.kml',
        format: new ol.format.KML({
            extractStyles: false
        })
    }),
    style: function(feature) {
        return routeStyle;
    },
});
map.addLayer(vectorLayer);

var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: '../static/gpx/testmoo3.kml',
        format: new ol.format.KML({
            extractStyles: false,
        }),
    }),
    style: function(feature) {
        return iconStyle;
    },
});
map.addLayer(vectorLayer);

var hoverStyles = {
    'moo': new ol.style.Icon({
        anchor: [0.5, 30],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: '../static/GPX/icon/mooinb.png',
    }),
    'moo2': new ol.style.Icon({
        anchor: [0.5, 30],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: '../static/GPX/icon/moo2.png'
    }),
    'route1': new ol.style.Stroke({
        color: 'rgba(236, 26, 201, 0.5)',
        width: 5
    })
};

var routeStyle = new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: 'rgba(209,14,14,.6)',
        width: 4
    })
});

var defaultRouteStyle = new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: 'rgba(130,188,35,.6)',
        width: 4
    })
});

var iconStyle = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.5, 30],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: '../static/GPX/icon/moo7.png',                
    }),
});

var defaultIconStyle = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.5, 30],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: '../static/GPX/icon/moo.png'
    }),
});

var hoverStyleCache = {}
function hoverStyler(feature, resolution) {
    var hover = feature.get('hoverstyle');
    var geometry = feature.getGeometry().getType();
    console.log(hover);
    while (geometry === 'Point') {
        if (!hover || !hoverStyles[hover]) {
            return [defaultIconStyle];
        }
        if (!hoverStyleCache[hover]) {
            hoverStyleCache[hover] = new ol.style.Style({
                image:hoverStyles[hover],
            })
        }
        return [hoverStyleCache[hover]];
    }
    while (geometry === 'LineString') {
        if (!hover || !hoverStyles[hover]) {
            return [defaultRouteStyle];
        }
        if (!hoverStyleCache[hover]) {
            hoverStyleCache[hover] = new ol.style.Style({
                stroke: hoverStyles[hover]
            })
        }
        return [hoverStyleCache[hover]];
    }
}


var featureOverlay = new ol.layer.Vector({
    source: new ol.source.Vector(),
    map: map,
    style: hoverStyler
});

var highlight;
var hover = function(pixel) {

var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
    return feature;
});

    if (feature !== highlight) {
        if (highlight) {
        featureOverlay.getSource().removeFeature(highlight);
        }
        if (feature) {
        featureOverlay.getSource().addFeature(feature);
        }
        highlight = feature;
    }

};

Answer 1

你可以在加载特征时设置属性

var vectorLayer = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: '../static/gpx/summer3.kml',
        format: new ol.format.KML({
            extractStyles: false
        })
    }),
    style: function(feature) {
        return routeStyle;
    },
});
vectorLayer.getSource().on('addfeature', function(event) {
  event.feature.set(('hoverstyle', 'moo');
});
map.addLayer(vectorLayer);