1

Можно ли вообще использовать регионы Яндекс карт (https://tech.yandex.ru/maps/jsapi/doc/2.1/dg/concepts/regions-docpage/#regions__how-to-add)
в реакт приложении, используя react-yandex-map

3
  • я каком смысле можно ли ?Вам нужен пример или как?
    – Randall
    9 авг 2019 в 12:54
  • Используй гугл мапс! Они намного проще в этом плане Если конечно у тебя не проект с 20к посещений в месяц
    – f0r3st 133
    9 авг 2019 в 13:50
  • Да, хотя бы пример 9 авг 2019 в 13:51

1 ответ 1

1

Рабочий код с react-yandex-maps основная часть примера был взят отсюда

import { YMaps, Map } from "react-yandex-maps";

const mapState = {
  center: [48.704272, 65.60203],
  zoom: 4
};

const COLORS = ["#F0F075", "#FB6C3F", "#3D4C76", "#49C0B5"];

function App() {
  const mapRef = React.createRef(null);

  const getRegions = ymaps => {
    if (mapRef && mapRef.current) {
      var objectManager = new ymaps.ObjectManager();
      ymaps.borders
        .load("KZ", {
          lang: "ru",
          quality: 2
        })
        .then(function(result) {
          // Очередь раскраски.
          var queue = [];
          // Создадим объект regions, где ключи это ISO код региона.
          var regions = result.features.reduce(function(acc, feature) {
            // Добавим ISO код региона в качестве feature.id для objectManager.
            var iso = feature.properties.iso3166;
            feature.id = iso;
            // Добавим опции региона по умолчанию.
            feature.options = {
              fillOpacity: 0.6,
              strokeColor: "#FFF",
              strokeOpacity: 0.5
            };
            acc[iso] = feature;
            return acc;
          }, {});
          // Функция, которая раскрашивает регион и добавляет всех нераскрасшенных соседей в очередь на раскраску.
          function paint(iso) {
            var allowedColors = COLORS.slice();
            // Получим ссылку на раскрашиваемый регион и на его соседей.
            var region = regions[iso];
            var neighbors = region.properties.neighbors;
            // Если у региона есть опция fillColor, значит мы его уже раскрасили.
            if (region.options.fillColor) {
              return;
            }
            // Если у региона есть соседи, то нужно проверить, какие цвета уже заняты.
            if (neighbors.length !== 0) {
              neighbors.forEach(function(neighbor) {
                var fillColor = regions[neighbor].options.fillColor;
                // Если регион раскрашен, то исключаем его цвет.
                if (fillColor) {
                  var index = allowedColors.indexOf(fillColor);
                  if (index !== -1) {
                    allowedColors.splice(index, 1);
                  }
                  // Если регион не раскрашен, то добавляем его в очередь на раскраску.
                } else if (queue.indexOf(neighbor) === -1) {
                  queue.push(neighbor);
                }
              });
            }
            // Раскрасим регион в первый доступный цвет.
            region.options.fillColor = allowedColors[0];
          }
          for (var iso in regions) {
            // Если регион не раскрашен, добавим его в очередь на раскраску.
            if (!regions[iso].options.fillColor) {
              queue.push(iso);
            }
            // Раскрасим все регионы из очереди.
            while (queue.length > 0) {
              paint(queue.shift());
            }
          }
          // Добавим регионы на карту.
          result.features = [];
          for (var reg in regions) {
            result.features.push(regions[reg]);
          }
          objectManager.add(result);
          mapRef.current.geoObjects.add(objectManager);
        });
    }
  };

  return (
    <div className="App">
      <YMaps>
        <Map
          // Создаем ссылку на инстанс мапа, чтобы использовать его
          instanceRef={mapRef}
          state={mapState}
          // Используем коллбэк функцию при загрузке карты
          onLoad={ymaps => getRegions(ymaps)}
          // Подключаем модули регионов и ObjectManager
          modules={["borders", "ObjectManager"]}
        />
      </YMaps>
    </div>
  );
}

И Codesandbox

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.