按下按鈕時顯示特定標記並在 leaflet map 上放大到它

Question

當在 json 文件中按下一個按鈕並顯示在 map 上時，我想按名稱調用特定的 object。 然后縮放和 map 位於此標記上。

Json文件結構：

type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [26.41389781, 41.9425557]
      },
      "properties": {
        "Name": "Парцел 1",
        "Crops": "Ябълки"
      }
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [26.41472289, 41.95044877]
      },
      "properties": {
        "Name": "Парцел 2",
        "Crops": "Ябълки"
      }
    },

A the moment i have one state which is true ot false.When is false there are no markers on the map, but when is true it shows all markers on the leaflet map.Now i want to have two or three buttons, and when one按下以調用 json 文件中的特定標記並顯示在 map

按鈕代碼，點擊使條件為真：

   <button
            value={this.state.geojsonvisible}
            onClick={this.onGeojsonToggle}
          >
            Object 1
          </button>

顯示標記的彈出窗口：

 onEachFeaturePoint(feature, layer) {
    console.log("feature: ", feature);
    console.log("layer: ", layer);
    var popupContent =
      feature.properties.Name + "  " + feature.properties.Crops;
    layer.bindPopup(popupContent);
    layer.on({
      click: function (e) {
        console.log("e: ", e);
        console.log("click");
      },
    });
  }

這是我的 geojson 標簽：

 {this.state.geojsonvisible && (
              <GeoJSON
                data={points}
                onEachFeature={this.onEachFeaturePoint.bind(this)}
                // pointToLayer={this.pointToLayer.bind(this)}
              />
            )}

Answer 1

將標記坐標放置在featureGroup上，並使用所選標記所在組的邊界擬合 map 的邊界。

 <Map
     ref={this.mapRef}
     center={position}
     ... />

根據傳遞的坐標作為方法參數，使用此事件來擬合 map：

onButtonClick = coords => {
    const map = this.mapRef.current;
    var group = new L.featureGroup([L.marker(coords)]);
    if (map) map.leafletElement.fitBounds(group.getBounds());
  };

並使用按鈕單擊事件調用該方法：

<button onClick={() => this.onButtonClick([41.9425557, 26.41389781])}>
      Zoom to marker 1
</button>

<button onClick={() => this.onButtonClick([41.95044877, 26.41472289])}>
    Zoom to marker 2
</button>

演示