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

Question

我对这一切都很陌生，如果这很明显，我很抱歉，但我尽我所能四处寻找解决方案，所以尽管如此：

我正在将各种 KML 文件加载到 map 中，包括一些标记，这些都不会导致问题。 当 cursor 悬停在它们上方时，我希望这些标记发生变化，我可以通过调整这些示例来弄清楚。

但是，两者都只使用一种样式，而我想要不同的 styles 用于不同的 KML 层。 我尝试定义然后调用我想根据这个问题使用的不同 styles 。

但是我没有返回我的参数定义的样式。 n00b 我花了一段时间试错了发生的事情，但是控制台登录我的“hoverStyler”function（将选择 styles）我的样式参数被返回“未定义”，无论我在哪里尝试定义它。 知道了这一点，我进入了 KML 本身并添加了我的参数（'hoverstyle'）的扩展数据，然后 function 可以用于我添加的任何标记（或路线）。

我想解决的问题是，必须将 go 放入 KML 并为每个标记定义它有点麻烦，我假设与它们都加载在一起一样，必须有一种方法来分配它们这个属性也在一起。

我只是不知道那是什么。 非常感谢任何建议！

代码：

（在 styles 中存在一定的故意冗余，以便更好地向我提供关于什么工作和不工作的反馈）

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);