Как добавить маркер в середину многоугольника в листовке?

Question

Я хочу добавить маркер в середину многоугольника, созданного из гео json данных. К многоугольнику связан элемент управления, в котором слой можно включать и выключать. Этот маркер должен отображаться только тогда, когда слой активен. У меня есть следующий код:

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

Answer 1

Вы хотите сгруппировать L.Polygon и L.Marker вместе и рассматривать их как одну и ту же сущность. Это сценарий из учебника для использования L.LayerGroup s, например

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 на карту (используя только для синтаксического анализа и создания экземпляров многоугольников) и отслеживать свой многоугольник + маркер LayerGroup s отдельно, например,

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 под рукой, и помните:

• Вы не можете прикреплять события или привязывать всплывающие окна к LayerGroup s, но вы можете сделать это L.FeatureGroup s
• в центре многоугольника. ограничивающая рамка отличается от его центроида , который отличается от точки внутри многоугольника, наиболее удаленной от любого из его краев . Только третий вариант гарантированно будет внутри многоугольника.