Tiven Wang
Wang Tiven October 28, 2016
425 favorite favorites
bookmark bookmark
share share

Why

marker聚合在地图应用的很多场景中有着广泛使用,不同的地图提供商一般都有提供相应的marker cluster功能或插件,比较常用的如Marker Clustering plugin for Leaflet。对于百度地图在其官方开源库中也提供了聚合插件MarkerClusterer标记聚合器,但性能不尽如人意。这里我们来研究使用Mapbox的supercluster插件做百度地图上的标记聚合功能。

Procedure

Setup project

首先clone project supercluster到本地 git clone https://github.com/mapbox/supercluster.git 然后使用命令npm install下载依赖库,下载完后程序会自动生成dist文件夹,里面会有supercluster.js文件即是我们所要用的supercluster插件。

Map

由于对大数据量进行计算需要消耗比较长的CPU时间,为了不让其block住前端页面我们使用浏览器的Web worker封装计算逻辑。


// initialize baidu map
// ...

// create a web worker
var worker = new Worker('worker.js');
var ready = false;

// callback on the calculation finished
worker.onmessage = function (e) {
    if (e.data.ready) {
        ready = true;
        update();
    } else {
        markers.clearLayers();
        markers.addData(e.data);
    }
};

// when map changed update markers cluster
function update() {
    if (!ready) return;
    var bounds = map.getBounds();
    worker.postMessage({
        bbox: [bounds.getSouthWest().lng, bounds.getSouthWest().lat, bounds.getNorthEast().lng, bounds.getNorthEast().lat],
        zoom: map.getZoom()
    });
}

// on map events
map.addEventListener('moveend', update);
map.addEventListener('zoomend', update);

Web worker

Web worker逻辑如下

'use strict';

importScripts('supercluster.min.js');

var index;

getJSON('./path/places.json', function (geojson) {

    // initialize cluster index
    index = supercluster({
        log: true,
        radius: 60,
        extent: 256,
        maxZoom: 18
    }).load(geojson.features);

    // post a message when the index is ready
    postMessage({ready: true});
});

// calculate the inbound index when the map request
self.onmessage = function (e) {
    if (e.data) {
        postMessage(index.getClusters(e.data.bbox, e.data.zoom));
    }
};

function getJSON(url, callback) {
    // get the markers FeatureCollection data
    // ...
    callback(/*data*/);
}

Demo

这里使用5w个点进行模拟,最终地图效果

See this example stand-alone

References

Similar Posts

  • Analysis of AQI on Map using D3.js and Turf.js 市面上常见的空气质量指数(AQI)展现方式都是简单的标记某个测量位置的测量值,我们想更加全局地把握观察AQI的分布,这里我们研究使用几个不同的统计方式在地图上展现AQI的区分分布效果。沃洛诺伊图(Voronoi Diagram)是根据多个点对空间进行分割的算法,比较适合我们根据监测点计算其所覆盖的区域。
  • Use Baidu Map Provider in Leaflet.js 百度地图 Baidu Map 的墨卡托投影映射 Mercator Projection 和经纬度坐标与 Tile Url 都有加偏移,本文介绍如何继承和修改 Leaflet.js 原有 Class 使之适应百度地图的算法,将百度地图展示于 Leaflet.js 框架上
  • 用Turf分析各省高考生密度 用Turf和Nodejs并使用GeoJSON标准文件做全国各省高考报考人数的密度分析,并在Carto地图上进行可视化。
  • HANA Spatial with Baidu Map SAP HANA Spatial在SAP各产品中的应用越来越广泛,同时以SAP HANA为基础的产品在中国市场得到快速成长,SAP产品中的地图在进入中国市场时经常会遇到本土化的问题。作为国内知名的地图供应商 百度地图 Baidu Map 经常被用来作为地图可视化的工具。但国外的产品在本地化的过程中总是会遇到水土不服的问题。

Comments

comments powered by Disqus
Back to Top