Состояние наложения изображения теряется при использовании BringToFront(): брошюра

Введение

Я работаю с API-интерфейсом листовки, чтобы создать приложение, которое использует два наложения изображений (добавлены на карту).

Проблема

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

Я использовал функцию BringToFront(); за этим контролем....

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

Часть скрипта с неполной реализацией

var map = L.map('map', {
                    minZoom: 1,
                    maxZoom: 4,
                    center: [0, 0],
                    zoom: 0,
                    crs: L.CRS.Simple
                });

                // dimensions of the image
                var w = 3200,
                    h = 1900,
                    url = 'assets/img/isbimg.jpg';
                url1 = 'assets/img/fjmap.png';
                // calculate the edges of the image, in coordinate space
                var southWest = map.unproject([0, h], map.getMaxZoom() - 1);
                var northEast = map.unproject([w, 0], map.getMaxZoom() - 1);
                var bounds = new L.LatLngBounds(southWest, northEast);

                var featureGroup = L.featureGroup().addTo(map);

                var drawControl = new L.Control.Draw({
                    edit: {
                        featureGroup: featureGroup
                    },
                    draw: {
                        polygon: true,
                        polyline: true,
                        rectangle: true,
                        circle: true,
                        marker: true
                    }
                }).addTo(map);


                map.on('draw:created', showPolygonArea);
                map.on('draw:edited', showPolygonAreaEdited);
                // add the image overlay,
                // so that it covers the entire map

                var iii = L.imageOverlay(url1, bounds);
                var jjj = L.imageOverlay(url, bounds);
                var ggg = iii.addTo(map);
                var hhh = jjj.addTo(map);

                jjj.addTo(map);
                $('#layerControl').on('click', function layerControl() {
                    ggg.bringToFront();
                    return this;
                });

                $('#layerControl2').on('click', function layerControl2() {
                    hhh.bringToFront();
                    return this;
                });

Я знаю, я не сохранил нарисованный вектор или состояние наложения изображения, что создает проблему, есть ли способ решить эту проблему или установить id для наложения изображения???

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


javascript jquery leaflet angular-leaflet-directive dc.leaflet.js
person Suhail Mumtaz Awan    schedule 03.09.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

$('#layerControl').on('click', function layerControl() {
    // ggg.bringToFront();
    hhh.bringToBack();
    return this;
});

$('#layerControl2').on('click', function layerControl2() {
    // hhh.bringToFront();
    ggg.bringToBack();
    return this;
});

Вот рабочий пример на Plunker: http://plnkr.co/edit/3Hd9FR?p=preview< /а>

Лично я ожидал, что вызов метода bringToFront L.FeatureLayer после вызова метода bringToFront L.ImageOverlay также сработает, но почему-то этого не происходит. Поскольку изображение и векторный слой находятся в области наложения листовки, это также должно работать. Мне нужно будет сделать еще несколько тестов, когда я найду время.

person iH8    schedule 03.09.2015
comment
спасибо за ответ, я обязательно приму ответ, +1 за усилия... еще раз спасибо за помощь - person Suhail Mumtaz Awan; 03.09.2015
comment
На самом деле у меня не было четкого понимания о наложении изображений, я хотел сделать, например, когда я рисую некоторые фигуры на изображении 1, тогда эти фигуры должны быть только для изображения 1, изображение два имеет свои собственные формы или рисунки .... если это возможно, пожалуйста, дайте мне знать... спасибо за усилия, хотя ответ имеет идеальную реализацию в отношении другого моего требования..... - person Suhail Mumtaz Awan; 03.09.2015
comment
Нет, спасибо, всегда пожалуйста. Я думаю, что то, что вы хотите, возможно, хотя это потребует написания достаточного количества логики. Почему бы не опубликовать новый вопрос с этим, чтобы другие тоже могли помочь? Я буду следить. Удачи с вашим проектом. - person iH8; 03.09.2015
comment
понял, да, я собираюсь опубликовать вопрос об этом - person Suhail Mumtaz Awan; 03.09.2015