Как брать точки на polyline через равные отрезки?

@Electroflower · Регистрация: 05.01.2012

Студворк — интернет-сервис помощи студентам

Я использую движок leafletjs.
Есть polyline, мне нужно нарисовать на ней n объектов (например маркеров). Заранее неизвестно сколько маркеров, но известно, что надо уместить их на линии через равные отрезки(но не обязательно занимать всю линию). У меня нет никаких идей, кто поможет?

Qwerty_Wasd · 04.12.2020, 21:37

Electroflower,
1. на самой ломаной нужны маркеры?
2. То есть в уже готовую ломаную воткнуть массив координат?
3. А ломаная в виде прямой?

@Electroflower · 04.12.2020, 22:57 **[ТС]**

Qwerty_Wasd,
1. на самой ломаной нужны маркеры?
Не особо важно маркеры, имейджи или полигоны, все упирается по сути в получение точек L.latlng или L.Point

2. То есть в уже готовую ломаную воткнуть массив координат?
Не совсем, предположим ломанная определена - это polyline определенной длины. У нас есть точка на polyline, откуда надо откладывать до конца линии объекты(пусть маркеры) на равном расстоянии, это может быть 5 маркеров, а может быть 70.

3. А ломаная в виде прямой?
Ломанная в виде ломанной

Но сама ломанная состоит из прямых по сути, идущих от точки излома к следующей точке излома.

Что удалось нарыть:
1) Можно получить все координаты polyline методом getLatLngs() - это возвратит весь массив точек LatLng[]-это в самом leaflet есть такая функция.
2) есть библа для движка leaflet называется Geometryutil. Она имеет любопытные функции: distance(map, latlngA, latlngB) - эта ф-я возвращает расстояние между точками при текущем зуме карты, то есть например, если измерить distance прямого полилайна без зума -это будет одно расстояние , если зазумим и измерим - уже большее.
Еще есть interpolateOnLine(map, polyline , ratio) - она найдет точку на polyline по значению ratio. А ratio это некоторый коэффициент от 0 до 1, где 0 - это точка начала polyline, а 1 - конец polyline, остальные промежуточные значения десятые и соты можно задавать любые, главное знать как и зачем.

И вот я не могу никак все это богатство заюзать.... Просто мозг кипит.

Qwerty_Wasd · 04.12.2020, 23:21

Сообщение от Electroflower

Ломанная в виде ломанной

JavaScript
1
2
3
4
5
// ломаная линия в виде ломаной
[ [45.51, -122.68], [37.77, -122.43], [34.04, -118.2] ];
 
// ломаная в виде прямой
[ [45.51, -122.68], [37.77, -122.68], [34.04, -122.68] ];

надеюсь так понятнее.

Сообщение от Electroflower

У нас есть точка на polyline, откуда надо откладывать до конца линии объекты(пусть маркеры) на равном расстоянии

видится генерация нужного массива координат и конкатенация с исходным, сортировка, далее перерендерить ломаную. Это навскидку. Еще поизучаю позже либу - рубит.

@Electroflower · 04.12.2020, 23:25 **[ТС]**

Сообщение от Qwerty_Wasd

надеюсь так понятнее.

ну мне было неизвестно что прямую заданную несколькими точками тоже ломанной называют))

Сообщение от Qwerty_Wasd

далее перерендерить ломаную

этот шаг можно точно пропустить, главное получить точки, где рисовать

Сообщение от Qwerty_Wasd

Это навскидку.

Хорошо)

Сообщение от Qwerty_Wasd

Еще поизучаю позже либу - рубит.

Хорошо, спасибо!)

Qwerty_Wasd · 04.12.2020, 23:55

Electroflower,

Сообщение от Electroflower

мне было неизвестно что прямую заданную несколькими точками тоже ломанной называют

на прямой два отрезка с одним общим концом - ломаная

=> —————o——o——o———————

Сообщение от Electroflower

главное получить точки, где рисовать

у вас в массиве - есть координаты, декартовой плоскости по сути - X и Y
Берем первые 2 X и 2 Y - отрезок. Рандом от\до по иксам и игрекам, полученные значения рассматривать как точку на отрезке. Далее проверить лежит ли точка на отрезке. Думаю Вы уже поняли к чему я клоню

@Electroflower · 05.12.2020, 18:10 **[ТС]**

Сообщение от Qwerty_Wasd

на прямой два отрезка с одним общим концом - ломаная => —————o——o——o———————

Ясно)

Сообщение от Qwerty_Wasd

Думаю Вы уже поняли к чему я клоню

Не особооо)

Qwerty_Wasd · 06.12.2020, 13:12

Сообщение от Electroflower

Не особооо)

Сообщение от Qwerty_Wasd

Берем первые 2 X и 2 Y - отрезок. Рандом от\до по иксам и игрекам, полученные значения рассматривать как точку на отрезке. Далее проверить лежит ли точка на отрезке.

если лежит втыкаем в массив, отмеряем расстояние от нее, опять рандом - проверка - втык, опять расстояние - рандом - проверка - втык, опять расстояние - рандом - проверка - втык, опять расстояние - рандом - проверка - втык, опять расстояние - рандом - проверка - втык,
опять расстояние - рандом - проверка - втык, опять расстояние - рандом - проверка - втык, опять расстояние - рандом - проверка - втык, опять расстояние - рандом - проверка - втык, опять расстояние - рандом - проверка - втык, опять расстояние - рандом - проверка - втык,
остановите как надоест.

И так до тех пор, пока существуют координаты для от\до для рандома.

У меня собственно вопрос - почему вообще возникла такая задача?

@Electroflower · 07.12.2020, 09:52 **[ТС]**

Qwerty_Wasd,

Сообщение от Qwerty_Wasd

опять рандом - проверка - втык

Мне просто не особо нравится идея рандомно генерировать точки, так же можно целую вечность искать точку нужную)

Добавлено через 10 минут

Сообщение от Qwerty_Wasd

У меня собственно вопрос - почему вообще возникла такая задача?

Ну вообще задача более широкая там, я пока вообще соображаю как замутить. Короче. есть путь(polyline) и на нем надо нарисовать состав с вагонами, а число вагонов может быть разным, он может быть 1,2, или 5 вагонов, а может 50 или 70 быть. Естественно когда он 5 вагонов, его не надо на весь путь растягивать его, а рисовать вагоны рядом). Вот и думаю как этого достичь)

Добавлено через 18 секунд
Qwerty_Wasd, короче задача непростая

@Eva Rosalene · 08.12.2020, 11:13

Сообщение от Electroflower

короче задача непростая

Да ладно вам. Получить координаты точки по расстоянию от начала на ломанной можно просто "уложив" её на прямую, сопоставив каждому отрезку в 2D интервал на этой самой прямой, потом выяснить, какому из интервалов принадлежит точка и дальше линейно отобразить её координату из этого интервала в интервал по x и по y между началом и концом соответствующего отрезка ломанной.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
function dist(a, b) {
  let dx = a[0] - b[0];
  let dy = a[1] - b[1];
  return Math.sqrt(dx * dx + dy * dy);
}
 
function map(value, fromA, fromB, toA, toB) {
  let vNorm = value - fromA;
  let dFrom = fromB - fromA;
  let dTo = toB - toA;
  let vToNorm = vNorm / dFrom * dTo;
  return vToNorm + toA;
}
 
function findInterval(point, ds) {
  for (let i = 1; i < ds.length; ++i) {
    if (point >= ds[i - 1] && point <= ds[i]) {
      return [i - 1, i];
    }
  }
  throw new Error("point outside of interval");
}
 
function getPolylinePointsByPosition(polyline, ...points) {
  let acc = 0;
  let ds = [0];
  for (let i = 1; i < polyline.length; ++i) {
    let distance = dist(polyline[i - 1], polyline[i]);
    acc += distance;
    ds.push(acc);
  }
  let res = [];
  for (let i = 0; i < points.length; ++i) {
    let [a, b] = findInterval(points[i], ds);
    let x = map(points[i], ds[a], ds[b], polyline[a][0], polyline[b][0]);
    let y = map(points[i], ds[a], ds[b], polyline[a][1], polyline[b][1]);
    res.push([x, y]);
  }
  return res;
}

Как-то так.
Собрала демку на p5 (код этих функций в src/util/).
Исходники: polyline.zip
Собранная версия (чтобы не ставить npm и node для сборки), просто откройте index.html: dist.zip

Новые блоги и статьи Все статьи Все блоги /
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .

@Electroflower Shiningemerald 384 / 117 / 22 Регистрация: 05.01.2012 Сообщений: 951

	Как брать точки на polyline через равные отрезки? 04.12.2020, 09:47. Показов 2488. Ответов 9 Метки нет (Все метки) Я использую движок leafletjs. Есть polyline, мне нужно нарисовать на ней n объектов (например маркеров). Заранее неизвестно сколько маркеров, но известно, что надо уместить их на линии через равные отрезки(но не обязательно занимать всю линию). У меня нет никаких идей, кто поможет? 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	04.12.2020, 21:37
	Electroflower, 1. на самой ломаной нужны маркеры? 2. То есть в уже готовую ломаную воткнуть массив координат? 3. А ломаная в виде прямой? 0

@Electroflower Shiningemerald 384 / 117 / 22 Регистрация: 05.01.2012 Сообщений: 951
	04.12.2020, 22:57 [ТС]
	Qwerty_Wasd, 1. на самой ломаной нужны маркеры? Не особо важно маркеры, имейджи или полигоны, все упирается по сути в получение точек L.latlng или L.Point 2. То есть в уже готовую ломаную воткнуть массив координат? Не совсем, предположим ломанная определена - это polyline определенной длины. У нас есть точка на polyline, откуда надо откладывать до конца линии объекты(пусть маркеры) на равном расстоянии, это может быть 5 маркеров, а может быть 70. 3. А ломаная в виде прямой? Ломанная в виде ломанной Но сама ломанная состоит из прямых по сути, идущих от точки излома к следующей точке излома. Что удалось нарыть: 1) Можно получить все координаты polyline методом getLatLngs() - это возвратит весь массив точек LatLng[]-это в самом leaflet есть такая функция. 2) есть библа для движка leaflet называется Geometryutil. Она имеет любопытные функции: distance(map, latlngA, latlngB) - эта ф-я возвращает расстояние между точками при текущем зуме карты, то есть например, если измерить distance прямого полилайна без зума -это будет одно расстояние , если зазумим и измерим - уже большее. Еще есть interpolateOnLine(map, polyline , ratio) - она найдет точку на polyline по значению ratio. А ratio это некоторый коэффициент от 0 до 1, где 0 - это точка начала polyline, а 1 - конец polyline, остальные промежуточные значения десятые и соты можно задавать любые, главное знать как и зачем. И вот я не могу никак все это богатство заюзать.... Просто мозг кипит. 0