Question

我想在地图上显示点/标记。有12个点集群，每个集群应该有一个唯一的标记/图标。

在这个example中，我在两个集群上显示了样本数据，每个集群都有自己的图标。目前，每个群集中只有3-4个点。实际数据在每个群集中包含100-200个点，因此显然解决方案不是最佳的。我想更容易地阅读12个集群。考虑使用类语句，为每个类（= cluster）分配一个图标。不知道如何开始。

    var map = L.map("map");

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

map.setView([48.87, 2.35], 12);

//STEP 1
var leafIcons = L.Icon.extend({
    options: {
        //shadowUrl: 'leaf-shadow.png',
        iconSize:     [100, 100],
        //shadowSize:   [50, 64],
        iconAnchor:   [22, 94],
        //shadowAnchor: [4, 62],
        popupAnchor:  [-3, -76]
    }
});

//STEP 2
var greenIcon = new leafIcons({iconUrl: 'http://www.marchigiana.org.br/home/images/Diversas/Map-Marker-Marker-Outside-Chartreuse-icon.png'}),
    blueIcon = new leafIcons({iconUrl: 'http://maps.google.com/mapfiles/ms/icons/blue.png'});

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


//Green icon cluster
L.marker([48.90, 2.35], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf.");
L.marker([48.90, 2.36], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf.");
L.marker([48.89, 2.34], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf.");

//Blue icon cluster
L.marker([48.84, 2.35], {icon: blueIcon}).addTo(map).bindPopup("I am a blue icon");
L.marker([48.85, 2.35], {icon: blueIcon}).addTo(map).bindPopup("I am a blue icon");
L.marker([48.84, 2.34], {icon: blueIcon}).addTo(map).bindPopup("I am a blue icon");
L.marker([48.83, 2.36], {icon: blueIcon}).addTo(map).bindPopup("I am a blue icon");

关于方法的任何想法？

Answer 1

确实在你的地图上同时拥有数百个点会使它不具有可读性，同时也会大大降低访问者的速度。浏览器。

如果我理解正确，除了数字之外，您希望能够区分不同类型的图标（＆＃34;群集＆＃34;）？

要减少同时显示的点数，您可以使用一些clustering plugin。

例如，使用Leaflet.markercluster，您可以为每个类型/群集点创建1个L.markerClusterGroup，这样它们只能相互聚集（而不是多个类型），为每个类型指定一个自定义群集图标小组（请参阅如何customize them / demo / demo source）

JavaScript的：

var mcgGreen = L.markerClusterGroup({
  iconCreateFunction: function(cluster) {
    return L.divIcon({
      html: cluster.getChildCount(),
      className: 'mycluster',
      iconSize: L.point(40, 40)
    });
  }
}).addTo(map);
var mcgBlue = L.markerClusterGroup({
  iconCreateFunction: function(cluster) {
    return L.divIcon({
      html: cluster.getChildCount(),
      className: 'mycluster mycluster-blue',
      iconSize: L.point(40, 40)
    });
  }
}).addTo(map);

L.marker([48.90, 2.35], {
  icon: greenIcon
}).addTo(mcgGreen);

L.marker([48.84, 2.35], {
  icon: blueIcon
}).addTo(mcgBlue);

CSS：

.mycluster {
  width: 40px;
  height: 40px;
  background-color: greenyellow;
  text-align: center;
  font-size: 24px;
}

.mycluster-blue {
  background-color: blue;
}

演示：https://jsfiddle.net/g1bh6sr1/2/

12个群集，12个不同的图标，使用Leaflet库进行Javascript

1 个答案: