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);
该解决方案感觉有点老套,但它确实有效。
我目前正在尝试使用 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);
该解决方案感觉有点老套,但它确实有效。