带有传单指令的覆盖层的Control.Layer折叠选项

时间:2013-12-06 19:37:29

标签: javascript angularjs angularjs-directive leaflet

有没有人知道如何为一组添加了传单指令的基础和叠加层设置折叠的control.layers选项? 在我的场景中,应始终扩展control.layer。

我尝试在我的传单指令配置中添加一个选项对象,例如:

angular.extend($scope, {
    center: {
        lat: 0,
        lng: 0,
        zoom: 1,
        autoDiscover: true
    },
    geofences: {},
    defaults: {
        scrollWheelZoom: true,
        zoomControl: false
    },
    layers: {
        options: {
            collapsed: false
        },
        baselayers: {
            defaultOSMMap: {
                name: 'Map at Day',
                type: 'xyz',
                url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
            },
            osmNight: {
                name: 'Map at Night ',
                type: 'xyz',
                url: 'http://{s}.tile.cloudmade.com/{key}/{styleId}/256/{z}/{x}/{y}.png',
                layerParams: {
                    key: 'BC9A493B41014CAABB98F0471D759707',
                    styleId: 999
                }
            },
            googleHybrid: {
                name: 'Google Hybrid',
                layerType: 'HYBRID',
                type: 'google'
            },
            googleRoadmap: {
                name: 'Google Streets',
                layerType: 'ROADMAP',
                type: 'google'
            }
        },
        overlays: {
            communityAreas: {
                name: 'Community Areas',
                type: 'group',
                visible: false
            }
        }
    },
    controls: {
    }

然后,在angular-leaflet指令文件中添加以下内容:

 // We have baselayers to add to the map
 _leafletLayers.resolve(leafletLayers);
 leafletData.setLayers(leafletLayers, attrs.id);

 leafletLayers.baselayers = {};
 leafletLayers.controls = {};
 leafletLayers.controls.layers = new L.control.layers({}, {}, isDefined(layers.options) ? layers.options : {}); --> this is the line I modified
 leafletLayers.controls.layers.setPosition(defaults.controlLayersPosition);
 leafletLayers.controls.layers.addTo(map);

但是我在调​​试控制台上遇到了与图层相关的错误,例如:“未捕获的错误:在leaflet.js文件中没有为变量{s}提供值”。

也许是我在angular-leaflet-directive上实例化基础和覆盖图层的方式......有什么想法吗?

1 个答案:

答案 0 :(得分:2)

现在可能有点晚了,但万一其他人有同样的问题(就像我刚才那样!)

这就是我将控制图层设置为展开扩展的方式。

基思

angular.extend($scope, {
    center: {
        lat: 0,
        lng: 0,
        zoom: 1,
        autoDiscover: true
    },
    geofences: {},
    defaults: {
        scrollWheelZoom: true,
        zoomControl: false,
        controls :{
                    layers : {
                        visible: true,
                        position: 'topright',
                        collapsed: false
                             }
                    }
    },
    layers: ...