1

AngularJsWeb アプリケーション内で、Leaflet.jsとLeaflet markerclusterを使用してマップを作成しています。

チャートをレンダリングするには、nvd3.jsとnvd3-angular-directiveを使用しています

世界中からさまざまなデータCircleMarkerが届いています。データを受け取った国ごとに簡単なデータを示しています。

私のデータは次のように整理されています。

{
  US : {country:"US", count:10, rate: {high: 3, medium: 4, low: 3}},
  IT : {country:"IT", count:4, rate: {high: 1, medium: 1, low: 2}}
}

これは、マップでCircleMarkerは、アメリカとイタリアの中心に表示されることを意味します。

それでは、問題に取り掛かりましょう。それぞれCircleMarkerにポップアップをバインドしています。各ポップアップに、その特定の国のnvd3分布を示す円グラフ (具体的にはドーナツ) を含めたいと考えています。rate

問題は、現在マップが適切にレンダリングされ、マーカーが完全に配置されていることですが、マーカーをクリックすると表示されるポップアップが空です (図を参照)。私はグーグルで検索しましたが、私を助けることができるものを見つけることができませんでした.

空のポップアップ

CircleMarkersとクラスタ を構築する方法は次のとおりです。

var markers = L.markerClusterGroup({
  maxClusterRadius: 120,
  iconCreateFunction: function (cluster) {
    return L.divIcon({html: '<b>' + cluster.getChildCount() + '</b>', className: 'mycluster', iconSize: L.point(40, 40)});
  }
})

var geolocData = {
  US : {country:"US", count:10, rate: {high: 3, medium: 4, low: 3}},
  IT : {country:"IT", count:4, rate: {high: 1, medium: 1, low: 2}}
}

for (key in geolocData){

  var latlng = retrieveLatLongFromCountryCode(key)
  var marker = new L.circleMarker(latlng, {stroke: false, className:'the-marker-class', fillOpacity: 1, color:'#00FF00', weight: 1})

  var popupChartOptions = {
    chart: {
      type: 'pieChart',
      height: 140,
      donut: true,
      donutRatio: 0.40,
      x: function(d) { return d.label },
      y: function(d) { return d.value },
      color: [
        '#2ecc71',
        '#f1c40f',
        '#e74c3c',
      ],
      valueFormat: d3.format(',.0d')
    }
  }
  var popupChartData = [{
    label: 'low',
    value: geolocData[key].rate.low
  }, {
    label: 'medium',
    value: geolocData[key].rate.medium
  }, {
    label: 'high',
    value: geolocData[key].rate.high
  }]

  marker.bindPopup('<nvd3 options="chartOptions" data="chartData"></nvd3>')
  markers.addLayers(marker)
}

map.addLayer(markers)

アップデート

私は物事を少し変えました。CircleMarkerまず、クラスを拡張しました

var customCircleMarker = L.CircleMarker.extend({
  options: { 
    countrycode: '',
    rates: {},
    count: 0
  }
})

次に、これCustomCircleMarkerをマップ内で使用します

var marker = new customCircleMarker(latlng, {stroke: false, className: 'the-class-name', fillOpacity: 1, weight: 1})

var popupChartData = [{
    label: 'low',
    value: [geolocLoad[key].rate.low]
}, {
    label: 'medium',
    value: [geolocLoad[key].rate.medium]
}, {
    label: 'high',
    value: [geolocLoad[key].rate.high]
}]

次に、ポップアップをバインドし、マーカーにカスタム データを入力clickして、有用なデータを含むメッセージを送信する on コールバックを作成します。

marker.bindPopup('<div id="chart-' + key + '"></div>')
marker.countrycode = key
marker.rates = popupChartData
marker.count = geolocLoad[key].count

marker.on('click', function(e){
  $scope.$emit('marker:click', this.countrycode, this.count, this.rates)
})

レシーバーはデータを受け取り、次のようにチャートをレンダリングします。

$scope.$on('marker:click', function(caller, countrycode, count, rates){
  console.log('received', countrycode, count, rates)

  var width = 500,
      height = 500

  nv.addGraph(function(){
    var chart = nv.models.pieChart()
      .x(function(d) { return d.label })
      .y(function(d) { return d.value })
      .width(width)
      .height(height);

    d3.select("#chart-"+countrycode)
      .datum(rates)
      .attr('width', width)
      .attr('height', height)
      .call(chart);

    return chart;
  })
})

悲しいことに、これは再び機能しません.. 再び機能しない

注: angular-leaflet-directive はかなりやり過ぎで、あまり好きではなかったので使用していません。とにかく使ったほうがいいと思いますか？

4

1 に答える 1