I want to add HeatMap customized data based in a vector (longitude, latitude, temperature). Currently I have this code:
data = new ol.source.Vector();
map = new ol.Map({
target: 'map_canvas',
layers: [
new ol.layer.Tile({
source: new ol.source.MapQuest({ layer: 'sat' })
})
],
view: new ol.View({
center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
zoom: 4
})
});
// created for owl range of data
var coord = [message.latitude, message.longitude];
var lonLat = new ol.geom.Point(coord);
var pointFeature = new ol.Feature({
labelPoint: lonLat,
weight: 20 // e.g. temperature
});
data.addFeature(pointFeature);
// create the layer
heatMapLayer = new ol.layer.Heatmap({
source: data,
radius: 50
});
// add to the map
map.addLayer(heatMapLayer);
After all these steps I cannot see any changes in the map.
Can someone help me this issue?
Answer
You have missed out only one aspect in creating the feature object.
Working fiddle: http://jsfiddle.net/GFarkas/61dafv93/.
var pointFeature = new ol.Feature({
labelPoint: lonLat,
weight: 20 // e.g. temperature
});
You defined the labelPoint
property of your feature, which isn't a default observable property and is used to label a multidimensional feature on one specific point. You have to use geometry
instead, to pass your point's coordinates to the pointFeature
object.
var pointFeature = new ol.Feature({
geometry: lonLat,
weight: 20 // e.g. temperature
});
No comments:
Post a Comment