来自 csv 的聚类标记与传单和杂食动物

Question

我正在尝试对使用 omnivore 和 markercluster 插件解析的 csv 数据进行聚类，但没有任何反应。当我不使用插件时，我可以看到我所有的标记，所以...

我看到了很多例子like this but they all use mapbox and I build a pure leaflet map. I've also tried this，但我的问题仍然存在。

我的控制台中只有一个 "syntax error" 用于我的 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

来自 csv 的聚类标记与传单和杂食动物

Clustering markers from csv with leaflet and omnivore

javascript

csv

cluster-computing

leaflet