传单中的不同标记组

Question

我正在使用 Angular 和 leaflet，并希望用不同的标记构建地图，例如：船舶和桥梁。我想单独更新它们而无需再次删除和设置所有标记。所以当我有新船时，我只想调用船标记，更新它们，而桥标记保持不变。

现在，我试过这样的事情：

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 之后）：

You must add layers to the directive if the markers are going to use this functionality.

但是如果我只是想在同一层上调用不同的标记组，为什么我需要层。我只是不想一次全部更新。

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

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

传单中的不同标记组

different markers groups in leaftlet

javascript

angularjs

leaflet