Как добавить canvas на карту? Есть ли метод из коробки?

Question

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

Есть карта на leaflet. Собственно canvas там появляется только когда вектор рисуем. Но!

Если возможность, изначально подгрузить canvas? Необходимо для отображения imageOverlay, а потом эти imageOverlay изменять уже, но вопрос именно в canvase. Не могу найти в доке методов на эту тему.

Answer 1

[Максим Тимофеев]

https://leafletjs.com/reference-1.3.4.html#canvas

Comments

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

Это я знаю, но мне нужно imageOverlay рендерить не в виде img в блоке leaflet-pane leaflet-overlay-pane, а на canvas в том же блоке. При этом в дальнейшем если я карту двигаю и зуммирую, то мои картинки подгруженные должны оставаться на карте и двигаться вместе с ней, вот в чем сложность.

p.s. на данный момент что renderer: L.canvas(), что preferCanvas: true, это для векторной графики, а не для создания canvas для вывода каких то imageOverlay и так далее

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

0ffff0, спасибо за нос и про котенка, но я делаю не на яндекс картах, а на leaflet!

Не понимаю если честно комментария вашего. При чем в моем случае яндекс карты

[0ffff0]

ой, моя невнимательность, удаляю

[0ffff0]

Роман Андреевич, у leaflet есть такая-же песочница как у яндекса

ttps://leafletjs.com/examples/custom-icons/
просто всуньте url вашего canvas в iconUrl

var greenIcon = L.icon({
    iconUrl: 'leaf-green.png',
    shadowUrl: 'leaf-shadow.png',

    iconSize:     [38, 95], // size of the icon
    shadowSize:   [50, 64], // size of the shadow
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
});

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

0ffff0, да с иконками и маркёрами ясен вопрос, но у меня картиночка!!! У неё есть координаты и углы и я ее центрирую!!!

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

0ffff0, причём картинки 256 на 256, теней нет попапов то же , иконки это не то,

[0ffff0]

Роман Андреевич,
https://developer.mozilla.org/en-US/docs/Web/API/H...
тут показано как преобразовать ваш канвас и все что в нем в base64- формат, ваш размер он легко потянет

[0ffff0]

Роман Андреевич, а картиночка это кусок карты или что?

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

0ffff0, картиночка это фигура, которая показывает очертания участка земельного , с прозрачным фоном и закрашенной частью одного цвета. Вопрос в том, что сейчас картинка добавляется через тэг img а нужно что бы она рисовалась в канвасе leaflet. Преобразовывать не нужно, отдельно проекта на канвасе я делаю все что нужно, а вот именно на карте как добавить картинку на канвас, сложность пока

[0ffff0]

Роман Андреевич, исходя из документации
https://leafletjs.com/reference-1.3.4.html#canvas
мы имеем: 1) canvas подключается очень просто:

//Use Canvas by default for all paths in the map:

var map = L.map('map', {
    renderer: L.canvas()
})

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

//Use a Canvas renderer with extra padding for specific vector //geometries:

var map = L.map('map');
var myRenderer = L.canvas({ padding: 0.5 });
var line = L.polyline( coordinates, { renderer: myRenderer } );
var circle = L.circle( center, { renderer: myRenderer } );

что-же у вас за проблема такая,

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

0ffff0, )))) большое вам спасибо за то, что пытаетесь помочь. Но, дело немного не в том, что бы сделать так:

var map = L.map('map');
var myRenderer = L.canvas({ padding: 0.5 });
var line = L.polyline( coordinates, { renderer: myRenderer } );
var circle = L.circle( center, { renderer: myRenderer } );

То, про что вы пишите, это рисование векторов на lealfet. Они рисуются все нормально. Но мне нужно на карту добавить overlay - картинку. Суть моей проблемы:

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



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



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

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

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

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

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



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

Вектора без проблем рисуются и могу с ними делать все что хочу - двигать, изменять, получать нужный мне массив точек внутри этого прямоугольника. Но если прочитали выше, мне нужно найти все участки внутри прямоугольника. Тут стоит вопрос оптимизации. Я получаю массив с координатами, его длина может быть 200 а может быть 5000! На каждую точку у меня будет будет отправлен запрос на сервер. Точки могут попадать на один участок, соответственно что бы этого избежать, мне необходимо после каждого ответа на запрос, проверить какие точки из массива находятся над пришедшей желтой картинкой и удалить их из массива. Проверить это, я могу так (примерный алгоритм):

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);

Т.е. просто проверить прозрачный пиксель на canvas. И вот мы добрались к вопросу:

Как добавить слой (ту самую желтую картинку) на карту leaflet не через img, а через canvas, при этом иметь доступ к canvas для проверки прозрачных пикселей. При этом карту можно тащить. Соответственно изменять положение должны все слои.

Вот это и есть моя проблема. И найти решения такого пока не могу. Поэтому и прошу помощи и спрашиваю, может кто сталкивался с такой задачей на leaflet.

[0ffff0]

Роман Андреевич, отвечаю на,

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

Неа, не через point in polygon for Leaflet, а через js worker самописный, или найдете где-то, но не советую привязываться к leaflet, ищите универсальное решение под canvas, или если вас все-же не пугает перспектива работы с шейдером то вот вам
ссылка, там самый первый туториал - отрисовка плоского треугольника через вершинный шейдер , ну прям ваша ситуация.
Пособие прелестное, написано по-русски, простым, понятным языком
И чтобы вам было не так страшно шейдерить , вот цитата из вступления,

О WebGL часто думают, как о API для 3D. Люди думают "Я буду использовать WebGL и магия получится классное 3D". На самом деле WebGL - это просто средство растеризации. Он отображает точки, линии и треугольники на основе написанного кода.

Будете указывать координаты вершин, а шейдер будет отрисовывать ваши фигурки. Часть интерфейса написана на js , а все что связано с расчетами и что выполняется на графическом процессоре компьютера написано на с++ и поэтому не замедляет работу вэбстраницы, ваша задача - суметь справиться с Hello World на WebGL из данного руководства и приспособить этот helloworld под свои нужды это только полдела переход на шэйдеры обеспечит вам необходимое в данной ситуации быстродействие, далее вам надо будет динамически преобразовывать ваши массивы данных о вершинах фигур в ответ на действие пользователя и как вы будете работать с массивами данных зависит только от вас,

а вот что касается этого

И так до тех пор, пока не кончатся точки.

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

то или я просто глупая мартышка, или вы плохо объясняете

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

0ffff0, огонь про шейдеры)))))))))))) Но это перебор. Меня выгонят быстрее с работы.

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

В итоге я пришел к тому, что просто нужно временный canvas ставить, и в нем отсеивать точки. Это проще. Тут самая проблема в проверки пикселя на прозрачность. Как напишу тесты и проверю решение, обязательно напишу вам. Спасибо за помощь

p.s.

а вот что касается этого

И так до тех пор, пока не кончатся точки.

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

то или я просто глупая мартышка, или вы плохо объясняете

Тут я не могу дать точный ответ))))))))))) потому что я объясняю как понимаю проект. Наверное я не правильно объяснил. Хотя с другой стороны если посмотрите выше рис.2 (желтая фигура), то увидите, что есть некая фигура, но у самой картинки форма квадратная, и рендерится в dom png не фигура, а растр размером 256 * 256)))))) Просто проект такой, пришлось разобрать много деталей. В итоге для отсева точек придумал такой костыль, как выше писал.)))) в любом случае спасибо

[0ffff0]

Роман Андреевич, по поводу

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

оптимизируется на уровне функции формирующей ajax запрос, она должна копить точки, а не кидать сразу, как только получила одну новую

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

Если есть хоть одна ВЕСКАЯ причина это делать, то
используйте UDP тогда

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

0ffff0, юзер в приложении должен выбрать область на которой он будет искать участки. Т.е. собирается массив. Первый запрос -> пришел объект данных + картинка желтая. Далее отсеиваем точки -> пере собираем массив с точками и рекурсивно отправляем запрос заново. имеем по факту нормальный разрыв между запросами.

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

Отсеивание точек, как раз необходимо для того, что бы сокращать массив, ну или кол-во точек. В итоге из 5000 точек, останется 100 - ну примерно. Сразу скажу что данные, которые приходят, находятся не в моем подчинении. Логика такая, что с фронта уходит запрос на мой хост, а с хоста я его рассылаю куда нужно. Как то так.