按下按钮时显示特定标记并在传单地图上放大它

Question

我想在 json 文件中按下一个按钮时按名称调用特定对象并显示在地图上。然后缩放和地图在这个标记上。

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 当我有一个状态是真的时 false.When 是假的，地图上没有标记，但是当它是真的时，它会显示传单上的所有标记 map.Now 我想有两个或三个按钮，当按下一个按钮时调用 json 文件中的特定标记并显示在地图上

按钮代码，点击使条件为真：

   <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");
      },
    });
  }

这是我的地理json 标签：

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

Answer 1

将标记坐标放在 featureGroup 上，并使用所选标记所在组的边界来拟合地图边界。

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

使用此事件根据传递的坐标作为方法参数来拟合地图：

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>

Demo

按下按钮时显示特定标记并在传单地图上放大它

Show specific marker and zoom to it on leaflet map when button is pressed

javascript

geojson

leaflet

reactjs

react-leaflet