主页 / 问题 / 1360362
Accepted
all_possible
Asked:2022-05-13 14:50:14 +0000 UTC2022-05-13 14:50:14 +0000 UTC

用颜色突出显示街道部分（Yandex.Maps API）

  • 772

有必要在 Yandex.Map 上用颜色突出显示街道的一部分。这是它应该是什么样子的示例。请告诉我如何实现这个

yandex-maps-api

2 个回答

  1. Best Answer

    您需要自己使用在街道顶部的坐标绘制一条线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>

    您也可以通过在 Constructor 中创建地图来实现相同的效果。在那里，您可以直接在图形界面中绘制线条并为其设置颜色和透明度，并获取用于插入站点或数据文件的现成代码，然后可以通过 Maps API 显示。

    • 4

  2. 我的实现基于Reni的回答。

    使用了构造函数。在那里建造了必要的线路。下一步：导出——geojson。生成的文件以这种方式通过 Yandex.Maps 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 设置的，它们将自动从 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脚本，从数据库中获取必要的信息。

    • 0

相关问题