Openlayers 中的热图使用 XML(KML 格式)字符串,样式不正确

Heatmap in Openlayers using an XML (KML formatted) string, styling is incorrect

我目前正在尝试使用 KML 字符串在 OpenLayers 中创建热图。从这个字符串中,我读取了特征,将它们添加到 VectorSource 中,然后将源添加到 Heatmap 层。不幸的是,当我将 Heatmap 层添加到地图时,数据显示为带有图钉图标。在位于 https://openlayers.org/en/latest/examples/heatmap-earthquakes.html?q=earthq 的 OpenLayers 站点上的示例文档中,热图具有混合圆圈,这正是我想要的样子。这是我用来创建图层的代码。

       var kmlFeatures = new ol.format.KML().readFeatures(data["xml"],{
            dataProjection : 'EPSG:4326',
            featureProjection : 'EPSG:3857'
          });

        var source = new ol.source.Vector({
            features: kmlFeatures,
            format: new ol.format.KML({
                extractStyles: false
              })
        })

        for (var i = 0; i < source.getFeatures().length; i++) {
            var feature = source.getFeatures()[i];
            var name = feature.get('name');
            feature.set('weight', parseInt(name));
            feature.set('type', "OTHER");
        }

        var vector = new ol.layer.Heatmap({
            source: source,
            blur: parseInt(15, 10),
            radius: parseInt(5, 10)
          });

        map.getMap().addLayer(vector);

我知道输入数据,准确地说是数据["xml"],显示正确,因为我看到地图上显示了所有不同的要素。样式只是不正确。这是我屏幕上显示的图片。

我所看到的:https://imgur.com/a/u9ArEQZ

我想看的:https://imgur.com/ZBTmMZE

感谢您提供的任何帮助!

感谢@Mike,解决方案是将功能样式设置为未定义。这可确保引脚不会覆盖从热图层应用的样式。

因此新代码如下所示:

        var kmlFeatures = new ol.format.KML().readFeatures(data["xml"],{
            dataProjection : 'EPSG:4326',
            featureProjection : 'EPSG:3857'
          });

        var source = new ol.source.Vector({
            features: kmlFeatures,
            format: new ol.format.KML({
                extractStyles: false
            })
        })

        for (var i = 0; i < source.getFeatures().length; i++) {
            var feature = source.getFeatures()[i];
            var name = feature.get('name');
            feature.set('weight', parseFloat(name));
            feature.set('type', "OTHER");
            feature.setStyle(undefined);
        }

        var vector = new ol.layer.Heatmap({
            source: source,
            blur: parseInt(15, 10),
            radius: parseInt(5, 10)
          });

        map.getMap().addLayer(vector);

该解决方案感觉有点老套,但它确实有效。