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

Question

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

我正在将各种 KML 文件加载到地图中，包括一些标记，none 其中会导致问题。当光标悬停在这些标记上时，我希望这些标记发生变化，我可以通过调整 these examples.

来弄清楚这一点

但是，两者都只使用一种样式，而我希望不同的 KML 图层使用不同的样式。我尝试根据 this question.

定义然后调用我想使用的不同样式

但是我没有返回参数定义的样式。 n00b 我花了一段时间来反复试验发生了什么，但是控制台登录我的 '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);

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

Openlayers Set property to KML vector layer markers?

javascript

properties

hover

openlayers

kml

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

Openlayers Set property to KML vector layer markers?

javascript

properties

hover

openlayers

kml

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