Clustering markers on mapbox / leaflet(mapbox/传单上的聚类标记)
问题描述
我正在尝试在 mapbox 上设置集群地图,例如 http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.388.html
I'm trying to set up a clustered map on mapbox, like http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.388.html
但他们的示例使用纯 .js 文件作为数据http://www.mapbox.com/mapbox.js/assets/realworld.388.js
But their example uses a plain .js file as data http://www.mapbox.com/mapbox.js/assets/realworld.388.js
而我唯一能从 mapbox 得到的是 .geojsonhttp://api.tiles.mapbox.com/v3/thebteam.map-w9jzcznw/markers.geojson
And the only thing I can get from mapbox is .geojson http://api.tiles.mapbox.com/v3/thebteam.map-w9jzcznw/markers.geojson
有没有办法可以将 geojson 转换为 js(定期)?还是从 mapbox 导出一个 javascript 数组?
Is there a way I can convert the geojson to js (on a regular basis)? Or export a javascript array from mapbox?
最终将我的数据切换为 CSV 并找到了解析器.如果有人需要,这是有效的代码:
ended up switching my data to CSV and finding a parser. Here's the code that worked, if anyone needs it:
var url = 'https://docs.google.com/spreadsheet/pub?key=abc123';
$.get(url, function(data) {
var addressPoints = $.csv.toArrays(data);
var map = L.mapbox.map('map', 'map-abc123').setView([20.30, 18.98], 2);
var markers = new L.MarkerClusterGroup({ showCoverageOnHover: false });
for (var i = 0; i < addressPoints.length; i++) {
var a = addressPoints[i];
var title = a[2];
var marker = L.marker(new L.LatLng(a[0], a[1]), {
icon: L.mapbox.marker.icon({'marker-size': 'small', 'marker-color': 'e8168c'}),
title: title
});
marker.bindPopup(title);
markers.addLayer(marker);
}
map.addLayer(markers);
});
推荐答案
var geojson = dataFromMapbox;
var lat;
var lng;
for(var i= 0;i<geojson.features.length;i++)
{
lat = geojson.features[i].geometry.coordinates[0];
lng = geojson.features[i].geometry.coordinates[1];
//create a marker with those values, pass it to a MarkerCluster object
}
这篇关于mapbox/传单上的聚类标记的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:mapbox/传单上的聚类标记
基础教程推荐
- 直接将值设置为滑块 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01