Question

我正在尝试加载geojson数据，我将其硬编码为变量称为sample。现在我想在点击每个功能后显示一个图表。以下是我的代码。但它给出了ErrorMessage：功能未定义。

var map = L.map('map').setView([55, 3], 5);

 L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {

     attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
     subdomains: ['a','b','c']


}).addTo( map );


var trees = L.geoJson(Sample).addTo(map);

trees.on('click', function ( evt) {
        feature = evt.layer.feature;
        $("#chart").empty();

 var chart = c3.generate({
     data: {
         names: {
             data1: 'a',
             data2: 'b',
             data3: 'c',
             data4: 'd',
             data5: 'e'
         },
         // just taken some RANDOM fields to demonstrate
         // how to draw the chart
         columns: [
             ['data1',
             feature.properties.a],
             ['data2',
             feature.properties.b],
             ['data3',
             feature.properties.c],
             ['data4',
             feature.properties.d],
             ['data5',
             feature.properties.e]
         ],
         types: {
             data1: 'bar',
             data2: 'bar',
             data3: 'bar',
             data4: 'bar',
             data5: 'bar'
         }
     },
     axis: {
         rotated: false,
         x: {
             label: {
                 text: 'Your Topics',
                 position: 'outer-middle'

             }
         },
         y: {
             label: {
                 text: 'Your_Values',
                 position: 'outer-center'
             }
         }

     }
 });

}）;

Answer 1

trees点击处理程序中的事件图层没有功能。您应该将点击处理程序添加到每个图层：

var trees = L.geoJson(Sample, {
  onEachFeature: function onEachFeature(feature, layer) {
    layer.on('clicked feature', function(evt) {
      console.log('feature=', feature);
      $("#chart").empty(); 
      // generate chart here using feature
      // var chart = c3.generate({...});
    });
  }
}).addTo(map);

在html页面底部显示条形图失败

1 个答案: