Реакт-листовка центра массива позиций - PullRequest
Новая
       7

Реакт-листовка центра массива позиций

0 голосов
/ 12 ноября 2018

Helllo! Я пытаюсь установить центр карты на основе следующего массива: 

[[-23.568767,-46.649907],[-23.565972,-46.650859],[-23.563703,-46.653542],[-23.616359,-46.664749],[-23.624203,-46.683369],[-23.565972,-46.650859],[-23.572424,-46.65384],[-23.610235,-46.69591],[-23.609215,-46.69753],[-23.608786,-46.697448],[-23.617262,-46.674802],[-23.620757,-46.673658],[-23.625349,-46.692239],[-23.565972,-46.650859],[-23.564909,-46.654558],[-23.642676,-46.672727],[-23.608786,-46.697448],[-23.610652,-46.686046],[-23.573285,-46.689102],[-23.609215,-46.667182],[-23.609215,-46.667182],[-23.60997,-46.667902],[-23.584718,-46.675473],[-23.584718,-46.675473],[-23.607909,-46.692784],[-23.594718,-46.635473],[-23.564552,-46.654713],[-23.573263,-46.695077],[-23.633372,-46.680053],[-23.64717,-46.727572],[-23.576715,-46.68747],[-23.609215,-46.667182],[-23.609215,-46.667182],[-23.52631,-46.616194],[-23.614064,-46.668883],[-23.608786,-46.697448],[-23.587921,-46.6767],[-23.573691,-46.643678],[-23.573691,-46.643678],[-23.627158,-46.675183],[-23.573263,-46.695077],[-23.573263,-46.695077],[-23.572269,-46.689863],[-23.573263,-46.695077],[-23.628932,-46.665837],[-23.61506,-46.659242],[-23.528071,-46.586955],[-23.595269,-46.669645],[-23.596066,-46.686917],[-23.627158,-46.675183]]

Я пытался получить границы с Leaflet.latLngBounds: 

const bounds = L.latLngBounds(latLngs);

и получил следующие ошибки:

leaflet-src.js: 1658 Uncaught TypeError: Невозможно прочитать свойство 'lat' из ноль в Object.project (leaflet-src.js: 1658) на Object.latLngToPoint (leaflet-src.js: 1497) в NewClass.project (leaflet-src.js: 3931) в NewClass._getNewPixelOrigin (leaflet-src.js: 4425) в NewClass._move (leaflet-src.js: 4173) в NewClass._resetView (leaflet-src.js: 4135) в NewClass.setView (leaflet-src.js: 3190) в NewClass.initialize (leaflet-src.js: 3132) в новом NewClass (leaflet-src.js: 300) в Map.createLeafletElement (Map.js: 99)

Uncaught TypeError: Невозможно прочитать свойство 'off' из неопределенного на Map.componentWillUnmount (Map.js: 258) at callComponentWillUnmountWithTimer (react-dom.development.js: 15784) в HTMLUnknownElement.callCallback (react-dom.development.js: 149) в Object.invokeGuardedCallbackDev (react-dom.development.js: 199) at invokeGuardedCallback (react-dom.development.js: 256) at safeCallComponentWillUnmount (react-dom.development.js: 15791) at commitUnmount (react-dom.development.js: 16159) at commitNestedUnmounts (react-dom.development.js: 16190) at unmountHostComponents (react-dom.development.js: 16446) at commitDeletion (response-dom.development.js: 16498)

Вышеуказанная ошибка произошла в компоненте: на карте (созданной ShopMap) в ShopMap (создается приложением) в div (создан Context.Consumer) в StyledComponent (создан styled.div) в div (созданный приложением) в div (создан Context.Consumer) в StyledComponent (создан styled.div) в приложении (создан AppContainer) в AppContainer (создается Connect (AppContainer)) в соединении (AppContainer) в провайдере

Uncaught Error: возникла перекрестная ошибка. Реакция не имеет доступ к актуальному объекту ошибки в разработке. в Object.invokeGuardedCallbackDev (Reaction-dom.development.js: 210) at invokeGuardedCallback (react-dom.development.js: 256) at commitRoot (response-dom.development.js: 17442) в completeRoot (реагировать-dom.development.js: 18898) at executeWorkOnRoot (response-dom.development.js: 18827) на PerforWork (реагировать на dom.development.js: 18735) в executeSyncWork (response-dom.development.js: 18709) по запросуWork (response-dom.development.js: 18578) на scheduleWork (response-dom.development.js: 18387) at scheduleRootUpdate (response-dom.development.js: 19055)

Затем я попытался создать FeatureGroup и добавить маркеры на основе массива: 

const group = new L.FeatureGroup();

positions.forEach((latitude, longitude) => {
  L.marker([latitude, longitude]).addTo(group);
});

Но результаты следующие: 

LatLngBounds {}

и компонент Карта: 

const ShopMap = ({ shops }) => {
  const positions = shops.reduce((newArray, shop) => {
    return [
      ...newArray,
      {
        latitude: shop.latitude,
        longitude: shop.longitude
      }
    ]
  }, []);

  return (
    <Map center={getLatLngBounds(positions)} zoom={15}>
      <TileLayer
        attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {shops &&
        shops.map(({ latitude, longitude, revenueLowerThanExpected, name }) => {
          return (
            <Marker
              key={name}
              icon={revenueLowerThanExpected ? redMarker : blueMarker}
              position={[
                latitude,
                longitude
              ]}
            />
          );
        })}
    </Map>
  );
};

Кто-нибудь может мне помочь с этим?

1 Ответ

0 голосов
/ 14 ноября 2018

Map.center свойство ожидает значение latLng, но вы ищете Map.bounds свойство , которое:

Прямоугольник для карты, чтобы содержать. Это будет по центру, и карта увеличит изображение настолько близко, насколько это возможно, пока еще будет отображать все границы

В случае значения Map.bounds оно может быть представлено в виде массива {lat,lng} значений, в вашем случае 

const getLatLngBounds = () => {
  return  [
    [-23.568767, -46.649907],
    [-23.565972, -46.650859],
    [-23.563703, -46.653542],
    [-23.616359, -46.664749],
    [-23.624203, -46.683369],
    ...
  ];
} 




 <Map bounds={getLatLngBounds()} >
    <TileLayer 
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'/>
</Map>

Подробнее см. в этом примере .

Или как L.latLngBounds значение, вот демо для вашей справки.

...