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

我还可以通过使用timeslider插件在地图上显示timeslider。

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]），那么我将显示我的4pm图像。如果时间是2019-06-25T17：00：00.000Z（5PM [IST]），那么我想显示5pm图片，依此类推。我想做10天。

我已附加了3张模型输出图像和我正在使用的时间滑块的输入图像描述，仅供参考。

2019_06_21_05_00_00 2019_06_21_04_00_00 2019_06_21_06_00_00

这是我使用过Time slider example 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);