Я пытаюсь добавить наложение изображения поверх карты Leaflet, но я хочу, чтобы оно рисовалось только в той области, где мультиполигон geo-json закрывается (поэтому обрабатывайте слой geo-json как маску для изображения ). Изображение, которое я хочу отобразить , является прямоугольным, без прозрачных областей.
Используя маску SVG, я достигаю своей цели. Поскольку geo-json помещен в элемент SVG, я могу заполнить его своим изображением.
https://gyazo.com/069ecec5904026d5f4d0624c6f1a2a7e
Но проблема возникает, когда я начинаю увеличивать масштаб. SVG, в котором находится гео-джсон, меняет свой размер и форму. Он становится меньше, чем должен быть (потому что области, находящиеся за пределами карты, удаляются из SVG), поэтому изображение больше не центрируется по его точному положению.
https://gyazo.com/68148043d5ff3d11c0a13aa1d29c197b
Как вы можете видеть, как при масштабировании, так и при панорамировании карты изображение перемещается, и это потому, что SVG, где отображается гео-json, меняет свою ширину и высоту.
Вот скрипка с кодом, который я придумал в данный момент: https://jsfiddle.net/8n3m6t51/
Я могу подумать о нескольких решениях:
- Заставьте Leaflet всегда рисовать всю область гео-джсона, даже те многоугольники или области, которые находятся вне экрана.
- Используйте ImageOverlay и установите для него маску (но я думаю, что это было бы невозможно).
Но на данный момент я не понял, что делать, чтобы исправить эту проблему.