在 markercluster 中设置单个标记的样式

Question

我正在尝试根据某些特征属性设置单个标记或大小为 1 的簇的样式。

var markers = L.markerClusterGroup();

function onEachFeature(feature, layer) {
  if (feature.properties.EncounterType && feature.properties.Year) {
    layer.bindPopup(feature.properties.EncounterType + " in " +
      feature.properties.Year);
  }
}

function style(feature) {
  switch (feature.properties.EncounterType) {
    case 'Shooting':
      return {
        color: "ff0000"
      };
    case 'Sighting':
      return {
        color: "0000ff"
      };
    case 'Hunting':
      return {
        color: "ff0000"
      };
  }
}

var geoJsonLayer = L.geoJSON(storer, {
  onEachFeature: onEachFeature
}, {
  style: style
});

markers.addLayer(geoJsonLayer);
map.addLayer(markers);

onEachFeature 函数成功创建弹出窗口。但是，样式函数不会更改大小为 1 的簇的颜色。我在初始化 markerclustergroup 时尝试使用 iconCreateFunction，但是，这也不起作用。

Answer 1

你的 style 选项在你调用 L.geoJSON 工厂的第三个参数中分开，而它应该放在第二个参数中，与 onEachFeature 选项一起。

var geoJsonLayer = L.geoJSON(storer, {
  onEachFeature: onEachFeature,
  style: style
});

但这可能不是您遇到问题的唯一原因。

style option will apply to vector shapes (polylines, polygons, etc.), i.e. to non-point data. It may also apply to Circle Markers, which can be used for Point type geometries, but you have to explicitly create them (typically through the pointToLayer 选项）。

那些非点数据Leaflet.markercluster无法处理。

因此，如果您看到 "clusters of size 1"（我猜您的意思是标记），它们来自 unstyled Point 在 storer GeoJSON 数据中输入几何图形。

这是一个普通的标记：

无法设置样式的 PNG 图片。

如果您想自定义 Point 几何图形的外观，请使用 custom icons, a plugin that provide such custom icons, or Circle Markers，您可以轻松修改颜色（包括通过 style 选项）。

例如，如果您要选择最后一个选项，您可以这样做：

var geoJsonLayer = L.geoJSON(storer, {
  pointToLayer: function (geoJsonPoint, latlng) {
    return L.circleMarker(latlng);
  },
  onEachFeature: onEachFeature,
  style: style
});

在 markercluster 中设置单个标记的样式

Styling individual markers in markercluster

javascript

leaflet

leaflet.markercluster