1

I need to make a heatmap with a bunch of linestrings using AngularJS and Open Layers 3. I didn't find any examples, just a question answered here but that don't worked for me! I have a service that creates all the layers on my map, I need this heatmap to be a layer, so that way I can set it visible or not. LayerService:

/**
 * Routes is the list of routes that contains the linestring
 * inside the "geom" property.
 */
LayerService.routesHeatMap = function (routes, blur, radius) {
  const centroids = [];
  routes.forEach(route => {
    const geometry = route.geom;
    if (!!geometry) {
      const point_feature = new ol.Feature({ weight: route.expansion });
      point_feature.setGeometry(new ol.geom.LineString(geometry.coordinates));
      point_feature.setProperties({ projection: "EPSG:4326" });
      centroids.push(point_feature);
    }
  });
  let vector = new ol.layer.Heatmap({
    title: 'Routes. Heatmap',
    source: new ol.source.Vector({
      features: new ol.Collection(centroids),
      overlaps: true,
      opacity: 1,
      visible: false,
      format: new ol.format.GeoJSON({
        dataProjection: 'EPSG:4326'
      })
    }),
    zIndex: 1,
    gradient: ['#007700', '#6ce200', '#efef00', '#ffff00', '#ff6600', '#ff0000'],
    blur: parseInt(blur.value, 10),
    radius: parseInt(radius.value, 10)
  });

  return vector;
};

My controller that have my map:

var blur = document.getElementById('blur');
var radius = document.getElementById('radius');
heat = LayerService.routesHeatMap(response, blur, radius);
vm.map.addLayer(heat);
Alfredo Marin
  • 195
  • 1
  • 1
  • 14
  • Heatmap works with Point geometries. Change `ol.geom.LineString` to `ol.geom.MultPoint` and it should work – Mike May 11 '20 at 15:16
  • Well, I'm not sure if this worked the way that it was suposed to work. The thing is, the heatmap is on my map now! But sems to be missing the projection (EPSG:4326). I already put it but still shows in a messed place and with all the points in the same location. Also how can I make the blur and radius work? – Alfredo Marin May 11 '20 at 17:50
  • Are `route.geom.coordinates` lon/lat or lat/lon? What is your view projection? – Mike May 11 '20 at 23:40
  • I'm not sure if its X-Y or Y-X, however I can try with a `.reverse()` and still got the same issue. I'm using the EPSG:4326 but I already tried "EPSG:4326", "EPSG:31982", "EPSG:3857" and none of that worked. Inside the `coordinates` I have my linestring, if I load this as a LineString the layer doesn't work. If I use as the new code, converting to points, it at least show the layer in the map. – Alfredo Marin May 12 '20 at 11:34

0 Answers0