Question

我在OpenLayers 3中使用bootstrap datetimepicker和momentJs，因此当我选择新日期时，它会请求将具有特定参数的新geoJson数据放入新的矢量源中。

在我的OL地图中，我有多个图层，一旦选择了日期，就需要使用新数据进行更新。为了做到这一点，我创建了一个新的矢量源＆＃34;根据所选日期获取正确的数据。

每次选择新日期时，我都需要将setSource设置为我的所有图层，但我可以弄清楚如何执行此操作。

这是我的代码：

var newSource = function(newDate){
   url: pathToUrl+newDate,
   format: new ol.format.GeoJSON(),
   projection: 'ESPG:3857'
}

var layers = map.getLayers();

$('.date-time-picker').datetimepicker({
    initialDate: new Date()
}).on('change', function(evt) {
   var newDate = moment(evt.date).format('MM/DD/YYYY HH');
   for (var i = 0; i < layers.length;i++) {
      return layers[i].setSource(newSource(date));
   }
});

此代码无效，我收到此错误：Uncaught TypeError: h.Bd is not a function

如果我这样做，我将只能在一个图层上更新源代码，如何在所有图层上更新源代码？我是否创建了一个图层组？为什么我的循环不起作用？

$('.date-time-picker').datetimepicker({
    initialDate: new Date()
}).on('change', function(evt) {
   var newDate = moment(evt.date).format('MM/DD/YYYY HH');
   return map.getLayers().item(1).setSource(newSource(newDate));
});

更新：我是如何开始工作的

var newSource = function (newDate) {
   return new ol.source.Vector({
      url: pathToUrl + newDate,
      format: new ol.format.GeoJSON(),
      projection: 'ESPG:3857'
   });
}

$('#map-time-picker').datetimepicker({
   format: "yyyy/mm/dd hh:ii",
   initialDate: new Date(),
   minView: 'day',
   autoClose: true
}).on('changeDate', function (evt) {
    // New date is selected and formated correctly (global var)
    newDate = moment(evt.date).format('DD/MM/YYYY HH') + ':59';

    // Get layer group
    map.getLayers().forEach(function (layer, i) {
        if (layer instanceof ol.layer.Group) {
            // Get all layers inside this group
            layer.getLayers().forEach(function (sublayer, j) {
                // Add a new source (and url) to load in the map
                sublayer.setSource(newSource(newDate));
            })
        }
    });

   map.render()
});

使用bootstrap datetimepicker打开图层3

0 个答案: