Baidu MapVGL点聚合 设置点权重

百度的聚合图层只能根据点数聚合,不能根据权重展示聚合结果。

本次修改文件是:**mapvgl.min.js**
  • 搜索源码,找到类似的下方代码。_w为本次改动(定义和使用两处改动)
function g(a, c) {
    let _w = a.geometry.weight?a.geometry.weight:1;
    a = a.geometry.coordinates;
    return {
        x: a[0] / 360 + .5,
        y: n(a[1]),
        zoom: Infinity,
        index: c,
        parentId: -1,
        weight:_w
    }
}
  • 修改函数prototype._cluster:下文调用属性weight的地方为本次修改点
w.prototype._cluster = function(a, c) {
    var b = []
      , d = this.options
      , f = d.reduce
      , h = d.minPoints;
    d = d.radius / (d.extent * Math.pow(2, c));
    for (var g = 0; g < a.length; g++) {
        var k = a[g];
        if (!(k.zoom <= c)) {
            k.zoom = c;
            for (var l = this.trees[c + 1], m = l.within(k.x, k.y, d), p = k.numPoints || k.weight , n = p, q = 0, r = m; q < r.length; q += 1) {
                var t = l.points[r[q]];
                t.zoom > c && (n += t.numPoints || t.weight)
            }
            if (n >= h) {
                q = k.x * p;
                r = k.y * p;
                p = f && 1 < p ? this._map(k, !0) : null;
                t = (g << 5) + (c + 1) + this.points.length;
                for (var v = 0; v < m.length; v += 1) {
                    var u = l.points[m[v]];
                    if (!(u.zoom <= c)) {
                        u.zoom = c;
                        var w = u.numPoints || u.weight;
                        q += u.x * w;
                        r += u.y * w;
                        u.parentId = t;
                        f && (p || (p = this._map(k, !0)),
                        f(p, this._map(u)))
                    }
                }
                k.parentId = t;
                b.push({
                    x: q / n,
                    y: r / n,
                    zoom: Infinity,
                    id: t,
                    parentId: -1,
                    numPoints: n,
                    properties: p
                })
            } else if (b.push(k),
            1 < n)
                for (k = 0,
                n = m; k < n.length; k += 1)
                    m = l.points[n[k]],
                    m.zoom <= c || (m.zoom = c,
                    b.push(m))
        }
    }
    return b
}
  • HTML定义地图点时,增加权重字段属性:weight 即可
// 构造数据
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
        }
    });
}

你可能感兴趣的:(技巧,mapvgl,百度地图)