javascript - 通过 TimeSlider 在传单 map 中显示模型输出图像

Question

我基本上是 Leaflet 的新手。我想通过一个时间 slider 在传单中显示我的模型输出图像，该时间 slider 将每 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);

我还可以使用它的时间 slider 插件在 map 上显示时间 slider 。

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],
    });

现在我想要的是将这些图像与时间 slider 进行交互。因此，如果时间 slider 有 2019-06-25T16:00:00.000Z(下午 4 点 [IST])，那么我将显示下午 4 点的图像。如果时间是 2019-06-25T17:00:00.000Z(下午 5 点 [IST])，那么我想显示下午 5 点的图像，依此类推。我想做10天。

我附上了我的模型输出的 3 张图像和我正在使用的时间 slider ，在此输入图像描述仅供引用。

2019_06_21_05_00_00 2019_06_21_04_00_00 2019_06_21_06_00_00

这是我使用的时间 slider 的链接 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);