0

Есть маршрут и точки на карте, точек будет очень много.
Как показать только те, которые ближе всего к маршруту (на пример в пределах 5 км от маршрута)?
В примере ниже 4 точки и четвертая находиться далеко, её показывать не нужно.

var myMap, ymaps;
			// Инициализировать карту
			function init() {
				var body = $('body'),
					myMap = document.getElementById("map");

				if (!myMap) return;

				myMap = new ymaps.Map(myMap, {
					center: [53.940944, 27.596874],
					zoom: 7,
					controls: []
				});

				myMap.controls.add("zoomControl", {});
				myMap.behaviors.disable('scrollZoom');
        
        var data = {
					'points': [
						{
							"infoPoint": '<div class="ttl">Какойто текст о месте</a>',
							"coords": [53.510657, 26.699385]
						},
						{
							"infoPoint": '<div class="ttl">Какойто текст о месте</a>',
							"coords": [53.447578, 26.478903]
						},
						{
							"infoPoint": '<div class="ttl">Какойто текст о месте</a>',
							"coords": [53.442658, 26.570570]
						},
            {
							"infoPoint": '<div class="ttl">Какойто текст о месте</a>',
							"coords": [53.664479, 26.458647]
						}
					]
				};
        
        function createPlacemark(item) {
					var place = new ymaps.Placemark(
						item.coords,
						{
							balloonContent: item.infoPoint
						},
            {
              preset: 'islands#dotIcon',
              iconColor: '#735184'
            }
					);
					myMap.geoObjects.add(place);
				}

				data.points.forEach(function(item, index){
						createPlacemark(item);
				});
        
				var multiRoute = new ymaps.multiRouter.MultiRoute(
					{
						referencePoints: [[53.902496, 27.561481], [53.451143, 26.474315]],
						params: {
							results: 1,
							routingMode: 'auto'
						}
					},
					{
						routeStrokeWidth: 5,
						routeStrokeColor: '#c51216',
						routeActiveStrokeWidth: 5,
						routeActiveStrokeColor: '#c51216',

						routeActivePedestrianSegmentStrokeColor: "#c51216",

						wayPointVisible: true,
						boundsAutoApply: true
					}
				)

				myMap.geoObjects.add(multiRoute);
			}
				$(document).ready(function(){
					if (ymaps != undefined) ymaps.ready(init);
				});
#map{
height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map"></div>

9
  • Вы можете фильтровать точки по удаленности от маршрута с помощью geoQuery
    – Reni
    Commented 26 янв. 2018 в 11:46
  • то есть в polyline мне передавать свой маршрут?
    – Karalahti
    Commented 26 янв. 2018 в 12:14
  • да, вам нужно работать с полилинией маршрута и точками, как с обычными геообъектами
    – Reni
    Commented 26 янв. 2018 в 12:23
  • sortByDistance для данной задачи не подходит, так как он просто сортирует все точки по удалению, мне же нужно вывести только те которые находятся вблизи маршрута, то есть брать координаты всего маршрута и проверять с координатами всех имеющихся точек, если они ближе к примеру 5км то показывать(я так понимаю) все что в области 5 км от маршрута как показано на картинке prntscr.com/i7512b
    – Karalahti
    Commented 29 янв. 2018 в 12:44

2 ответа 2

0

Если точек очень много, то я бы посоветовала что-то такое:

  1. Грубо посчитать прямоугольную область, описывающую маршрут с нужным запасом.
  2. Отфильтровать точки, попадающие в эту область.
  3. Для всех точек, попадающих в область, через метод getClosest вычислить точное расстояние до линии и отсеять те, которые находятся дальше нужного.
2
  • Ну такая идея была, только как сделать прямоугольную область не знаю, так как маршрут может быть разным, как 2 точки так и 5
    – Karalahti
    Commented 3 февр. 2018 в 10:03
  • Ну можно собрать все точки в массив и через метод tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/… получить прямоугольную границу Commented 5 февр. 2018 в 11:31
0

Нашел решение сам, вот рабочий пример

#map{
  width: 100%;
  height: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map"></div>
<script>
var myMap, ymaps;
			// Инициализировать карту
			function init() {
				var winWidth 	= $(window).width(),
					body = $('body'),
					myMap 		= document.getElementById("map");
				if (!myMap) return;
				myMap = new ymaps.Map(myMap, {
					center: [53.940944, 27.596874],
					zoom: 7,
					controls: []
				});
				
				myMap.controls.add("zoomControl", {});
				
        /*произвольные точки на карте, взят с песочницы яндекс карты, можно сделать свои*/
				var data = {
    "type": "FeatureCollection",
    "features": [
        {
        	"type": "Feature", "id": 0, "geometry": {"type": "Point", "coordinates": [55.831903, 37.411961]}, "properties": {"balloonContentHeader": "<font size=3><b><a target='_blank' href='https://yandex.ru'>Здесь может быть ваша ссылка</a></b></font>", "balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em>  <input></p><p><input type='submit' value='Отправить'></p>", "balloonContentFooter": "<font size=1>Информация предоставлена: </font> <strong>этим балуном</strong>", "clusterCaption": "<strong><s>Еще</s> одна</strong> метка", "hintContent": "<strong>Текст  <s>подсказки</s></strong>"}},
        {"type": "Feature", "id": 1, "geometry": {"type": "Point", "coordinates": [55.763338, 37.565466]}, "properties": {"balloonContentHeader": "<font size=3><b><a target='_blank' href='https://yandex.ru'>Здесь может быть ваша ссылка</a></b></font>", "balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em>  <input></p><p><input type='submit' value='Отправить'></p>", "balloonContentFooter": "<font size=1>Информация предоставлена: </font> <strong>этим балуном</strong>", "clusterCaption": "<strong><s>Еще</s> одна</strong> метка", "hintContent": "<strong>Текст  <s>подсказки</s></strong>"}},
        {"type": "Feature", "id": 2, "geometry": {"type": "Point", "coordinates": [55.763338, 37.565466]}, "properties": {"balloonContentHeader": "<font size=3><b><a target='_blank' href='https://yandex.ru'>Здесь может быть ваша ссылка</a></b></font>", "balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em>  <input></p><p><input type='submit' value='Отправить'></p>", "balloonContentFooter": "<font size=1>Информация предоставлена: </font> <strong>этим балуном</strong>", "clusterCaption": "<strong><s>Еще</s> одна</strong> метка", "hintContent": "<strong>Текст  <s>подсказки</s></strong>"}},
        {"type": "Feature", "id": 3, "geometry": {"type": "Point", "coordinates": [55.744522, 37.616378]}, "properties": {"balloonContentHeader": "<font size=3><b><a target='_blank' href='https://yandex.ru'>Здесь может быть ваша ссылка</a></b></font>", "balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em>  <input></p><p><input type='submit' value='Отправить'></p>", "balloonContentFooter": "<font size=1>Информация предоставлена: </font> <strong>этим балуном</strong>", "clusterCaption": "<strong><s>Еще</s> одна</strong> метка", "hintContent": "<strong>Текст  <s>подсказки</s></strong>"}},
        {"type": "Feature", "id": 4, "geometry": {"type": "Point", "coordinates": [55.780898, 37.642889]}, "properties": {"balloonContentHeader": "<font size=3><b><a target='_blank' href='https://yandex.ru'>Здесь может быть ваша ссылка</a></b></font>", "balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em>  <input></p><p><input type='submit' value='Отправить'></p>", "balloonContentFooter": "<font size=1>Информация предоставлена: </font> <strong>этим балуном</strong>", "clusterCaption": "<strong><s>Еще</s> одна</strong> метка", "hintContent": "<strong>Текст  <s>подсказки</s></strong>"}},
        {"type": "Feature", "id": 5, "geometry": {"type": "Point", "coordinates": [55.793559, 37.435983]}, "properties": {"balloonContentHeader": "<font size=3><b><a target='_blank' href='https://yandex.ru'>Здесь может быть ваша ссылка</a></b></font>", "balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em>  <input></p><p><input type='submit' value='Отправить'></p>", "balloonContentFooter": "<font size=1>Информация предоставлена: </font> <strong>этим балуном</strong>", "clusterCaption": "<strong><s>Еще</s> одна</strong> метка", "hintContent": "<strong>Текст  <s>подсказки</s></strong>"}},
        {"type": "Feature", "id": 6, "geometry": {"type": "Point", "coordinates": [55.800584, 37.675638]}, "properties": {"balloonContentHeader": "<font size=3><b><a target='_blank' href='https://yandex.ru'>Здесь может быть ваша ссылка</a></b></font>", "balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em>  <input></p><p><input type='submit' value='Отправить'></p>", "balloonContentFooter": "<font size=1>Информация предоставлена: </font> <strong>этим балуном</strong>", "clusterCaption": "<strong><s>Еще</s> одна</strong> метка", "hintContent": "<strong>Текст  <s>подсказки</s></strong>"}},
        {"type": "Feature", "id": 7, "geometry": {"type": "Point", "coordinates": [55.716733, 37.589988]}, "properties": {"balloonContentHeader": "<font size=3><b><a target='_blank' href='https://yandex.ru'>Здесь может быть ваша ссылка</a></b></font>", "balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em>  <input></p><p><input type='submit' value='Отправить'></p>", "balloonContentFooter": "<font size=1>Информация предоставлена: </font> <strong>этим балуном</strong>", "clusterCaption": "<strong><s>Еще</s> одна</strong> метка", "hintContent": "<strong>Текст  <s>подсказки</s></strong>"}},
        {"type": "Feature", "id": 8, "geometry": {"type": "Point", "coordinates": [55.775724, 37.56084]}, "properties": {"balloonContentHeader": "<font size=3><b><a target='_blank' href='https://yandex.ru'>Здесь может быть ваша ссылка</a></b></font>", "balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em>  <input></p><p><input type='submit' value='Отправить'></p>", "balloonContentFooter": "<font size=1>Информация предоставлена: </font> <strong>этим балуном</strong>", "clusterCaption": "<strong><s>Еще</s> одна</strong> метка", "hintContent": "<strong>Текст  <s>подсказки</s></strong>"}},
        {"type": "Feature", "id": 9, "geometry": {"type": "Point", "coordinates": [55.822144, 37.433781]}, "properties": {"balloonContentHeader": "<font size=3><b><a target='_blank' href='https://yandex.ru'>Здесь может быть ваша ссылка</a></b></font>", "balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em>  <input></p><p><input type='submit' value='Отправить'></p>", "balloonContentFooter": "<font size=1>Информация предоставлена: </font> <strong>этим балуном</strong>", "clusterCaption": "<strong><s>Еще</s> одна</strong> метка", "hintContent": "<strong>Текст  <s>подсказки</s></strong>"}},
        {"type": "Feature", "id": 10, "geometry": {"type": "Point", "coordinates": [55.87417, 37.669838]}, "properties": {"balloonContentHeader": "<font size=3><b><a target='_blank' href='https://yandex.ru'>Здесь может быть ваша ссылка</a></b></font>", "balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em>  <input></p><p><input type='submit' value='Отправить'></p>", "balloonContentFooter": "<font size=1>Информация предоставлена: </font> <strong>этим балуном</strong>", "clusterCaption": "<strong><s>Еще</s> одна</strong> метка", "hintContent": "<strong>Текст  <s>подсказки</s></strong>"}},
        {"type": "Feature", "id": 11, "geometry": {"type": "Point", "coordinates": [55.71677, 37.482338]}, "properties": {"balloonContentHeader": "<font size=3><b><a target='_blank' href='https://yandex.ru'>Здесь может быть ваша ссылка</a></b></font>", "balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em>  <input></p><p><input type='submit' value='Отправить'></p>", "balloonContentFooter": "<font size=1>Информация предоставлена: </font> <strong>этим балуном</strong>", "clusterCaption": "<strong><s>Еще</s> одна</strong> метка", "hintContent": "<strong>Текст  <s>подсказки</s></strong>"}},
        {"type": "Feature", "id": 20, "geometry": {"type": "Point", "coordinates": [55.698261, 37.730838]}, "properties": {"balloonContentHeader": "<font size=3><b><a target='_blank' href='https://yandex.ru'>Здесь может быть ваша ссылка</a></b></font>", "balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em>  <input></p><p><input type='submit' value='Отправить'></p>", "balloonContentFooter": "<font size=1>Информация предоставлена: </font> <strong>этим балуном</strong>", "clusterCaption": "<strong><s>Еще</s> одна</strong> метка", "hintContent": "<strong>Текст  <s>подсказки</s></strong>"}},
        {"type": "Feature", "id": 21, "geometry": {"type": "Point", "coordinates": [55.6338, 37.564769]}, "properties": {"balloonContentHeader": "<font size=3><b><a target='_blank' href='https://yandex.ru'>Здесь может быть ваша ссылка</a></b></font>", "balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em>  <input></p><p><input type='submit' value='Отправить'></p>", "balloonContentFooter": "<font size=1>Информация предоставлена: </font> <strong>этим балуном</strong>", "clusterCaption": "<strong><s>Еще</s> одна</strong> метка", "hintContent": "<strong>Текст  <s>подсказки</s></strong>"}},
        {"type": "Feature", "id": 22, "geometry": {"type": "Point", "coordinates": [55.639996, 37.5394]}, "properties": {"balloonContentHeader": "<font size=3><b><a target='_blank' href='https://yandex.ru'>Здесь может быть ваша ссылка</a></b></font>", "balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em>  <input></p><p><input type='submit' value='Отправить'></p>", "balloonContentFooter": "<font size=1>Информация предоставлена: </font> <strong>этим балуном</strong>", "clusterCaption": "<strong><s>Еще</s> одна</strong> метка", "hintContent": "<strong>Текст  <s>подсказки</s></strong>"}},
        {"type": "Feature", "id": 23, "geometry": {"type": "Point", "coordinates": [55.69023, 37.405853]}, "properties": {"balloonContentHeader": "<font size=3><b><a target='_blank' href='https://yandex.ru'>Здесь может быть ваша ссылка</a></b></font>", "balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em>  <input></p><p><input type='submit' value='Отправить'></p>", "balloonContentFooter": "<font size=1>Информация предоставлена: </font> <strong>этим балуном</strong>", "clusterCaption": "<strong><s>Еще</s> одна</strong> метка", "hintContent": "<strong>Текст  <s>подсказки</s></strong>"}},
        {"type": "Feature", "id": 24, "geometry": {"type": "Point", "coordinates": [55.77597, 37.5129]}, "properties": {"balloonContentHeader": "<font size=3><b><a target='_blank' href='https://yandex.ru'>Здесь может быть ваша ссылка</a></b></font>", "balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em>  <input></p><p><input type='submit' value='Отправить'></p>", "balloonContentFooter": "<font size=1>Информация предоставлена: </font> <strong>этим балуном</strong>", "clusterCaption": "<strong><s>Еще</s> одна</strong> метка", "hintContent": "<strong>Текст  <s>подсказки</s></strong>"}},
        {"type": "Feature", "id": 25, "geometry": {"type": "Point", "coordinates": [55.775777, 37.44218]}, "properties": {"balloonContentHeader": "<font size=3><b><a target='_blank' href='https://yandex.ru'>Здесь может быть ваша ссылка</a></b></font>", "balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em>  <input></p><p><input type='submit' value='Отправить'></p>", "balloonContentFooter": "<font size=1>Информация предоставлена: </font> <strong>этим балуном</strong>", "clusterCaption": "<strong><s>Еще</s> одна</strong> метка", "hintContent": "<strong>Текст  <s>подсказки</s></strong>"}},
        {"type": "Feature", "id": 35, "geometry": {"type": "Point", "coordinates": [55.843363, 37.778445]}, "properties": {"balloonContentHeader": "<font size=3><b><a target='_blank' href='https://yandex.ru'>Здесь может быть ваша ссылка</a></b></font>", "balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em>  <input></p><p><input type='submit' value='Отправить'></p>", "balloonContentFooter": "<font size=1>Информация предоставлена: </font> <strong>этим балуном</strong>", "clusterCaption": "<strong><s>Еще</s> одна</strong> метка", "hintContent": "<strong>Текст  <s>подсказки</s></strong>"}},
        {"type": "Feature", "id": 35, "geometry": {"type": "Point", "coordinates": [55.843363, 37.778445]}, "properties": {"balloonContentHeader": "<font size=3><b><a target='_blank' href='https://yandex.ru'>Здесь может быть ваша ссылка</a></b></font>", "balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em>  <input></p><p><input type='submit' value='Отправить'></p>", "balloonContentFooter": "<font size=1>Информация предоставлена: </font> <strong>этим балуном</strong>", "clusterCaption": "<strong><s>Еще</s> одна</strong> метка", "hintContent": "<strong>Текст  <s>подсказки</s></strong>"}},
                {"type": "Feature", "id": 35, "geometry": {"type": "Point", "coordinates": [55.753215, 37.622504]}, "properties": {"balloonContentHeader": "<font size=3><b><a target='_blank' href='https://yandex.ru'>Здесь может быть ваша ссылка</a></b></font>", "balloonContentBody": "<p>Ваше имя: <input name='login'></p><p><em>Телефон в формате 2xxx-xxx:</em>  <input></p><p><input type='submit' value='Отправить'></p>", "balloonContentFooter": "<font size=1>Информация предоставлена: </font> <strong>этим балуном</strong>", "clusterCaption": "<strong><s>Еще</s> одна</strong> метка", "hintContent": "<strong>Текст  <s>подсказки</s></strong>"}}
    ]
};
				/*Создаем свой маршрут*/
        var multiRoute = new ymaps.multiRouter.MultiRoute(
          {
            referencePoints: [
              [55.689722, 37.413623],
              [55.882856, 37.722728]
            ],
            params: {
              results: 1,
              routingMode: 'auto'
            }
          },
          {
            // Внешний вид путевых точек.
            pinIconFillColor: '#c51216',
            pinActiveIconFillColor: '#c51216',
            routeStrokeWidth: 5,
            routeStrokeColor: '#c51216',
            routeActiveStrokeWidth: 5,
            routeActiveStrokeColor: '#c51216',
            routeActivePedestrianSegmentStrokeColor: "#c51216",
            wayPointVisible: true,
            boundsAutoApply: true
          }
        );
				myMap.geoObjects.add(multiRoute);

				/*Расстояние до маршрута*/
				var threshold = 2000;
				
        
        /*когда маршрут построился без ошибок*/
        multiRoute.model.events.add('requestsuccess', function() {
          var lineGeoObjects = multiRoute.getRoutes().toArray().map(route => new ymaps.Polyline(routeToLineString(route)));

          var lines =  new ymaps.GeoObjectCollection({ children: lineGeoObjects },{ visible: false });

          myMap.geoObjects.add(lines);

          $.each(data.features, function (index, element){
            var coords = element.geometry.coordinates;

            var isNearSomeRoute = lines.toArray().some(line => {var closest = line.geometry.getClosest(coords);
                 return closest.distance < threshold;
            });
            if(isNearSomeRoute){
              var myPlacemark = new ymaps.Placemark(coords, {
                hintContent: 'Москва!',
                balloonContent: 'Столица России'
              });
              myMap.geoObjects.add(myPlacemark);
            }
          });
        });

				/*Функция которая считает попадает ли точка в диапозон threshold*/
				function routeToLineString(route) {
					var points = route.getPaths().toArray()
						.map(x => x.getSegments().toArray())
				.reduce((s, x) => s.concat(x), [])
				.map(x => x.geometry.getCoordinates())
				.reduce((s, x) => s.concat(x), []);
					return { type: 'LineString', coordinates: points };
				}
			}

			$(document).ready(function(){
				if (ymaps != undefined) ymaps.ready(init);
			});
</script>

Ваш ответ

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

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