angularjs with leafletjs

Question

Directie kodu şu şekildedir: http://jsfiddle.net/M6RPn/26/ Çok lat ve uzun bir json feed'i almak istiyorum. Kolayca Angular ile bir kaynak veya $ http ile json alabilirim ama bunu nasıl besleyebilirim? Haritadaki şeyleri haritalamak için yönerge?

module.directive('sap', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     template: '<div></div>', 
     link: function(scope, element, attrs) { 
      var map = L.map(attrs.id, { 
       center: [40, -86], 
       zoom: 10 
      }); 
      //create a CloudMade tile layer and add it to the map 
      L.tileLayer('http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png', { 
       maxZoom: 18 
      }).addTo(map); 

      //add markers dynamically 
      var points = [{lat: 40, lng: -86},{lat: 40.1, lng: -86.2}]; 
      for (var p in points) { 
       L.marker([points[p].lat, points[p].lng]).addTo(map); 
      } 
     } 
    }; 
}); 

Answer 1

Ne yapmaya çalıştığınız şeyi bir el broşürü hakkında çok şey ya bilmiyorum ama ben size yönergesi için kontrolörün bazı koordinatları geçmek istediğinizi varsayalım ki?

Aslında bunu yapmak için pek çok yol var.

İşte direktifi için denetleyicisinden veri aktarmak için şu yöntemi kullanabilirsiniz:

module.directive('sap', function() { 
    return { 
     restrict: 'E', 
     replace: true, 
     template: '<div></div>', 
     link: function(scope, element, attrs) { 
      var map = L.map(attrs.id, { 
       center: [40, -86], 
       zoom: 10 
      }); 
      //create a CloudMade tile layer and add it to the map 
      L.tileLayer('http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png', { 
       maxZoom: 18 
      }).addTo(map); 

      //add markers dynamically 
      var points = [{lat: 40, lng: -86},{lat: 40.1, lng: -86.2}]; 
      updatePoints(points); 

      function updatePoints(pts) { 
       for (var p in pts) { 
        L.marker([pts[p].lat, pts[p].lng]).addTo(map); 
       } 
      } 

      //add a watch on the scope to update your points. 
      // whatever scope property that is passed into 
      // the poinsource="" attribute will now update the points 
      scope.$watch(attr.pointsource, function(value) { 
       updatePoints(value); 
      }); 
     } 
    }; 
}); 

İşte biçimlendirme var. Burada, $ watch'ı kurmak için link fonksiyonunun arıyor olduğu pointource niteliğini ekliyorsunuz.

<div ng-app="leafletMap"> 
    <div ng-controller="MapCtrl"> 
     <sap id="map" pointsource="pointsFromController"></sap> 
    </div> 
</div> 

Ardından, denetleyicinizde, yalnızca güncelleştirebileceğiniz bir özelliğe sahipsiniz.

function MapCtrl($scope, $http) { 
    //here's the property you can just update. 
    $scope.pointsFromController = [{lat: 40, lng: -86},{lat: 40.1, lng: -86.2}]; 

    //here's some contrived controller method to demo updating the property. 
    $scope.getPointsFromSomewhere = function() { 
    $http.get('/Get/Points/From/Somewhere').success(function(somepoints) { 
     $scope.pointsFromController = somepoints; 
    }); 
    } 
} 

Answer 2

Geçenlerde Angular JS ve Leaflet kullanarak bir uygulama oluşturduk. Bir JSON dosyasındaki konum verileri dahil, açıkladığınız şeye çok benzer. Benim çözümüm blesh'a benzer.

İşte temel işlem.

Sayfalarımın birinde <map> öğem var. Daha sonra, <map> öğesinin Leaflet haritasının yerini alacak bir Direktifim var. Kurulumum biraz farklı çünkü JSON verilerini bir Fabrikaya yüklüyorum, ancak kullanım durumunuza göre uyarladım (hata varsa özür dilerim). Yönergede, JSON dosyanızı yükleyin, ardından her bir konumunuz arasında geçiş yapın (JSON dosyanızı uyumlu bir şekilde ayarlamanız gerekir). Ardından her lat/lng'de bir işaretleyici görüntüleyin. angularjs içinde

HTML

<map id="map" style="width:100%; height:100%; position:absolute;"></map> 

Yönergesi

app.directive('map', function() { 
return { 
    restrict: 'E', 
    replace: true, 
    template: '<div></div>', 
    link: function(scope, element, attrs) { 

     var popup = L.popup(); 
     var southWest = new L.LatLng(40.60092,-74.173508); 
     var northEast = new L.LatLng(40.874843,-73.825035);    
     var bounds = new L.LatLngBounds(southWest, northEast); 
     L.Icon.Default.imagePath = './img'; 

     var map = L.map('map', { 
      center: new L.LatLng(40.73547,-73.987856), 
      zoom: 12, 
      maxBounds: bounds, 
      maxZoom: 18, 
      minZoom: 12 
     }); 



     // create the tile layer with correct attribution 
     var tilesURL='http://tile.stamen.com/terrain/{z}/{x}/{y}.png'; 
     var tilesAttrib='Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.'; 
     var tiles = new L.TileLayer(tilesURL, { 
      attribution: tilesAttrib, 
      opacity: 0.7, 
      detectRetina: true, 
      unloadInvisibleTiles: true, 
      updateWhenIdle: true, 
      reuseTiles: true 
     }); 
     tiles.addTo(map); 

     // Read in the Location/Events file 
     $http.get('locations.json').success(function(data) { 
      // Loop through the 'locations' and place markers on the map 
      angular.forEach(data.locations, function(location, key){ 

       var marker = L.marker([location.latitude, location.longitude]).addTo(map); 

      }); 
     }); 
    } 
}; 

Numune JSON Dosyası

{"locations": [  
{ 
    "latitude":40.740234, 
    "longitude":-73.995715 
    }, 
{ 
    "latitude":40.74277, 
    "longitude":-73.986654 
    }, 
{ 
    "latitude":40.724592, 
    "longitude":-73.999679 
    } 
]} 

Answer 3

Direktifleri ve MVC farklı teknolojileridir. Yönergeler genellikle sayfa yüklendiğinde yürütülür. Direktifler, html ve xml ile çalışmak için daha fazladır. JSON'a sahip olduktan sonra, çalışmak için mvc çerçevesini kullanmak en iyisidir.

Sayfa oluşturulduktan sonra, yönergeleri uygulamak için genellikle sayfanın yapılışını kaydetmek için $ kapsamı. $ Apply() veya $ derlemesi yapmanız gerekir.

Her iki durumda da, bir direktifte bir hizmet almanın en iyi yolu, bağımlılık enjeksiyon çerçevesini kullanmaktır.

Kapsamı fark ettim: true veya scope: {} yönergenizden eksik kaldı. Bu, yönergelerin ana denetleyicilerle ne kadar iyi oynadığı üzerinde büyük bir etkiye sahiptir.

app.directive('mapThingy',['mapSvc',function(mapSvc){ 
    //directive code here. 

}]); 

app.service('mapSvc',['$http',function($http){ 
//svc work here. 
}]) 

Yönergeler, camelCase eşleştirmesi tarafından uygulanır. Kullanmaktan veya IE ile ilgili bir sorundan kaçınmak istiyorum.

<sap id="nice-map" points="points"/> 

ardından yönergesi tanımı içinde size "=" simbol kullanabilirsiniz: Alternatif Kumandanızda size

$scope.points = // here goes your retrieved data from json 

var ve senin direktifi şablon olduğunu varsayarsak

<div map-thingy=""></div> 

Answer 4

olurdu yönerge kapsamınız ve ana kapsamınız arasında çift yönlü bir bağ kurmak için

module.directive('sap', function() { 
return { 
    restrict: 'E', 
    replace: true, 
    scope:{ 
     points:"=points" 
    }, 
    link: function(scope, element, attrs) { 
     var map = L.map(attrs.id, { 
      center: [40, -86], 
      zoom: 10 
     }); 
     L.tileLayer('http://{s}.tile.cloudmade.com/57cbb6ca8cac418dbb1a402586df4528/997/256/{z}/{x}/{y}.png', { 
      maxZoom: 18 
     }).addTo(map); 

     for (var p in points) { 
      L.marker([p.lat, p.lng]).addTo(map); 
     } 
    } 
}; 
}); 

Ayrıca işaretleyicileri doğrudan haritaya eklemek yerine, işaretçilerinizi önce bir L.featureGroup'a eklemeniz önerilir ve daha sonra bu L.featureGroup değerini haritaya ekleyiniz çünkü bir clearLayers() yöntemi vardır, İşaretleyicilerinizi güncellerken bazı baş ağrıları. Umarım bu yardımcı olur

grupo = L.featureGroup(); 
grupo.addTo(map); 

for (var p in points) { 
    L.marker([p.lat, p.lng]).addTo(grupo); 
} 


// remove all markers 
grupo.clearLayers(); 

, cevap Üstü