Показывать выходные изображения моделей на листовой карте TimeSlider

Question

Я новичок в Leaflet в принципе.Я хочу отображать выходные изображения моей модели в листовке с помощью ползунка времени, который будет показывать каждые 1 час изображения.

Я могу отобразить изображение в листовке с помощью ImageOverlay.Ниже приведен код для отображения изображения.

var imageUrl = "<?php echo base_url(); ?>/stylesheet/images/flash_count_1.png",
        imageBounds = [[-51, 0], [51,180]];

    L.imageOverlay(imageUrl, imageBounds).setOpacity(0.5).addTo(Lmap);

    Lmap.setMaxBounds(imageBounds);

Я также могу показать таймер на карте, используя его плагин.

var endDate = new Date();
    endDate.setDate(endDate.getDate() + 10);
    endDate.setUTCMinutes(0, 0, 0);
    var map = L.map('map_draw_area', {
        zoom: 5,
        fullscreenControl: true,
        timeDimension: true,
        timeDimensionControl: true,
        timeDimensionOptions:{
            timeInterval: "P10D/" + endDate.toISOString(),
            period: "PT1H",
            currentTime: endDate
        },    

        timeDimensionControlOptions: {
            autoPlay: false,
            playerOptions: {
                buffer: 10,
                transitionTime: 250,
                loop: true,
            }
        },
        center: [20.9517, 85.0985],
    });

Теперь я хочу, чтобывзаимодействовать эти изображения с помощью ползунка времени.Поэтому, если у ползунка времени 2019-06-25T16: 00: 00.000Z (4PM [IST]), я покажу свое изображение в 4 часа дня.если время 2019-06-25T17: 00: 00.000Z (5PM [IST]), то я хочу показать изображение 5 вечера и так далее.Я хочу сделать это в течение 10 дней.

Я приложил 3 изображения выходных данных моей модели и ползунка времени, который я использую, введите описание изображения здесь только для справки.

2019_06_21_05_00_00 2019_06_21_04_00_00 2019_06_21_06_00_00

- это ссылка ползунка времени, котораяЯ использовал Пример слайдера времени 14

Answer 1

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

var imgOvr=null; //global variable

тогда:

...
imgOvr = L.imageOverlay(imageUrl, imageBounds).setOpacity(0.5).addTo(Lmap);
...

и удалить

if (map.hasLayer(imgOvr)) {
    map.removLayer(imgOvr);
// replace with new image :
// imgOvr = L.imageOverlay(imageUrl, imageBounds).setOpacity(0.5).addTo(Lmap);