如何使用层应用传单标记集群-前端问题

How to apply leaflet marker cluster using layers(如何使用层应用传单标记集群)

本文介绍了如何使用层应用传单标记集群的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试应用 Leaflet.MarkerCluster.LayerSupport.但我不知道如何使用它 :( 我已经阅读了有关但我尝试了很多次但它不起作用的文档.

I´m trying to apply the Leaflet.MarkerCluster.LayerSupport. But I don´t know how to use it :( I´ve already read the documentation about but and I tried many times but it doesen´t work.

这是我的代码

<!DOCTYPE html>
<html>
<head>
    <title>Península</title>
    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
</head>
<body>
    <div id="map" style="width: 600px; height: 400px"></div>

    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
    <script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-markercluster/v0.4.0/leaflet.markercluster.js'></script>
    <script src="leaflet.markercluster.layersupport-src.js"></script>


    <script>        

        var NemachIcons =L.Icon.extend({
            options:{
                shadowUrl:'',
                iconSize:   [50,55],
                iconAnchor: [45,45],
                popupAnchor:[-3,-76]
            }
        });

        var tiloIcon = new NemachIcons({iconUrl:'http://www.iconshock.com/img_jpg/SIGMA/general/jpg/256/pyramid_icon.jpg'}),
            puebloIcon = new NemachIcons({iconUrl:'http://icons.iconseeker.com/png/fullsize/gant/pointless-bw-circle-i-use-it-iex.png'}),
            gasIcon =new NemachIcons({iconUrl:'https://cdn2.iconfinder.com/data/icons/function_icon_set/circle_green.png'});


        L.icon =function (options) {
            return new L.Icon(options);
        };


        var sitios = new L. LayerGroup();

        L.marker([20.683, -88.568], {icon: tiloIcon}).bindPopup('1').addTo(sitios),
        L.marker([21.204547, -89.269466], {icon: tiloIcon}).bindPopup('2').addTo(sitios),
        L.marker([20.332362, -89.647899], {icon: tiloIcon}).bindPopup('3').addTo(sitios),
        L.marker([20.486417, -88.660218], {icon: tiloIcon}).bindPopup('4').addTo(sitios),
        L.marker([21.151196, -87.958143], {icon: tiloIcon}).bindPopup('5').addTo(sitios);


        var pueblo = new L.LayerGroup();

        L.marker([20.9330, -89.0178], {icon: puebloIcon}).bindPopup('6').addTo(pueblo),
        L.marker([20.6909, -88.2015], {icon: puebloIcon}).bindPopup('7').addTo(pueblo);

        var gas = new L.LayerGroup();
        L.marker([20.973907, -89.578931], {icon: gasIcon}).bindPopup('8').addTo(gas);


        var mbAttr = ' ' +
                '' +
                '',
            mbUrl = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw';

        var grayscale   = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: mbAttr}),
            streets  = L.tileLayer(mbUrl, {id: 'mapbox.streets',   attribution: mbAttr});

        var map = L.map('map', {
            center: [20.794527, -88.760612],
            zoom: 8,
            layers: [grayscale, sitios]
        });

        var baseLayers = {

            //"Grayscale": grayscale,
            //"Streets": streets

        };

        var overlays = {
            "Pirámide": sitios,
            "Poblado": pueblo,
            "Servicio": gas
        };

        L.control.layers(baseLayers, overlays).addTo(map);
    </script>
</body>
</html>

我会感谢你所有的回答

推荐答案

与 Leaflet.markercluster 一样，您必须创建一个标记集群组，您的子组将进入该组.

Like for Leaflet.markercluster, you have to create a Marker Cluster Group where your sub-groups will go into.

在层支持的情况下，您创建一个具有层支持的标记集群组:

In the case of Layer Support, you create a Marker Cluster Group with Layer Support instead:

var mcg = L.markerClusterGroup.layerSupport().addTo(map);

然后您签入"子组，以便他们知道在通过图层控件选择它们时必须进入该聚类组而不是直接进入地图:

Then you "check in" the sub-groups, so that they know they have to go into that clustering group rather than directly to the map, when they are selected through the Layers Control:

mcg.checkIn([
    sitios,
    pueblo,
    gas
]);

演示:http://plnkr.co/edit/CT3E63AKWze34FqUoiHn?p=preview

注意:您应该下载 JavaScript 文件 leaflet.markercluster.layersupport-src.js(如果尚未下载)，并将其放在您的 HTML 页面旁边，这样它可以在本地引用它.

Note: you should download the JavaScript file leaflet.markercluster.layersupport-src.js, if not already done, and place it next to your HTML page, so that it can refer to it locally.

注意 2:如果您的使用只需要集群与 L.Control.Layers 的兼容性，您可能会对这个更简单的插件感兴趣:Leaflet.FeatureGroup.SubGroup.

Note 2: if your usage requires only compatibility of clustering with L.Control.Layers, you might be interested in this more simple plugin: Leaflet.FeatureGroup.SubGroup.

免责声明:我是这些插件的作者.

Disclaimer: I am the author of these plugins.

这篇关于如何使用层应用传单标记集群的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！