Как разделить полигон на карте на равные части или продолжение: как собрать массив из координат выделенной области через заданный шаг?

Question

[Роман Андреевич]

Коллеги, доброго времени суток.

Итак задача: разбить полигон на равные сектора!

В продолжении темы Как собрать массив из координат выделенной области... появился еще один вопрос. Большое спасибо товарищу @serginhold за помощь и мое вразумение))))))))))

Итак! Строим карте на leaflet. На нем же выделяем область, рисуем самое простое прямоугольник - полигон, у нас есть углы его в координатах:

this.rectangle = L.rectangle(bounds, this.options).addTo(this.map); // строим прямоугольник - полигон
let coordsConners = this.rectangle.getLatLngs()[0]; // координаты углов

Далее мы получаем длины горизонтальной и вертикальной линий:

getLines(southWest, southEast, northEast) { // получаем длины вертикальной и горизонтальной линии

    this.points = [
		new L.LatLng(southWest[0], southWest[1]),
		new L.LatLng(southEast[0], southEast[1]),
		new L.LatLng(northEast[0], northEast[1])			

    ];

	this.rectangleData.horizont = +(this.points[0].distanceTo(this.points[1])).toFixed(0);
	this.rectangleData.vertical = +(this.points[1].distanceTo(this.points[2])).toFixed(0);

}

Тут по сути все просто, southWest, southEast, northEast мы берем из coordsConners. this.rectangleData.horizont и this.rectangleData.vertical это собственно длины линий в метрах. Итого, у нас есть координаты углов и длины линий.

Как предложил вчера, товарищ @serginhold (еще раз спасибо), и потом, когда я перестал тупить, я сделал:

let x_min = coordsConners[1].lat;
    let x_max = coordsConners[3].lat;
    let y_min = coordsConners[1].lng;
    let y_max = coordsConners[3].lng;

	let x = 0;
	let y = 0;

		let count = 100;

		for (let i = 0; i < count; i++) {

			x = Math.random() * (x_max - x_min) + x_min;
			y = Math.random() * (y_max - y_min) + y_min;

			new L.marker([x, y]).addTo(this.map);

		}

Просто рандомно ставим маркеры на карту. Это соответственно не верно. Потому что они ставятся рандомно. Необходимо разбить данный прямоугольник на равные части. И тут я прошу помощи, может кто сталкивался или просто подскажет. Есть длины и координаты, как разбить прямоугольник?

p.s. ну не разбить точнее, а просто нарисовать новые, маленькие. что бы высота и ширина у них были не более установленного из config числа метров.
Заранее благодарю.

Comments

[freeExec]

это собственно длины линий в метрах.

С чего вы взяли?

[h8nor]

freeExec, видимо, автор не разобрался с проекцией (последний абзац).

[Роман Андреевич]

Дѣаволъ, коллеги, доброго времени суток. Почему не разобрался. В документации leaflet:

distanceTo( otherLatLng) Number
Returns the distance (in meters) to the given LatLng calculated using the Spherical Law of Cosines.

Строку вырезал из доков leaflet - .
Расстояние между точками в метрах.

[h8nor]

Роман Андреевич, функция в Leaflet верно вычисляет расстояние (по ссылкам бегать лень). Можно проверить самописную функцию: то же визуальное расстояние ближе к полюсам в сотню метром будет на экваторе в пару десятков километров.

[Роман Андреевич]

Дѣаволъ, да к точности особо претензий нет. Сравнивал с 2ГИС линейкой и яндекс картами. Показывает примерно одинаково. В вычислении расстояния между точками мне нужно просто ширину и высоту фигуры определить. Это не самое страшное.

Еще страшнее)))))))), пока что не нашел в документации, как добавить слой в виде canvas, что бы не imageOverlay пихать, а на canvas выводить картиночку??????????????????

[h8nor]

п. 3.7.

[Роман Андреевич]

Дѣаволъ, прошу прощения. Каюсь((((((

[Роман Андреевич]

AngReload, можно хоть на луну канвас спрятать. Как проверять точки???? Алгоритм???

let cvs = document.getElementById('canvas');
let button = document.getElementById('button');
let ctx = cvs.getContext('2d');

let colors = [[255,255,0],[228,60,30],[53,198,29]];
let colorLength = colors.length;
let flag = false;

let images = [];
let options = {

	width: 400,
	height: 400

};
let urls = [
	'images/test/1.png',
	'images/test/2.png',
	'images/test/3.png'
];

cvs.width = document.documentElement.clientWidth;
cvs.height = document.documentElement.clientHeight;

function addImage(e) {
	
	if (images.length === colorLength) {

		console.log('больше нельзя добавлять картинок');
		return;

	}

	console.log('Добавили новую картинку');

	let img = new Image();
	img.src = urls[images.length];

	let color = colors.pop();

	images.push(img);

	img.addEventListener('load', () => {

		let x = 0;

		switch (images.length) {

			case 2:
				x = 400;
				break;
			case 3: 
				x = 800;
				break;
			default:
				x = 0;
		}

		ctx.drawImage(img, x, 0, options.width, options.height);

		let imageData = ctx.getImageData(x, 0, img.width, img.height);
		let data = imageData.data;

		for (let i = 0, n = data.length; i < n; i += 4) {
			
			// if (data[i] !== 0 && data[i + 1] !== 0) {

				data[i] = color[0];
				data[i + 1] = color[1];
				data[i + 2] = color[2];

			// }

		}
	     
	    ctx.putImageData(imageData, x, 0);

	});

}

// события click

button.addEventListener('click', addImage);

cvs.addEventListener('click', (e) => {

	if (!images.length) return;

	let imageData = ctx.getImageData(e.offsetX, e.offsetY, 1, 1);
	let data = imageData.data;

	console.log(data);

}, false);

тут я рисую картинки на канвасе, и потом проверяю при клике на канвас + перекрашиваю. Но с перекрашиванием опустим момент, его вроде как на сервере можно сделать через imageMagick или подобное, в любом случае картинки сначала на сервер ко мне падают потом только клиенту.

Как проверить пиксели? На рис.1 показан пример, точки мои и прямоугольник. Я беру одно точку, отправляю запрос, мне приходят данные и картинка. Прямоугольник больше не нужен, его можно убрать. Картинка встала на карту, как img в блоке leaflet-pane leaflet-overlay-pane. Как мне пиксели то проверить? Пиксели я могу проверить только если картинка будет отрисована на канвасе!

Answer 1

[AngReload]

Это надо?

const RECOMMEND_SIZE = 10;
const BIAS_TO_CENTER = 0.5;

let x_min = coordsConners[1].lat;
let x_max = coordsConners[3].lat;
let y_min = coordsConners[1].lng;
let y_max = coordsConners[3].lng;

let x_side_len = x_max - x_min;
let y_side_len = y_max - y_min;

let x_total_count = Math.round(x_len / RECOMMEND_SIZE);
let y_total_count = Math.round(y_len / RECOMMEND_SIZE);

let x_closest_size = x_side_len / x_total_count;
let y_closest_size = y_side_len / y_total_count;


for (let x = 0; x < x_total_count; x++) {
  for (let y = 0; y < y_total_count; y++) {
    let coord_x = x_min + x_closest_size * (x + BIAS_TO_CENTER);
    let coord_y = y_min + y_closest_size * (y + BIAS_TO_CENTER);
    new L.marker([coord_x, coord_y]).addTo(this.map);
  }
}

Comments

[Роман Андреевич]

Минутку

[Роман Андреевич]

AngReload , спасибо за помощь, работает, но данный алгоритм просто расставляет точки на выделенной области. У меня же задача стоит, следующая:

На выделенной области мне необходимо собрать массив координат, собственно ваш код это делает. Дальше мне необходимо вытащить из базы инфу по участкам, для этого я отправляю на сервер запрос с координатами каждой найденной точки. От сюда вытекает проблема, ооооооооооооочень много запросов!!!

Данные с базы приходят в виде картинки + объект (он не важен), картинку я ставлю на карту. И для оптимизации нужно выбросить из массива точки, которые попадают в полигон этой картинки. Картинка png с прозрачным фоном.

[AngReload]

Вслепую очень неудобно предлагать решения. Один раз попробую, но если не угадаю, то выпытывать информацию с вас не буду.

- картинку я ставлю на карту
Как вы понимаете куда на карту нужно поместить картинку? Вместе с картинкой приходят координаты прямоугольника?

Если так то попробуйте:

const RECOMMEND_SIZE = 10;
const BIAS_TO_CENTER = 0.5;

let x_min = coordsConners[1].lat;
let x_max = coordsConners[3].lat;
let y_min = coordsConners[1].lng;
let y_max = coordsConners[3].lng;

let x_side_len = x_max - x_min;
let y_side_len = y_max - y_min;

let x_total_count = Math.round(x_len / RECOMMEND_SIZE);
let y_total_count = Math.round(y_len / RECOMMEND_SIZE);

let x_closest_size = x_side_len / x_total_count;
let y_closest_size = y_side_len / y_total_count;

let points = [];

for (let x = 0; x < x_total_count; x++) {
  for (let y = 0; y < y_total_count; y++) {
    let coord_x = x_min + x_closest_size * (x + BIAS_TO_CENTER);
    let coord_y = y_min + y_closest_size * (y + BIAS_TO_CENTER);
    points.push([coord_x, coord_y]);
  }
}

function addImageToMap() {
  // если точек нет, то стоп
  if (points.length === 0) return;

  // украдём одну точку
  let p = points.pop();
  // тут вы загружаете свою картинку с сервера
  let loaded = loadImageByPoint(p);
  let imageUrl = loaded.url;
  let imageRect = loaded.rect; // [x0, y0, x1, x2]
  myMap.addImage(imageUrl, imageRect);
  
  // отфильтруем, оставив только точки вне изображения
  points = points.filter(function(point) {
    // проверяем что точка вне прямоугольника уже загруженного изображения
    return point[0] < imageRect[0] ||
           point[1] < imageRect[1] ||
           point[0] > imageRect[2] ||
           point[1] > imageRect[3];
  });

  // рекурсивно будем выполнять эту функцию, пока все точки не отфльтруются
  addImageToMap();
}

[Роман Андреевич]

AngReload, в чем суть))) как выше было написано, я выделяю на карте область, рисую прямоугольник и так далее.
Теперь мне необходимо собрать точки с координатами внутри прямоугольника, код который выше делает то что нужно, вчера вы мне помогли, я получаю точки с заданным шагом. Получил массив точек.



Для проверки нарисовал маркеры. Все отлично. Есть массив с точками (с координатами вернее). Далее мне необходимо получить данные из Р...стра))) о том какие есть участки внутри данного полигона. Если я точечно отправляю координаты то мне приходит например объект с нужными данными и (для интерфейса) вот такая вот картиночка:



Это типа границы участка. НО!

Мне же надо получить все участки, а точек в массиве может быть и 5000 и 10000 ... это не правильно, стоит вопрос как оптимизировать кол-во запросов.

Идея основная в том, что бы рисовать по контуру картинки новый полигон и через, например point in polygon for Leaflet, выбросить из массива точки, которые внутри картинки. и снова пересобрать массив, и отправлять следующий запрос. И так до тех пор, пока не кончатся точки.

Но вот в чем проблема, картинка то квадратная! Соответственно я удалю точки, которые не нужно удалять. Примерно так.

Пример результата точечного поиска:



Как раз на картинке желтый слой это найденный участок. Но сам слой это png 256 x 256. Он квадратный, т.е. если вставить новый контур, и удалить из него точки, то я удалю точки в том числе и за пределами желтой фигуры.

Вот... вроде все объяснил

[AngReload]

То есть у вас нет точек полигона, есть только уже отрисованная картинка полигона.
Тогда единственный способ проверить попадает ли точка в полигон - декодировать изображение и проверить прозрачен ли пиксель соответствующий точке.

[Роман Андреевич]

AngReload, ну вот я туда же начал смотреть, только как это сделать на js??? Осталось только найти механизм.

p.s. В идеале решением всего гемороя на данном проекте, являются входные данные. Мне приходит объект, в котором есть центр участка (координаты), благодаря им и ставлю картинку на карту как нужно. Но вот к сожалению углов не могу добиться. Если бы приходил объект с углами то была бы сказка)))))) Но мы в России живем))))))))))) Спасибо большое за помощь. Когда решу проблемы обязательно пост напишу)))))

[Роман Андреевич]

AngReload, больше вам спасибо за помощь. проект немного сдвинулся. Но вот теперь есть момент. Я работаю с leaflet как уже поняли. Что бы разобрать картинку мне нужен canvas, а он грузиться только когда начинаем вектор рисовать. Но в моем случае после рисования прямоугольника, и при сбора массива с точками, прямоугольник убирается рекурсией я начинаю получать те самые картинки желтого цвета. Я научился проверять пиксели прозрачные и менять цвета, с этим все нормально. Но встал вопрос как добавить canvas на карту, что бы он был именно слоем, так как если его положить сверху, то это будет не часть карты, а значит я не смогу ее дальше двигать и что то с ней делать!!!

Что бы мне как-то оперировать с подгружаемыми imageOverlay дальше, мне нужно выводить их на canvas.

[AngReload]

leaflet я не знаю совсем.
Не понимаю что вы делаете.
Раньше же у вас получалось поставить картинки на карту? Зачем выводить канвас на карту? Он вам нужен только для проверки на попадание некоторых точек в полигон. Пусть он располагается вне карты, спрячьте его с помощью CSS.