百度地圖-聚合圖層新增權重

語言: CN / TW / HK

官方地址:

https://mapv.baidu.com/gl/examples/editor.html#point-cluster.html

介紹:百度的聚合圖層只能根據點數聚合,不能根據權重展示聚合結果。 專案需要新增權重,故解決:

改動如下:

1、破解檔案

https://code.bdstatic.com/npm/[email protected]/dist/mapvgl.min.js

(1) 第14676行

function h(a, b) {
                    //liv
                    let _w = a.geometry.weight?a.geometry.weight:1;
                    //liv
                    a = a.geometry.coordinates;
                    return {x: a[0] / 360 + .5, y: p(a[1]), zoom: Infinity, index: b, parentId: -1,weight:_w}
                }

(2)第14881行

x.prototype._cluster = function (a, b) {
                    var c = [], d = this.options, f = d.reduce, g = d.minPoints;
                    d = d.radius / (d.extent * Math.pow(2, b));
                    for (var h = 0; h < a.length; h++) {
                        var k = a[h];
                        if (!(k.zoom <= b)) {
                            k.zoom = b;

                            // for (var l = this.trees[b + 1], m = l.within(k.x, k.y, d), n = k.numPoints || 1, p = n, q = 0, r = m; q < r.length; q += 1) {
                            for (var l = this.trees[b + 1], m = l.within(k.x, k.y, d), n = k.numPoints || k.weight, p = n, q = 0, r = m; q < r.length; q += 1) {
                                var t = l.points[r[q]];
                                // t.zoom > b && (p += t.numPoints || 1)
                                t.zoom > b && (p += t.numPoints || t.weight)
                            }

                            if (p >= g) {
                                q = k.x * n;
                                r = k.y * n;
                                n = f && 1 < n ? this._map(k, !0) : null;
                                t = (h << 5) + (b + 1) + this.points.length;
                                for (var u = 0; u < m.length; u += 1) {
                                    var v = l.points[m[u]];
                                    if (!(v.zoom <=
                                        b)) {
                                        v.zoom = b;
                                        // var w = v.numPoints || 1;
                                        var w = v.numPoints || v.weight;
                                        q += v.x * w;
                                        r += v.y * w;
                                        v.parentId = t;
                                        f && (n || (n = this._map(k, !0)), f(n, this._map(v)))
                                    }
                                }
                                k.parentId = t;
                                c.push({
                                    x: q / p,
                                    y: r / p,
                                    zoom: Infinity,
                                    id: t,
                                    parentId: -1,
                                    numPoints: p,
                                    properties: n
                                })
                            } else if (c.push(k), 1 < p) for (k = 0, p = m; k < p.length; k += 1) m = l.points[p[k]], m.zoom <= b || (m.zoom = b, c.push(m))
                        }
                    }
                    return c
                };

2、html中資料構造部分,新增   weight:3

// 構造資料
    while (randomCount--) {
        var cityCenter = mapv.utilCityCenter.getCenterByCityName(
            citys[parseInt(Math.random() * citys.length, 10)]
        );
        data.push({
            geometry: {
                type: 'Point',
                coordinates: [cityCenter.lng - 2 + Math.random() * 4, cityCenter.lat - 2 + Math.random() * 4],
                weight: 3
            },
            properties: {
                icon: [
                    'images/marker.png',
                    'images/icons/icon-accident.png',
                    'images/icons/icon-location.png',
                    'images/icons/icon-airplane.png'
                ][randomCount % 4],
                width: randomCount % 2 === 0 ? 100 / 4 : 30,
                height: randomCount % 2 === 0 ? 153 / 4 : 30
            }
        });
    }

weight 即為權重值,至此實現權重計算。

分享到: