Openlayers中使用XML(KML格式)字符串的热图，样式不正确 [英] Heatmap in Openlayers using an XML (KML formatted) string, styling is incorrect

问题描述

我目前正在尝试使用KML字符串在OpenLayers中创建热图.从该字符串中，我读取了功能，将它们添加到VectorSource中，然后将源添加到Heatmap层.不幸的是，当我在地图上添加热图"图层时，数据会以图钉图标显示.在OpenLayers网站上的示例文档中，位于 https://openlayers.org/en/latest/examples/heatmap-earthquakes.html?q=earthq ，热图已经混合了圆圈，这正是我想要的外观.这是我用来创建图层的代码.

I am currently attempting to create a Heatmap in OpenLayers using a KML string. From this string, I read the features, add them into a VectorSource, then add the source to the Heatmap layer. Unfortunately, when I add the Heatmap layer to the map, the data is displayed with pin icons. In the example documentation on the OpenLayers site, found at https://openlayers.org/en/latest/examples/heatmap-earthquakes.html?q=earthq, the Heatmap has blended circles which is exactly how I want mine to look. Here is the code that I use to create the layer.

       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"]，因为我看到了地图上显示的所有各种特征.样式仅仅是不正确的.这是我的屏幕上显示的图片.

I know that the input data, data["xml"] to be exact, is being displayed correctly because I see all of the various features being displayed on the map. The styling is just simply incorrect. Here is a picture of what is being displayed on my screen.

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

我希望看到的内容: https://imgur.com/ZBTmMZE

谢谢您能得到我的帮助！

Thank you for any help I can get!

推荐答案

感谢@Mike，解决方案是将要素样式设置为undefined.这样可以确保引脚不会覆盖从Heatmap图层应用的样式.

Thanks to @Mike, the solution was to set the feature styles to undefined. This ensures the pins do not override the styles that are being applied from the Heatmap layer.

因此，新代码如下:

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

该解决方案有点笨拙，但可以.

The solution feels a bit hacky, but it works.

这篇关于Openlayers中使用XML(KML格式)字符串的热图，样式不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！