Heatmap in Openlayers using an XML (KML formatted)

问题:

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

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.

What I am seeing: https://imgur.com/a/u9ArEQZ

What I would like to see: https://imgur.com/ZBTmMZE

Thank you for any help I can get!

回答1:

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.

So the new code looks as follows:

        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.