gribnoysup / react-yandex-maps

Yandex Maps API bindings for React
MIT License
327 stars 116 forks source link

Как добавить метод searchContaining? #285

Closed dcristafovici closed 3 years ago

dcristafovici commented 3 years ago

Нарисовал полигоны, импортировал, прохожусь массивом и для каждого элемента вызываю метод searchContaining, дабы определить если мои координаты в полигоне. Но searchContaining показывает что нету такой функции, может стоить добавить как modules но названия скорее другое. Или можеи есть другой способ искать по полигонам

mmarkelov commented 3 years ago

@denibudeyko Сложно сказать, что не так, без кода. Собрал пример, который есть в песочнице карт.

import React, { useEffect, useRef, useState } from "react";
import { YMaps, Map, Circle } from "react-yandex-maps";

const POINTS = [
  {
    type: "Point",
    coordinates: [55.73, 37.75]
  },
  {
    type: "Point",
    coordinates: [55.1, 37.45]
  },
  {
    type: "Point",
    coordinates: [55.25, 37.35]
  }
];

export default function App() {
  const map = useRef(null);
  const circle = useRef(null);
  const [ymaps, setYmaps] = useState(null);
  const [objects, setObjects] = useState([]);

  useEffect(() => {
    if (ymaps && map.current) {
      const objs = ymaps.geoQuery(POINTS).addToMap(map.current);
      setObjects(objs);
    }
  }, [ymaps, map]);

  return (
    <div className="App">
      <YMaps>
        <Map
          instanceRef={map}
          modules={["geoQuery"]}
          state={{
            center: [55.43, 37.75],
            zoom: 8
          }}
          onLoad={(ymapsInstance) => {
            setYmaps(ymapsInstance);
          }}
          options={{ searchControlProvider: "yandex#search" }}
        >
          <Circle
            instanceRef={circle}
            onDrag={() => {
              const objectsInsideCircle = objects.searchInside(circle.current);
              objectsInsideCircle.setOptions("preset", "islands#redIcon");
              objects
                .remove(objectsInsideCircle)
                .setOptions("preset", "islands#blueIcon");
            }}
            geometry={[[55.43, 37.7], 10000]}
            options={{ draggable: true }}
          />
        </Map>
      </YMaps>
    </div>
  );
}
dcristafovici commented 3 years ago

@mmarkelov Есть такие данные image

Через создание карты сделал нужные мне облости. При вводе адресса я получаю координаты того место что ввел пользователь. Теперь мне надо сделать проверку, присуствует ли данный адрес в одной из облости, или нет( если да то какой ID) Вот сам код

const loadSuggest = ymaps => {
    const suggestView = new ymaps.SuggestView("suggest");
    const bambooCords = [55.747159, 37.539070]
    suggestView.events.add("select", (e) => {
      const displayName = e.get('item').displayName
      let myGeocoder = ymaps.geocode(displayName);
      const features = GeoFeatures.features
      myGeocoder.then(
        async function (res) {
          const coords = await res.geoObjects.get(0).geometry._coordinates;
          console.log(coords)
          let distance = ymaps.coordSystem.geo.getDistance(bambooCords, coords);
          distance = parseInt(distance);
          distance = distance / 1000;
          setUserAddress(displayName, distance)
        }
      )
    });
  };
<YMaps
          enterprise
          query={{
            apikey: "мой-апи",
          }}
          >
          <Map
            onLoad={ymaps => loadSuggest(ymaps)}
            defaultState={{ center: [55.751574, 37.573856],  zoom: 9 }}
            modules={["SuggestView", "geocode", "coordSystem.geo"]}
          />
          <input type="text" id='suggest' placeholder='Указать адрес' defaultValue={addressState.address || ''}  />
        </YMaps>
dcristafovici commented 3 years ago

https://yandex.ru/dev/maps/jsbox/2.1/delivery_zones Вот пример что я хочу реализовать, там есть метод searchContaining() который не доступен в данном пакете. Или его может стоит как модуль подключать

mmarkelov commented 3 years ago

@denibudeyko я не до конца понимаю как вы добавляете области на карту. Их нужно добавлять через метод addToMap:

const objs = ymaps.geoQuery(POINTS).addToMap(map.current);

В таком случае у объекта objs будет большое количество методов, в том числе и searchContaining. Дополнительно нужно будет подключить только модуль geoQuery

dcristafovici commented 3 years ago

@mmarkelov В том то и дело что я их не добавлял на карту. Т.е надо их сначала добавить и уже потом будут доступны такие методы как searchContaining ?

mmarkelov commented 3 years ago

@denibudeyko посмотрел документацию - необязательно добавлять на карту, но searchContaining будет доступна после вызова функции geoQuery, где на вход функции вы передаете области:

const objs = ymaps.geoQuery(POINTS)
dcristafovici commented 3 years ago

@mmarkelov Заменил код на такой

Пока отказался от поиска хотел просто проверить по тестовым координатым. Функция searchInside или searchContaining отрабатывают одинакого но результат я получаю GeoQueryResult с objects где objects пустой объект, хотя там 100% верные координаты попадают в одну из область... Не знаю даже в чем может быть проблема...

UPD Все выдает верно, оказывается проблема была в координатах, почему то неправильнйы JSON, попробовал пример с яндекса + адресс Санкт Петербурга и результат есть.

UPD2


  useEffect(() => {
    if (ymaps && map.current) {
      const objs = ymaps.geoQuery(POINTS).addToMap(map.current);
      setObjects(objs);
    }
  }, [ymaps, map]);

Данный код что есть и у вас. Подскажите пожалуйста у вас правильно вставляется setObjects? У меня почему то не ставит значения для useState

  const [objects, setObjects] = useState([])
useEffect(() => {
    if (ymaps && map.current) {
      const objs = ymaps.geoQuery(GeoCoordinates).addToMap(map.current)
     setObjects(objs)
      console.log(objects) // []
    }
  }, [map, ymaps])

UPD3 @mmarkelov Посмотрел ваш пример, у вас objects тоже выдает пустой массив

dcristafovici commented 3 years ago

Я разобрался с координатами, честно сказать проблема непонятно мне до сих пор, точнее почему так происходит. Возьмем к примеру Москва Сити, координаты 55.747159, 37.539070. При экспорте карты, все координаты почемуто были наооборот, долгота и широта была по другому, и за чего это была в другом месте совсем. И эта же проблема здесь Сайт примера яндекса К примеру там Санкт Петербург и центр для карты ставят center: [30.264981955459618, 59.9567962610097],, если вбить координаты мы получаем _Захедан, Систан и Белуджистан, Иран, если вбить наооборот то Санкт Петербург. И в JSON что экспортировали точно так же была перепутаны. Поменял местами все работает. И как я понял эта ошибку не только у нашей карты а у и самого API @mmarkelov Сталкивались с этим?)

mmarkelov commented 3 years ago

@denibudeyko с такой проблемой не сталкивался, посмотрел в чем проблема, возможно пример на яндексе работал из-за параметра coordorder. Возможно использование этого параметра тоже вам поможет:

<YMaps query={{ coordorder: "longlat" }}>
dcristafovici commented 3 years ago

@mmarkelov Да , спасибо решил, я просто поменял координаты местами, а по поводу setObjects, он не понадобился. Спасибо большое за помощь )