如何在AngularJS中使用Leaflet的bindPopUp()展示sensor数组表格数据

实现方案 #

你只需要在循环遍历点位的过程中，动态拼接sensor数组对应的表格HTML内容，传入bindPopup即可，不需要额外依赖。如果需要弹窗内容支持AngularJS的指令、双向绑定等能力，再配合$compile服务使用即可。

方案1：纯静态表格拼接（无需双向绑定首选） #

直接在循环里给每个点位生成对应的表格HTML，代码修改如下：

angular.forEach($scope.location, function(item, key) {
  $scope.dataIcon = L.icon({
    iconUrl: "{{ url('image/storm.png') }}",
    iconSize: [38, 45]
  });
  // 动态拼接sensor数组的表格内容
  let sensorTable = `<h4>${item.loc} 传感器数据</h4>
  <table border="1" cellpadding="5" cellspacing="0">
    <thead>
      <tr><th>参数</th><th>数值</th></tr>
    </thead>
    <tbody>`;
  // 遍历当前点位的sensor数组拼接行
  item.sensor.forEach(sensorItem => {
    const key = Object.keys(sensorItem)[0];
    const value = sensorItem[key];
    sensorTable += `<tr><td>${key}</td><td>${value}</td></tr>`;
  });
  sensorTable += `</tbody></table>`;
  // 把拼接好的表格传入bindPopup
  marker = new L.marker([parseFloat(item.lat), parseFloat(item.long)], {
    icon: $scope.dataIcon
  }).addTo($scope.map).bindPopup(sensorTable);
});

如果需要调整表格样式，直接给table加自定义class写CSS即可。

方案2：支持AngularJS绑定（需要用到指令/变量绑定用这个） #

如果你的弹窗内容需要用到AngularJS的指令、点击事件或者双向绑定，需要用$compile服务编译HTML后再传入：

1. 先在控制器里注入$compile服务
2. 修改代码如下：

// 注入$compile的控制器示例
app.controller('YourController', ['$scope', '$compile', function($scope, $compile) {
  // 你的其他代码...
  angular.forEach($scope.location, function(item, key) {
    $scope.dataIcon = L.icon({
      iconUrl: "{{ url('image/storm.png') }}",
      iconSize: [38, 45]
    });
    // 把当前点位的sensor挂到临时作用域
    $scope.currentSensor = item.sensor;
    $scope.currentLoc = item.loc;
    // 写带Angular语法的模板
    const popupTemplate = `
      <div>
        <h4>{{currentLoc}} 传感器数据</h4>
        <table border="1" cellpadding="5" cellspacing="0">
          <tr><th>参数</th><th>数值</th></tr>
          <tr ng-repeat="s in currentSensor">
            <td>{{Object.keys(s)[0]}}</td>
            <td>{{s[Object.keys(s)[0]]}}</td>
          </tr>
        </table>
      </div>
    `;
    // 编译模板生成DOM
    const compiledContent = $compile(popupTemplate)($scope)[0];
    marker = new L.marker([parseFloat(item.lat), parseFloat(item.long)], {
      icon: $scope.dataIcon
    }).addTo($scope.map).bindPopup(compiledContent);
  });
}]);

注意事项 #

• 不要把$scope.content定义成全局的，每个点位的弹窗内容要在循环内对应当前item生成，否则所有弹窗都会显示同一个内容
• 如果你要调整表格样式，可以自定义CSS类控制边距、边框等样式，直接写在全局样式文件里即可

内容的提问来源于stack exchange，提问作者bengbeng