Показать указатель c и увеличить его на листовой карте при нажатии кнопки - PullRequest
Новая
       82

Показать указатель c и увеличить его на листовой карте при нажатии кнопки

0 голосов
/ 26 апреля 2020

Я хочу вызывать указанный c объект по имени, когда одна кнопка нажата в файле 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": "Ябълки"
      }
    },

В тот момент, когда у меня есть одно состояние, которое является истинным или ложным. false нет маркеров на карте, но когда true, он отображает все маркеры на листовой карте. Теперь я хочу иметь две или три кнопки, и при нажатии одной из них вызывается указатель c в файле 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)}
              />
            )}

1 Ответ

2 голосов
/ 27 апреля 2020

Поместите координаты маркера на 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>

Демо

...