Marqueurs personnalisés avec la couche de base: dépliant

Travailler avec dépliant api où j'ai ajouté un contrôle marqueur personnalisé ...Marqueurs personnalisés avec la couche de base: dépliant

Il nous pouvons également ajouter plusieurs baseLayer et basculer entre ces couches ....

Dernièrement, je suis en train de lier les marqueurs avec cette couche de base et je ne comprends pas très bien le documentaion afin d'avoir des difficultés si quelqu'un aider .....

Script

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

En bref, j'ai besoin de lier mon marqueur personnalisé avec cette couche que j'ai défini dans le script, s'il y a un moyen de guider s'il vous plaît ou donner reference..thanks pour votre temps

Source

2015-09-15 Suhail Mumtaz Awan

Je ne sais pas si cela est ce que vous cherchez.

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

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

Source

2015-09-17 14:58:20

Merci pour la réponse, je solution déjà bien mis en œuvre +1 et accepte ... exactement comme l'exemple que vous avez partagé .... hourras –

Marqueurs personnalisés avec la couche de base: dépliant

Répondre

Questions connexes