在leaftlet中的不同标记组

Question

我正在使用Angular和传单,并希望构建一个具有不同标记的地图,例如:船舶和桥梁.我想单独更新它们,而无需再次删除和设置所有标记.因此,当我有新船时,我只想调用船标记,更新它们并且桥标记保持不变.

现在,我尝试过这样的事情:

angular.module('angularMapApp')
  .controller('MainCtrl', ['$scope', 'RequestService', 'setShipMarkers', '$q', function($scope, RequestService, setShipMarkers, $q) {

    angular.extend($scope, {
      hamburg: {
        lat: 53.551086,
        lng: 9.993682,
        zoom: 13
      },
      markers: {
        ships: {
          m1: {
              lat: 42.20133,
              lng: 2.19110
          },
          m2: {
              lat: 42.21133,
              lng: 2.18110
          }

        },
        bridges: {
            m3: {
                lat: 42.19133,
                lng: 2.18110
            },
            m4: {
                lat: 42.3,
                lng: 2.16110
            }

        }
      },
      defaults: {
        tileLayer: 'http://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png',
        zoomControlPosition: 'topright',
        tileLayerOptions: {
            opacity: 0.9,
            detectRetina: true,
            reuseTiles: true,
        },
        scrollWheelZoom: false
      }
    });

但这不起作用,因为我得到以下错误(markers-nested: true在我的视图中设置后):

如果标记将要使用此功能,则必须向指令添加图层.

但是,如果我只想在同一层上调用不同的标记组,为什么我需要图层.我只是不想立刻更新所有这些.

所以也许有人可以告诉我,如何获得单独的标记组以及如何调用它们来更新它们.

Answer 1

对于每种嵌套标记，您必须像这样创建自己的图层组，它们可以为空：

layers: {
    overlays: {
        ships: { // use the same name as in the marker object
            name: "Ships",
            type: "group",
            visible: true
        },
        bridges: { // use the same name as in the marker object
            name: "bridges",
            type: "group",
            visible: true
        }
    } 
}

通过这样做，您还必须将 OSM 基础层移动到layers.baselayers 对象中，但以markers-nested="true"这种方式工作。

演示：http://plnkr.co/edit/HQx8bQmmsFUGcLxYt95N? p=preview