我基本上是 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
最佳答案
您必须将 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);
关于javascript - 通过 TimeSlider 在传单 map 中显示模型输出图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56703329/