Как вручную управлять всплывающими окнами (с помощью реквизита) на листе геойсона? - PullRequest
Новая
       25

Как вручную управлять всплывающими окнами (с помощью реквизита) на листе геойсона?

0 голосов
/ 03 января 2019

Я использую ответную листовку для рендеринга коллекции объектов геойсон, которая имеет точки и линии линий: enter image description here

Мне удалось заставить события клика и наведения на самих функциях работать нормально. Но я бы хотел иметь возможность навести курсор на элемент списка (связанный с элементами на карте) и открыть всплывающее окно. Я перебираю документы, github и пробую разные вещи. Но, похоже, нет способа сделать это. Или что мне придется визуализировать мои линии линий и точки вручную вместо использования <GeoJSON data=

Моя карта хорошо работает с событиями кликов: 

return (
        <Map
            style={{
                height: '100%',
                width: '100%',
                margin: '0 auto'
            }}
            ref={(el) => {
                this.leafletMap = el;
            }}
            center={position}
            zoom={10}>
            <TileLayer url='https://api.mapbox.com/v4/mapbox.outdoors/{z}/{x}/{y}@2x.png?access_token=pk.eyJ1IjoiYWJlbnMwefwefEiOiJjajJ1bDRtMzcwMDssmMzJydHdvcjF6ODA5In0.xdZi4pmkhj1zb9Krr64CXw' attribution='&copy; <a href="https://www.mapbox.com/about/maps/">Mapbox</a>' />
            <GeoJSON data={locations} onEachFeature={this.onEachFeature} />{' '}
        </Map>
    );

onEachFeature работает как надо 

onEachFeature = (feature, layer) => {
        console.log('onEachFeature fired: ');
        layer.on({
            mouseover: (e) => this.MouseOverFeature(e, feature),
            mouseout: (e) => this.MouseOutFeature(e, feature)

        });
    };

Но я не вижу, как вызвать layer.bindPopup без использования onEachFeature. Как можно изменить вызов этих методов, используя значения проп? Я бы хотел, чтобы люди наводили курсор на элемент списка и позволяли ему переключаться во всплывающих окнах.

1 Ответ

0 голосов
/ 04 января 2019

Вы можете рассмотреть продление GeoJSON компонента, например: 

const GeoJSONWithLayer = props => {
  const handleOnEachFeature = (feature, layer) => {
    let popupContent = "";
    if (props.popupContent.length) popupContent = props.popupContent;
    else if (feature.properties && feature.properties.popupContent) {
      popupContent = feature.properties.popupContent;
    }

    layer.bindPopup(popupContent);
    layer.on({
      mouseover: e => {
        layer.openPopup();
      },
      mouseout: e => {
        layer.closePopup();
      }
    });
  };
  return <GeoJSON {...props} onEachFeature={handleOnEachFeature} />;
}


GeoJSONWithLayer.defaultProps = {
  popupContent: '',
}

Он поддерживает передачу дополнительных реквизитов вместе со свойствами по умолчанию и содержит всплывающую логику привязки для слоя. Теперь это можно использовать так: 

const MapExample = props => {
  const style = () => ({
    color: "green",
    weight: 20
  });

  const freeBus = {
    type: "FeatureCollection",
    features: [
      {
        type: "Feature",
        geometry: {
          type: "LineString",
          coordinates: [
            [-105.00341892242432, 39.75383843460583],
            [-105.0008225440979, 39.751891803969535],
            [-104.99820470809937, 39.74979664004068],
            [-104.98689651489258, 39.741052354709055]
          ]
        },
        properties: {
          popupContent:
            "This is a free bus line that will take you across downtown.",
          underConstruction: false
        },
        id: 1
      }
    ]
  };

  return (
    <Map zoom={14} center={{ lat: 39.74739, lng: -105 }}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <GeoJSONWithLayer
        popupContent={"Some content goes here..."}
        data={freeBus}
        style={style}
      />
    </Map>
  );
};
...