地图聚合点 - PruneClusterForLeaflet

﹏゛Aeljinh陌琳
已于 2022-06-15 09:17:55 修改
阅读量390
点赞数 1
分类专栏： leaflet 文章标签： javascript 前端 html
于 2021-04-19 15:38:54 首次发布
本文链接：https://blog.csdn.net/qq_37541486/article/details/115865973
版权
leaflet 专栏收录该内容
1 篇文章 0 订阅
订阅专栏
需要下载可点击本人另外一条文章，链接
在这里插入图片描述
<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>PruneCluster - Realworld 50k</title>

	<link rel="stylesheet" href="../dist/leaflet.css"/>
	<script src="../dist/leaflet.js"></script>

    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, target-densitydpi=device-dpi" />

    <script src="../dist/PruneCluster.js"></script>

    <script src="realworld.50000.1.js"></script>
    <script src="realworld.50000.2.js"></script>

    <link rel="stylesheet" href="examples.css"/>
    <style>
.circle-div{
    border: 1px solid #000;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: yellow;
}

    </style>
</head>
<body>
    <div id="map"></div>

    <script>
        var map = L.map("map", {
            attributionControl: false,
            zoomControl: false
        }).setView(L.latLng(-37.79, 175.27), 12);

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            detectRetina: true,
            maxNativeZoom: 17
        }).addTo(map);

        var leafletView = new PruneClusterForLeaflet();
        //监听群集
        leafletView.BuildLeafletCluster = function(cluster, position) {
            var pruneCluster = leafletView
            var m = new L.Marker(position, {
                icon: pruneCluster.BuildLeafletClusterIcon(cluster)
            });
        
            m.on('click', function(e) {
                console.log(cluster,e);
                
            });
            m.on('mouseover', function() {
                //do mouseover stuff here
            });
            m.on('mouseout', function() {
                //do mouseout stuff here
            });
            m.unbindTooltip().bindTooltip('1', {'direction': 'top', offset: [0, -5/2]});
            return m;
        };
        leafletView.BuildLeafletClusterIcon = function(cluster) {
            var e = new L.Icon.MarkerCluster();

            e.stats = cluster.stats;
            e.population = cluster.population;
            return e;
        };

        var colors = ['#ff4b00', '#000', '#EC1813', '#55BCBE', '#D2204C', '#FF0000', '#ada59a', '#3e647e'],
        pi2 = Math.PI * 2;

        L.Icon.MarkerCluster = L.Icon.extend({
            options: {
                iconSize: new L.Point(600,600),
                className: 'prunecluster leaflet-markercluster-icon'
            },

            createIcon: function () {
            // based on L.Icon.Canvas from shramov/leaflet-plugins (BSD licence)
                var e = document.createElement('canvas');
                this._setIconStyles(e, 'icon');
                var s = this.options.iconSize;

                if (L.Browser.retina) {
                    e.width = s.x + s.x;
                    e.height = s.y + s.y;
                } else {
                    e.width = s.x;
                    e.height = s.y;
                }

                // this.draw(e.getContext('2d'), s.x, s.y);
                this.draw(e.getContext('2d'), e.width, e.height);
                return e;
            },

            createShadow: function () {
                return null;
            },

            draw: function(canvas, width, height) {

                var xa = 2, xb = 50, ya = 18, yb = 21;

                var r = ya + (this.population - xa) * ((yb - ya) / (xb - xa));

                var radiusMarker = Math.min(r, 21),
                radiusCenter = 11,
                center = width / 2;

                if (L.Browser.retina) {
                    canvas.scale(2, 2);
                    center /= 2;
                    canvas.lineWidth = 1;
                }

                canvas.strokeStyle = 'rgba(0,0,0,0.05)';

                var start = 0, stroke = true;
                for (var i = 0, l = colors.length; i < l; ++i) {
                    var size = this.stats[i] / this.population;

                    if (size > 0) {

                        stroke = size != 1;

                        canvas.beginPath();
                        canvas.moveTo(center, center);
                        canvas.fillStyle = colors[i];
                        var from = start + 0.14,
                        to = start + size * pi2;

                        if (to < from || size == 1) {
                            from = start;
                        }
                        canvas.arc(center, center, radiusMarker, from, to);

                        start = start + size * pi2;
                        canvas.lineTo(center, center);
                        canvas.fill();
                        if (stroke) {
                            canvas.stroke();
                        }
                        canvas.closePath();
                    }

                }

                if (!stroke) {
                    canvas.beginPath();
                    canvas.arc(center, center, radiusMarker, 0, Math.PI * 2);
                    canvas.stroke();
                    canvas.closePath();
                }

                canvas.beginPath();
                canvas.fillStyle = 'white';
                canvas.moveTo(center, center);
                canvas.arc(center, center, 0, 0, Math.PI * 2);
                canvas.fill();
                canvas.closePath();


                canvas.fillStyle = '#454545';
                canvas.textAlign = 'center';
                canvas.textBaseline = 'middle';
                canvas.font = 'bold '+(this.population < 100 ? '12' : (this.population < 1000 ? '11' : '9'))+'px sans-serif';

                canvas.fillText(this.population, center, center, radiusCenter*2);
            }
        });
    var addressPoints = [
[-37.8133062833, 175.2721598, "aaa"],
[-37.8129763667, 175.2714296333, "2"],
[-37.81369515, 175.2714571167, "3"],
[-37.81322845, 175.2715556, "ccc"],
[-37.8137875333, 175.2712745333, "aaa"],
[-37.8133246833, 175.27138025, "3"],
[-37.8140672667, 175.2712932667, "2"]]
for (var i = 0, l = addressPoints.length; i < l; ++i) {
    var type = addressPoints[i][2]
    if(type == 'aaa'){
        type = 1
    }else if(type == 'ccc'){
        type = 2
    }

    var m = new PruneCluster.Marker(addressPoints[i][0], addressPoints[i][1], {title: addressPoints[i][2]},type);
    leafletView.RegisterMarker(m);
}
// for (i = 0, l = addressPoints2.length; i < l; ++i) {
//     var m2 = new PruneCluster.Marker(addressPoints2[i][0], addressPoints2[i][1], {title: addressPoints2[i][2]}, /^\d+$/.test(addressPoints2[i][2]) ? 3: 0);
//     leafletView.RegisterMarker(m2);
// }

leafletView.PrepareLeafletMarker = function (marker, data, category) {
    var v = 0, R = 5;
    var cssClass = 'status'+data.id;
    
    marker.on('click', function(){
        console.log(data);
    });
    marker.setIcon(L.divIcon({
        className: 'circle-div ' + cssClass, // Specify a class name we can refer to in CSS.
        iconSize: [15, 15] // Set the marker width and height
    }))
    var options_tooltip = {'direction': 'top', offset: [0, -R/2]};
    var tip = '<div style="text-align:center;"><span style="font-size:20px;font-weight:bold;">'+ v.toFixed(2) +'</span> 吨</div><div>' + data.title + '</div>'
    if (marker.getPopup()) {
        marker.setPopupContent(data.title);
    } else {
        // marker.bindTooltip(data.title);
        marker.unbindTooltip().bindTooltip(tip, options_tooltip);
    }
};

map.addLayer(leafletView);
</script>
</body>
</html>