时间戳

首页 > 解决方案 > 如何在传单的多边形中间添加标记？

javascript - 如何在传单的多边形中间添加标记？

问题描述

我想在由 geojson 数据制成的多边形中间添加一个标记。多边形连接到一个可以打开和关闭图层的控件。此标记应仅在图层处于活动状态时显示。我有以下代码：

var geoJsonLayer = L.geoJSON(Locations, {
  onEachFeature: function (feature, layer) {
    if (feature.geometry.type === "Polygon") {
      var bounds = layer.getBounds();
      var center = bounds.getCenter();

      var markerTitle = feature.properties.ItemId;
      layer.id = markerTitle;

      var popUpFormat = dataPopUp(feature);
      layer.bindPopup(popUpFormat, customPopUpOptions);
    }
  },
});

感谢您的关注，我希望有人可以帮助我：D

标签： javascriptleaflet

解决方案

您想将 aL.Polygon和 aL.Marker组合在一起，并将它们视为同一个实体。这是使用L.LayerGroups 的教科书场景，例如

var geoJsonLayer = L.geoJSON(Locations, {
  onEachFeature: function (feature, layer) {
    if (feature.geometry.type === "Polygon") {
      var center = layer.getBounds().getCenter();
      var marker = L.marker(center);
      var polygonAndItsCenter = L.layerGroup([layer, marker]);
    }
  },
});

现在polygonAndItsCenter是L.LayerGroup多边形及其中心（因此在地图中添加/删除将适用于两者），但geoJsonLayer将仅包含多边形。你如何处理这取决于你，但我想你可能不想添加到geoJson地图中（仅用于解析和实例化多边形），并单独跟踪你的 polygon+marker LayerGroup，例如

var polygonsWithCenters = L.layerGroup();

var geoJsonLayer = L.geoJSON(Locations, {
  onEachFeature: function (feature, layer) {
    if (feature.geometry.type === "Polygon") {
      var center = layer.getBounds().getCenter();
      var marker = L.marker(center);
      var polygonAndItsCenter = L.layerGroup([layer, marker]);
      polygonAndItsCenter.addTo(polygonsWithCenters);
    }
  },
});

// geoJsonLayer.addTo(map);  // No!!
polygonsWithCenters.addTo(map);

// Do something with a polygon+marker, e.g. remove the first one from the map
polygonsWithCenters.getLayers()[0].remove();

为此可能会产生一些次要问题，因此请在编写代码之前考虑您想要对每个多边形/图层组/标记做什么，将 Leaflet 文档放在手边，并记住：

  • 您不能将事件或绑定弹出窗口绑定到LayerGroups，但您可以对L.FeatureGroups执行此操作
  • 多边形边界框的中心与其质心不同，质心不同于多边形内离任何边缘最远的点。只有第三个选项保证在多边形内。

推荐阅读