Openlayers 中的热图使用 XML（KML 格式）字符串，样式不正确答案

【问题标题】：Heatmap in Openlayers using an XML (KML formatted) string, styling is incorrectOpenlayers 中的热图使用 XML（KML 格式）字符串，样式不正确
【发布时间】：2018-10-26 23:41:24
【问题描述】：

我目前正在尝试使用 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);

我知道输入数据，确切地说是 data["xml"]，正在正确显示，因为我看到地图上显示了所有各种功能。样式只是不正确。这是我屏幕上显示的图片。

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

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

感谢您为我提供的任何帮助！

【问题讨论】：

来自openlayers.org/en/v4.6.5/apidoc/ol.layer.Heatmap.html "权重值的范围应为 0 到 1（超出范围的值将被限制在该范围内）" 在示例中，所有数据都在 5 到 5.9 的范围内，并减去 5在显示它之前。由于您使用的是 parseInt，因此您的数据可能是整数，并且权重设置需要除以可能的最大值以产生 0 到 1 范围内的值。但我认为这不能解释图标，大概它们已被导入从 KML 中，如果它们继续出现，它们将需要被您的代码删除。
@Mike 是的，我相信权重被归一化为 0 到 1 之间；但是，关于图标，我在 KML 文件中没有任何样式。我正在阅读 KML 文档，这就是我发现的。 “地标是 Google 地球中最常用的功能之一。它使用黄色图钉作为图标标记地球表面上的位置”。所以我相信图钉来自默认的 KML 样式。但这仍然不能解释为什么我的功能没有采用热图应该提供的样式吗？
如果“name”已经包含 0 到 1 之间的值，使用 parseInt 将始终返回权重 0，并且不会显示任何内容。您应该改用 parseFloat。
如果包含样式，它们可以覆盖图层样式。将feature.setStyle(undefined); 添加到for 循环应该会删除它们。
@Mike 我真的很感激这些建议，我会尝试一下，看看我能找到什么。

标签： javascript openlayers

【解决方案1】：

感谢@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);

这个解决方案感觉有点老套，但确实有效。

【讨论】：