有条件地将 Leaflet circleMarkers 样式设置为矩形

Question

我正在根据 GeoJSON 数据创建 Leaflet 地图。我想根据 geoJSON 是否有图像（这在 feature.properties 下显示，以及其他一些 HTML 用于弹出窗口，使一些 Leaflet 标记成为不同的形状。默认形状是 L.circleMarker，我希望相关标记变成矩形。不幸的是 L.circleMarker 没有默认选项来更改形状。

我尝试了这个插件 https://github.com/masajid390/BeautifyMarker but it was really buggy for my purposes. The code just seemed to be applying CSS to markers anyway. See this issue: https://github.com/masajid390/BeautifyMarker/issues/20，其中建议使用 iconStyle : 'border-radius:0!important' 将标记样式设置为矩形。回到普通的 Leaflet，如果我能找到一个单独的圆圈的 CSS，我可以通过设置 CSS:

轻松更改它

  .rectangle_marker {
    border-radius: 0
  }

一种方法是向相关标记添加 class，然后设置样式。我已经按如下方式应用一些条件样式，直接设置 L.circleMarker 的选项：

function style(feature) {
  options =  drawOptions(feature.properties);
  // mark items that have images
  if (feature.properties.First) {
    options.radius = 11
    options.width = 3
  }
  
  // mark filter options with different colors
  if (feature.properties.Filter) {
    if (feature.properties.Filter.toUpperCase() === "BEFORE") {
      options.fillColor = "#29A7B3"
    } else if (feature.properties.Filter.toUpperCase() === "DURING") {
      options.fillColor = "#DC4A35"
    } else if (feature.properties.Filter.toUpperCase() === "AFTER") {
      options.fillColor = "#215E57"
    }
  }
  return options
}

（反过来，drawOptions 看起来像这样：）

  function drawOptions(props) {
    return {
      radius: 7,
      color: "black",
      width: 1,
      opacity: 1,
      fillColor: "#784889",
      fillOpacity: 1
    }
  }

我试过这种方法：, but it doesn't work because L.circleMarker doesn't have a built in option like className to set a class. 出于同样的原因行不通。

尝试了以下代码在How do you add a class to a Leaflet marker?的基础上间接添加了一个class：

function pointToLayer(feature, latlng) {
  const marker = L.circleMarker(latlng, drawOptions(feature.properties));
  if (check_images(feature.properties)) {
    marker._path.classList.add("rectangle_marker")
  }
  return marker
}

但是不行，因为标记在添加到地图之前没有属性_path。

由于我将整个图层添加到地图，我可以想象在创建 geoJSON 和将它们添加到地图之间拉出相关标记，但我不确定如何：

  window.geojson = L.geoJSON(json, {
    onEachFeature: onEachFeature,
    pointToLayer: pointToLayer,
    style: style
  });
 //What would go here?

  window.geojson.addTo(window.map);

是否有任何其他方法可以让我的一些 L.circleMarker 显示为正方形？

Answer 1

我放弃了，改用了divIcons。您可以添加 classNames 并改为添加 css。

function markerOptions(props) {
  //default options
  const options =  {
    iconSize: [15, 15],
    //mark the center of the icon
    iconAnchor: [7, 7],

  }
  // if location has images, make marker a rectangle
  if (check_images(props)) {
    options.className = "marker-images"
  }
  
  // mark filter options with different colors
  if (props.Filter) {
    if (props.Filter.toUpperCase() === "BEFORE") {
      options.className += " options-before"
    } else if (props.Filter.toUpperCase() === "DURING") {
      options.className += " options-during"
    } else if (props.Filter.toUpperCase() === "AFTER") {
      options.className += " options-after"
    }
  }
  //enlarge first location
  if (props.First) {
    options.className += " first"
    options.iconSize = [21, 21]
    options.iconAnchor = [10, 10]
  }
  
  return options
}
function pointToLayer(feature, latlng) {
  return L.marker(latlng, { icon: L.divIcon(markerOptions(feature.properties)) });
}

然后在您的 css 文件中，您可以更改边框、border-radius、background-color 以及 L.divIcon.[=12 中未内置的其他选项=]

有条件地将 Leaflet circleMarkers 样式设置为矩形

Conditionally style Leaflet circleMarkers to be rectangles

javascript

css

geojson

leaflet