Question

如何使用angular-leaflet-directive将两个或更多GeoJson图层添加到地图？

我可以使用＆＃39; geojson＆＃39;从一个服务（多边形线）绘制要素。指令如example所示。

但我有另外一个GeoJson网络服务（圈子），我需要在地图上绘制，就像我做第一个一样。你能指导我吗？

这是一个例子吗？我看了但是不行。

我还在github issues上就该项目提出了这个问题，但还没有得到任何答案。

为了清楚起见，问题不是关于常规的LeafletJS，而是关于angular-leaflet-directive。

Answer 1

我们能够通过注入lealfletData服务然后打开控制器内的地图对象来解决这个问题：

angular.module('myModule').controller('MyController', ['$scope', `leafletData`,
    function($scope, leafletData) {
            leafletData.getMap().then(function(map) {
               // do something with leaflet map object here.. 
            });
    }
]);

有关参考，请参阅Project's GitHub，并在如何使用部分下查看第4个代码示例。

Answer 2

我能够添加多个GeoJSON图层，但必须调整指令的代码。它符合我的目的。请检查这是否适用于您的项目。

我注意到它始终只显示添加的最后一个GeoJSON图层。我进行了调试，发现它正在删除上一层，然后添加最新数据。我没有进一步挖掘，所以还没有将我的mod提交到存储库，因为我还没有验证可能产生的其他影响（即，为什么GeoJSON数据不作为LayerGroup或层数组维护在那里）。

我删除了文件angular-leaflet-directive.js中的第438,439,440行（分布：0.7.6）：

if (isDefined(leafletGeoJSON) && map.hasLayer(leafletGeoJSON)) {
     map.removeLayer(leafletGeoJSON);
}

这让我有了多个图层。

Answer 3

我对此的偏好（未修改核心库）如下：

在地图中创建一个处理GeoJSON的新工厂
在此控制器中设置图层ID的哈希值
允许为每个图层分配样式处理回调
实施addLayer方法，该方法将为
添加单个样式处理回调，该回调读取每个要素的图层ID并运行相应的样式回调

可在此处找到服务代码的要点：https://gist.github.com/pospi/85c31530c4a93cf091ce

角度传单指令中的两个（或多个）GeoJSON图层

3 个答案: