Question

首先，为了得到一些背景信息，几周前我问了this。

我现在让Leaflet解析一个gpx文件的文件夹，并使用Omnivore插件在一个地图实例中绘制所有这些文件。

现在我需要的是动态更改这些文件。我有一个代表时间间隔的滑块。每次我使用滑块时，我都会缩小我想要显示曲目的间隔。

Ex：我的滑块从1月15日到5月15日。因此，地图显示了那个时间的所有曲目。如果我将滑块更改为从4月1日到5月15日显示，则地图应相应地做出反应并重新绘制相应的文件，从地图中删除4月1日之前的轨道。

问题在于我似乎无法做到这一点，因为我一直得到

TypeError：无法读取未定义的属性“addLayer”

当我创建图层的console.log时，在问题发生的行中，它会在完全相同的时间打印，然后打印一层undefined。我不知道为什么会这样，调试很难。

我的代码如下：

setTimeout(function() {

          var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
          osmAttrib = '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
          osm = L.tileLayer(osmUrl, {maxZoom: 18, attributionControl: false});
          var ggl = new L.Google();

          angular.element($elem[0]).append(angular.element('<div id="trackmap'+ trackmapCount +'" style="width: 100%; height: calc(100% - 25px); border: 1px solid #ccc"></div>'));
          trackmaps[trackmapCount] = new L.Map('trackmap'+ trackmapCount +'', {center: new L.LatLng(center[0], center[1]), zoom: 10});
          trackmaps[trackmapCount].addControl(new L.Control.Layers( {'Google':ggl,'OSM':osm}, {}));
          console.log('map'+ trackmapCount +'');
          var layer1 = osm.addTo(trackmaps[trackmapCount]);
          createTracks(jsonRes);

          $scope.$watch(function () {
            return $elem[0].parentNode.clientWidth;
          }, function ( w ) {
            if ( !w ) { return; }
            for(var i = 0; i < trackmapCount; i++) {
              trackmaps[i].invalidateSize();
            }
          });

          $scope.$watch(function () {
            return $elem[0].parentNode.clientHeight;
          }, function ( h ) {
            if ( !h ) { return; }
            for(var i = 0; i < trackmapCount; i++) {
              trackmaps[i].invalidateSize();
            }
          });

          $scope.$on('$destroy', function() {
            rootScopeBroadcast();
          });

          var rootScopeBroadcast = $rootScope.$on('rootScope:broadcast-timeline_slider', function (event, data) {
            for(var i = 0; i < trackmapCount; i++) {
              trackmaps[i].removeLayer(runLayer);
            }
              var new_tracks = sliderProcessing(data.min_time, data.max_time, jsonRes)
              createTracks(new_tracks); // THE PROBLEM IS HERE
          });


          function createTracks (track_list) {


              myStyle = {
                  "color": "#0033ff",
                  "weight": 5,
                  "opacity": 0.65,
                  "clickable": true
              };

              customLayer = L.geoJson(null, {
                  style: myStyle,
              });


              for (var i = 0; i < track_list.length; i += 1) {
                runLayer = omnivore.gpx(folderPath + track_list[i], null, customLayer) 
                  .on('ready', function() {
                      //runLayer.showExtremities('arrowM');
                  })
                  .addTo(trackmaps[trackmapCount])
//a console.log of trackmaps[trackmapCount] here shows both the layer and an undefined at the same time
                  .on('click', function(d) {
                      console.log(d);
                  });
              }

          }

          trackmapCount++;
          delay = 0;

          }, delay);

我可能错过了一些Leaflet重绘功能，或者我的控制代码没有正确放置，但我已经搞砸了它并保持不变。

动态更改Leaflet图层

0 个答案: