anglejs with Leafletjs

Question

次のディレクティコードはhttp://jsfiddle.net/M6RPn/26/ です。私は多くの緯度と経度を持つjsonフィードを取得したいと思います。私は$ resourceまたは$ httpでAngularを簡単に取得できますが、マップ上のものをマップする命令ですか？

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

は、私はあなたが何をしようとしてリーフレットについて多くのことかは知らないが、私はあなたのディレクティブにあなたのコントローラからいくつかの座標を渡したいと仮定だろうか？

実際にはさまざまな方法がありますが、その中で最高のものは範囲を活用することです。

はここにあなたのディレクティブにあなたのコントローラからのデータを渡すために一つの方法です：

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

はここでマークアップです。ここでは、リンク関数が$ watchを設定するために探しているポイントソース属性を追加します。

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

あなたのコントローラには、ただ更新できるプロパティがあります。

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

私は最近Angular JSとLeafletを使用してアプリケーションを構築しました。 JSONファイルの場所データなど、あなたが記述したものと非常に似ています。私の解決策はbleshに似ています。

これは基本的なプロセスです。

私のページの1つに<map>という要素があります。次に、<map>要素をリーフレットマップに置き換える指令があります。私のセットアップは、JSONデータをFactoryにロードするので少し異なりますが、ユースケースに合わせて調整しました（エラーがあれば謝罪します）。ディレクティブ内でJSONファイルを読み込み、各場所をループします（互換性のある方法でJSONファイルを設定する必要があります）。次に、各緯度/経度でマーカーを表示します。

HTML

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

指令

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

      }); 
     }); 
    } 
}; 

サンプルJSONファイルangularJsで

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

Answer 3

ディレクティブとMVCは異なる技術です。ディレクティブは通常、ページが読み込まれるときに実行されます。ディレクティブは、htmlやxmlで作業するためのものです。 JSONを取得したら、mvcフレームワークを使用して作業を行うのがベストです。

ページがレンダリングされた後、ディレクティブを適用するには、$ scope、$ apply（）または$ compileを実行してページに変更を登録する必要があります。

どちらの場合でも、ディレクティブにサービスを取得する最も良い方法は、依存性注入フレームワークを使用することです。

スコープに注目しました：true、またはスコープ：{}がディレクティブにありませんでした。これは、親コントローラでディレクティブがどのくらいうまく動作するかに大きな影響を与えます。

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

}]); 

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

指令は、キャメルケースマッチングによって適用されます。私はIEの問題を使用することを避けるでしょう。その後、あなたのディレクティブの定義の内側にあなたが「=」simbolを使用することができます

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

：オルタナティブは、あなたのコントローラであなたが

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

を持って、あなたのディレクティブのテンプレートがあると仮定すると

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

Answer 4

だろうセットアップに双方向のは、あなたのディレクティブのスコープとあなたの親スコープの間の結合を

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

代わりに右マップにマーカーを追加するのも、最初L.featureGroupにあなたのマーカーを追加し、それがclearLayersを持っているので、これを保存します、メト）（マップにそのL.featureGroupを追加するためにお奨めですあなたのマーカーを更新するときにいくつかの頭痛。私はこれが役に立てば幸い

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

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


// remove all markers 
grupo.clearLayers(); 

、答えの上歓声