綁定自定義標記與基礎層：單張

與在那裏我已經添加了自定義標記控制單張API的使用...綁定自定義標記與基礎層：單張

此外，還可以添加多個基礎層和這些層之間進行切換....

最近我一直在試圖綁定這個基礎層的標記，我無法理解的文件建立很好所以有困難的，如果有人幫助.....

腳本

//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);

總之，我有需要我的自定義標記綁定這一層我已經在腳本中定義的，如果有一種方法請指導或給reference..thanks您的時間

來源

2015-09-15 Suhail Mumtaz Awan

我不知道，如果這是你在找什麼。

<!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

來源

2015-09-17 14:58:20

謝謝回答，我已經實施的解決方案，雖然+1和接受......就像你所分享的例子....歡呼 –

綁定自定義標記與基礎層：單張

回答

相關問題