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

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