javascript - 带有传单和杂食动物的 csv 聚类标记

Question

我正在尝试对使用杂食动物和标记集群插件解析的 csv 中的数据进行聚类，但没有任何反应。当我不使用该插件时，我可以看到所有标记，因此...

我看到很多例子like this但他们都使用mapbox，我构建了一个纯传单 map 。我也 tried this但我的问题仍然存在。

我的控制台中只有 csv 的“语法错误”，但这不是核心问题。

我的 csv 看起来像这样:

date,dcomiris,latitude,longitude,infra,iris,com,name
2014-01-01,600570101,49.4295880722704,2.08997269112341,7871F,Cathedrale-Universite,60057,Beauvais

我的代码现在看起来像这样:

var map = L.map('map').fitBounds([[49.072667, 1.653442],[49.737499, 3.158569]]);

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);

var points = omnivore.csv('my.csv');
// points.addTo(map);

var markers = new L.markerClusterGroup({showCoverageOnHover:false});
markers.addLayer(points);
map.addLayer(markers); 

我错过了什么？

Answer 1

关键步骤是 cited tutorial 中的 .on('ready', callback) .

Leaflet-omnivore 异步访问您的 CSV 文件，因此您的 points 变量在您将其添加到 markers 集群组时仍为空。

var points = omnivore.csv('my.csv');
//points.addTo(map);

var markers = L.markerClusterGroup({
  showCoverageOnHover: false
});

map.addLayer(markers);

points.on('ready', function () {
  console.log(points.getLayers().length)
  markers.addLayer(points);
});

演示:http://plnkr.co/edit/UJfvxQmT3OnGxFw4DtCd?p=preview