将自定义标记与基础层绑定：传单

Question

使用传单api，我在其中添加了自定义标记控件...

我们还可以添加多个 baseLayer 并在这些层之间切换....

最近我试图将标记与这个基础层绑定，但我不能很好地理解文档，所以如果有人帮助我会遇到困难......

脚本

//Custom control for marker
L.easyButton('fa-arrow', function () {
map.on('click', function arrow(e) {
L.marker(e.latlng, { icon: arrIcon, draggable: true}).addTo(map);
map.off('click', arrow);
});
}).addTo(map);

//already added layer and needs to bind marker with this
var layerGroup = new L.LayerGroup(),
imageOverlayUrl = 'abc.jpg',
imageOverlay = new L.ImageOverlay(imageOverlayUrl, bounds).addTo(layerGroup),
featureGroup = new L.FeatureGroup().addTo(layerGroup);
var layerGroupings = { "Main": layerGroup };
var layerControl = new L.control.layers(layerGroupings,null, { collapsed: false }).addTo(map);

简而言之，我需要将我的自定义标记与我在脚本中定义的这一层绑定，如果有办法请指导或参考..感谢您的时间

Answer 1

我不确定这是否是您要找的。

<!DOCTYPE html>
<html ng-app="demoapp">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../bower_components/angular/angular.min.js"></script>
    <script src="../bower_components/leaflet/dist/leaflet.js"></script>
    <script src="../dist/angular-leaflet-directive_dev_mapped.js"></script>
    <link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script>
    var app = angular.module("demoapp", ["leaflet-directive"]);
    app.controller('MixedMOverlaysMarkersNestedNoWatchController', function ($scope, leafletData, $timeout) {
        var _clonedMarkers;
        $timeout(function () {
            //should do nothing (not watched) and only see one destroy
            _clonedMarkers = angular.extend({},$scope.markers);
            $scope.markers = {};
        },1000);
        $timeout(function () {
            leafletData.getDirectiveControls().then(function (controls) {
                //move all markers by a few decimal points
                for (var layer in _clonedMarkers) {
                    var markerSet = _clonedMarkers[layer];
                    for (var markerName in markerSet) {
                        var marker = markerSet[markerName];
                        marker.lat += .05;
                    }
                }
                //force manual update
                $scope.markers = _clonedMarkers;
                controls.markers.create($scope.markers);
            });
        }, 4000);
        angular.extend($scope, {
            markersWatchOptions: {
                doWatch: false,
                isDeep: false,
                individual: {
                    doWatch: false,
                    isDeep: false
                }
            },
            center: {
                lat: 42.20133,
                lng: 2.19110,
                zoom: 11
            },
            layers: {
                baselayers: {
                    osm: {
                        name: 'OpenStreetMap',
                        type: 'xyz',
                        url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                        layerOptions: {
                            subdomains: ['a', 'b', 'c'],
                            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                            continuousWorld: true
                        }
                    },
                    cycle: {
                        name: 'OpenCycleMap',
                        type: 'xyz',
                        url: 'http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png',
                        layerOptions: {
                            subdomains: ['a', 'b', 'c'],
                            attribution: '&copy; <a href="http://www.opencyclemap.org/copyright">OpenCycleMap</a> contributors - &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                            continuousWorld: true
                        }
                    }
                },
                overlays: {
                    hillshade: {
                        name: 'Hillshade Europa',
                        type: 'wms',
                        url: 'http://129.206.228.72/cached/hillshade',
                        visible: true,
                        layerOptions: {
                            layers: 'europe_wms:hs_srtm_europa',
                            format: 'image/png',
                            opacity: 0.25,
                            attribution: 'Hillshade layer by GIScience http://www.osm-wms.de',
                            crs: L.CRS.EPSG900913
                        }
                    },
                    fire: {
                        name: 'OpenFireMap',
                        type: 'xyz',
                        url: 'http://openfiremap.org/hytiles/{z}/{x}/{y}.png',
                        layerOptions: {
                            attribution: '&copy; <a href="http://www.openfiremap.org">OpenFireMap</a> contributors - &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
                            continuousWorld: true
                        }
                    },
                    cars: {
                        name: 'Cars',
                        type: 'group',
                        visible: true
                    },
                    bikes: {
                        name: 'Bicycles',
                        type: 'group',
                        visible: false
                    },
                    runners: {
                        name: 'Runners',
                        type: 'group',
                        visible: false
                    }
                }
            },
            markers: {
                cars: {
                    m1: {
                        lat: 42.20133,
                        lng: 2.19110,
                        message: "I'm a car"
                    },
                    m2: {
                        lat: 42.21133,
                        lng: 2.18110,
                        message: "I'm a car"
                    }

                },
                bikes: {
                    m3: {
                        lat: 42.19133,
                        lng: 2.18110,
                        layer: 'bikes',
                        message: 'A bike!!'
                    },
                    m4: {
                        lat: 42.3,
                        lng: 2.16110,
                        layer: 'bikes'
                    }

                },
                runners: {
                    m5: {
                        lat: 42.1,
                        lng: 2.16910
                    },
                    m6: {
                        lat: 42.15,
                        lng: 2.17110
                    }

                }

            }
        });
    });
  </script>
</head>
<body ng-controller="MixedMOverlaysMarkersNestedNoWatchController">
    <leaflet
        center="center"
        markers="markers"
        layers="layers"
        markers-nested="true"
        markers-watch-options="markersWatchOptions"
        height="480px" width="100%">
    </leaflet>
    <h1>Overlays with nested markers no watchers example</h1>
</body>
</html>

*来源：https://tombatossals.github.io/angular-leaflet-directive/examples/0000-viewer.html#/mixed/overlays-markers-nested-no-watch-example

将自定义标记与基础层绑定：传单

Binding Custom Markers with base layer : leaflet

leaflet

dc.leaflet.js

angular-leaflet-directive