2

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

2 ответа 2

4

Вам нужно самостоятельно нарисовать линию по координатам поверх улицы с помощью ymaps.Polyline. Можно сделать её полупрозрачной, чтобы добиться такого же эффекта.

Ниже интерактивный пример:

ymaps.ready(init);

function init() {
  // Создаем карту.
  var myMap = new ymaps.Map("map", {
    center: [55.733174, 37.587850],
    zoom: 15
  }, {
    searchControlProvider: 'yandex#search'
  });

  // Создаем ломаную с помощью вспомогательного класса Polyline.
  var myPolyline = new ymaps.Polyline([
    // Указываем координаты вершин ломаной.
    [55.731559, 37.591122],
    [55.732472, 37.589030],
    [55.733174, 37.587850],
    [55.736855, 37.582485]
  ], {
    // Описываем свойства геообъекта.
    // Содержимое балуна.
    balloonContent: "Выделенная улица Льва Толстого"
  }, {
    // Задаем опции геообъекта.
    // Цвет линии.
    strokeColor: "#00AA00",
    // Ширина линии.
    strokeWidth: 8,
    // Коэффициент прозрачности.
    strokeOpacity: 0.4
  });

  // Добавляем линии на карту.
  myMap.geoObjects.add(myPolyline);
}
html,
body,
#map {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
<!--в реальном коде надо не забыть apikey. Ключ можно получить в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
-->
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map"></div>

Кроме того, такого же эффекта можно добиться, создав карту в Конструкторе. Там можно нарисовать линии и настроить для них цвета и прозрачность прямо в графическом интерфейсе и получить готовый код для вставки на сайт или файл с данными, который потом можно отобразить через API Карт.

0

Моя реализация на основе ответа Reni.

Использовался Конструктор. Там были построены необходимые линии. Далее: экспорт -- geojson. Полученный файл подгружается через API Яндекс.Карт таким образом (на основе этого примера):

    $.getJSON('myfile.geojson')
    .done(function (geoJson) {
        geoJson.features.forEach(function (obj) {
            obj.properties.balloonContent = obj.properties.description;
            obj.options = {
                strokeColor: obj.properties.stroke,
                strokeWidth: 6,
                strokeOpacity: 0.5
            }
        });
        objectManager.add(geoJson);
        myMap.geoObjects.add(objectManager);
    });

Параметры линии (цвет, толщина, прозрачность, описание) приходится задавать заново и не все параметры получилось перетянуть из geojson. Не знаю как быть в случае, если нужны, например, линии разной толщины. Автоматически параметры подтягивались бы из geojson, если бы были заданы там через options, но в файле, который сформирован конструктором они заданы через properties.

Ещё одна не очень приятная особенность - конструктор формирует файл, в котором координаты переставлены местами ("долгота, широта" вместо "широта, долгота"). Поэтому, чтобы использовать такой файл, нужно подключать карту, используя параметр coordorder со значением longlat:

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;coordorder=longlat&amp;apikey=<ваш API-ключ>"></script>

Соответственно все координаты в js файле с настройками карты должны быть заданы в "перевёрнутом" виде.

Мне подошёл вариант с конструктором, но при необходимости не проблема формировать geojson самостоятельно, например php-скриптом, получая нужную информацию из базы данных.

Ваш ответ

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

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