Для рисования ломанной с разрывами в Yandex Maps вам понадобится использовать API Yandex Maps JavaScript.
В начале вам необходимо создать карту на вашей странице, используя следующий код:
<div id="map" style="width: 600px; height: 400px;"></div> <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script> <script type="text/javascript"> ymaps.ready(init); function init() { var myMap = new ymaps.Map("map", { center: [55.76, 37.64], zoom: 10 }); } </script>
Затем вы должны получить координаты для каждого сегмента вашей ломанной с разрывами. Эти координаты вы можете получить из ваших исходных данных или из базы данных.
После этого вы можете нарисовать ломанную, используя ymaps.Polyline
. Ниже приведен код, который рисует ломанную линию с разрывами, исходя из предоставленных координат:
function drawPolylineWithGaps(map, coordinates) { var polylinePoints = []; var gapIndexes = []; coordinates.forEach(function(coord, index) { polylinePoints.push(coord); if (index < coordinates.length - 1) { var currentCoord = coordinates[index]; var nextCoord = coordinates[index + 1]; var distance = ymaps.coordSystem.geo.getDistance(currentCoord, nextCoord); if (distance > 10000) { // задайте свой порог для разрыва gapIndexes.push(index); } } }); var startIndex = 0; var polylines = []; gapIndexes.forEach(function(gapIndex) { var segmentPoints = polylinePoints.slice(startIndex, gapIndex + 1); var polyline = new ymaps.Polyline(segmentPoints, {}, { strokeColor: "#0000FF", strokeWidth: 2 }); polylines.push(polyline); startIndex = gapIndex + 1; }); // для последнего отрезка var lastSegmentPoints = polylinePoints.slice(startIndex); var lastPolyline = new ymaps.Polyline(lastSegmentPoints, {}, { strokeColor: "#0000FF", strokeWidth: 2 }); polylines.push(lastPolyline); polylines.forEach(function(polyline) { map.geoObjects.add(polyline); }); } // Использование: var coordinates = [ [55.75, 37.60], // координаты первой точки [55.74, 37.61], // координаты второй точки // ... добавьте здесь координаты остальных точек [55.80, 37.55] // координаты последней точки ]; drawPolylineWithGaps(myMap, coordinates);
В этом коде мы определяем функцию drawPolylineWithGaps
, которая принимает карту и массив координат. Затем мы проходимся по массиву координат, вычисляем расстояние между текущей и следующей точкой и проверяем, превышает ли это расстояние порог. Если да, то мы добавляем текущую точку в массив точек сегмента и сохраняем индекс, чтобы разделить линию на сегменты позже.
Далее мы создаем новую полилинию для каждого сегмента и добавляем ее на карту с помощью map.geoObjects.add(polyline)
.
Просто добавьте свои собственные координаты в массив coordinates
и вызовите drawPolylineWithGaps(myMap, coordinates)
, чтобы отобразить вашу ломанную линию с разрывами на карте Yandex Maps.