Можно ли вообще использовать регионы Яндекс карт (https://tech.yandex.ru/maps/jsapi/doc/2.1/dg/concepts/regions-docpage/#regions__how-to-add)
в реакт приложении, используя react-yandex-map
-
я каком смысле можно ли ?Вам нужен пример или как?– Randall9 авг 2019 в 12:54
-
Используй гугл мапс! Они намного проще в этом плане Если конечно у тебя не проект с 20к посещений в месяц– f0r3st 1339 авг 2019 в 13:50
-
Да, хотя бы пример– Ваня Дмитрачков9 авг 2019 в 13:51
Добавить комментарий
|
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>
);
}