传单绘制大量图标标记

Question

我是使用leaflet.js 绘制了大约10000 个图标标记，因为它是图标标记，所以我不能使用circleMarker。我找到了一个传单插件Leaflet.Canvas-Markers，它可以帮助我快速绘制10000个图标标记，但是这个插件导致点击事件失败。 这是我的代码

var ciLayer = L.canvasIconLayer({}).addTo(leafletMap)
    var icon = L.icon({
    iconUrl: 'StructWell.png',
    iconSize: [20, 18],
    iconAnchor: [10, 9]
    });
    function markerClickHandler (e) {
        console.log(e)
        console.log()
    }
    let markers = []
    SiteList.results.forEach((site, i) => {
        var marker = L.marker([site.latitude, site.longitude], {icon: icon, title: JSON.stringify(site)})
        marker.on('click', markerClickHandler)
        // ciLayer.addMarker(marker)
        markers.push(marker);
    })
    ciLayer.addLayers(markers);

当我单击标记时，函数 markerClickHandler 不起作用。 是我做了一些错误，还是有更多的解决方案。关键是带有点击事件的大量图标标记。 谢谢

Answer 1

监听器应该如下添加：

 ciLayer.addOnClickListener(function (e,data) {
      console.log(data)
 });

var map = L.map('map').setView([59.9578,30.2987], 10);
    var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      preferCanvas: true
    }).addTo(map);

    var ciLayer = L.canvasIconLayer({}).addTo(map);

    ciLayer.addOnClickListener(function (e,data) {
    console.log(data[0].data.mydata)
    });
    

    var icon = L.icon({
      iconUrl: 'https://img.icons8.com/metro/26/000000/marker.png',
      iconSize: [20, 18],
      iconAnchor: [10, 9]
    });

  var markers = [];
    for (var i = 0; i < 10000; i++) {
      var marker = L.marker([58.5578 + Math.random()*1.8, 29.0087 + Math.random()*3.6], {icon: icon}).bindPopup("I Am "+i);
      marker.mydata="I Am "+i
    markers.push(marker);
    }
  ciLayer.addLayers(markers);

.map{
      width: 100%;
      height: 100px;
    }

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
  <script src="https://unpkg.com/leaflet-canvas-marker@0.2.0"></script>
  
  <div class="map" id="map"></div>

您可以查看 Leaflet.Canvas-Markers 提供的示例。

希望对你有帮助。