以编程方式将数据从 ag-grid 传递到传单

Passing data to leaflet from ag-grid programmitically

我是一个总javascript/leaflet/ag-grid新手,还请多多包涵

我正在创建一个网站,允许用户根据从 ag-grid 中选择的行在传单地图上查询 (add/remove) 个空间点。我没有 understanding/experience 和 React 或 Angular,所以我使用的是 vanilla javascript。 Leaflet用于空间显示数据。

我有空间数据,其 GPS 坐标是 parent 记录。每个 parent 他们有多个 children.

空间数据

空间数据是我读入 HTML 文件的外部文件。它看起来像这样:

var spatial_data = {
"type": "FeatureCollection",
"features": [
{ "type": "Feature", 
"properties": { "Name": "Boulder 1", "SpatialID": "Lower Blair_0" }, 
"geometry": { "type": "Point", "coordinates": [ -105.39079766, 41.19044516, 2510.159912109375 ] } },

{ "type": "Feature", 
"properties": { "Name": "Boulder 2", "SpatialID": "Upper Blair_1" }, 
"geometry": { "type": "Point", "coordinates": [ -105.39058423, 41.19655902, 2534.4599609375 ] } }
]};


Children 条记录

每个 parent 空间 ID 有 children 条记录。数据在 .js 代码中。

我希望的功能是有人可以为名为 'Slam Dunk' 的路线过滤 ag-grid,这将提供“SpatialID”:“Lower Blair_0”。如果他们过滤 'Test two',它会提供相同的 SpatialID。这可以在 HTML 文件中使用。

myownscript.js

var rowData = [{"Route Name":"Slam Dunk","SpatialID":"Lower Blair_0"},
 {"Route Name":"Test two","SpatialID":"Lower Blair_0"},
 {"Route Name":"Test three","SpatialID":"Upper Blair_1"}];

var columnDefs= [
    {field: 'Route Name', minWidth:10, sortable:true, filter:true},
    {field: 'Sub-Area', minWidth:5, sortable:true, filter:true},       
];

const gridOptions = {
    columnDefs: columnDefs,
    rowData: rowData,
    defaultColDef:{
        flex:1,
        minWidth:100
    },
    rowSelection: 'multiple',
    pagination:true
};

function onlyUnique(value, index, self) {
    return self.indexOf(value) === index;
};

function grabFilteredData(){
    let rowData = [];
    gridOptions.api.forEachNodeAfterFilter(node => {
        rowData.push(node.data.SpatialID);
    });
    
    var uniqueID = rowData.filter(onlyUnique);
    
    return uniqueID;
}


document.addEventListener('DOMContentLoaded', () => {
    const gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);

});

我可以轻松地将 'test' 发送到控制台。这使我能够检查我的 onSelectionChanged() 是否正常工作;但是,我确实需要将 onSelectionChanged() 的输出作为数组传递。我需要传递它并在我的 HTML 内的嵌入式脚本中使用它。这样我就可以过滤我的传单层和特征中的数据。

我的html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
   
    <!-- Read in the geojson-->
    <script src='assets/spatialdata.json'></script>

    <script src="https://unpkg.com/ag-grid-community@27.0.1/dist/ag-grid-community.min.js"></script>
    <script src="myownscript.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="bstrap/js/bootstrap.min.js"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css">
    <link rel="stylesheet" href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css">

  </head>

  <body>
    <script >
        
var sat_data = L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
          attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
          maxZoom: 18,
          id: 'mapbox/satellite-streets-v11',
          tileSize: 512,
          zoomOffset: -1,
          accessToken: 'my.api.key'
});

var bounds = new L.LatLngBounds(new L.LatLng(41.008,-106.710), new L.LatLng(41.813,-104.861));   

var baseMaps = {
    "Satellite":sat_data
};

      var map = L.map('map', {
        center: [41.210, -105.360],
        zoom: 11,
        layers:[osm,sat_data],
        noWrap:true,
        maxBounds:bounds,
        maxBoundsViscosit:1.0
      });

      L.control.layers(baseMaps).addTo(map);
  
      var promise = $.getJSON("/assets/vedauwoo.geojson");
      promise.then(function(data){
          var allData = L.geoJson(data,{
            onEachFeature: function(feature,layer){
                  layer.bindPopup('<h4> Area Name: '+feature.properties.Name+'</h4><p>Grades: '+feature.properties.Grade+'</p>');
                }
          });
          var others = L.geoJson(data, {
              onEachFeature: function(feature,layer){
                  layer.bindPopup('<h4> Area Name: '+feature.properties.Name+'</h4><p>Grades: '+feature.properties.Grade+'</p>');
                },
              filter: function(feature,layer){

              }
          });
          var layerGroup = L.layerGroup().addTo(map);
          allData.addTo(layerGroup)

          $("#others").click(function() {
            
            var dataToSubset = grabFilteredData();
         
            var subset_data = L.geoJson(data, {
              onEachFeature: function(feature,layer){
                  layer.bindPopup('<h4> Area Name: '+feature.properties.Name+'</h4><p>Grades: '+feature.properties.Grade+'</p>');
                },
              filter: function(feature,layer){
                  return dataToSubset.includes(feature.properties.SpatialID);
              }
            });
            //Works in a hacky way by sending the ID over
            layerGroup.removeLayer(allData)  
            layerGroup.addLayer(subset_data)
            window.map_id = subset_data._leaflet_id;
          });
          $("#allData").click(function() {
            layerGroup.removeLayer(map_id)
            layerGroup.addLayer(allData)
      });
    </script>
  </body>
</html>


我尝试了广泛的搜索。出于某种原因,gridOptions.api.getSelectedRows()forEachNodeAfterFilter 的大多数用例以使用 console.log() 的示例结尾。我需要实际传递该信息,而不仅仅是输出到控制台。我不确定这是否是我对 JS 工作方式的误解,或者这是否是 ag-grid 的预期行为,但这似乎不可能。

这似乎不起作用,因为 .js 文件中的 console.log() 不起作用,并且在 HTML 中的脚本中找不到测试。

我主要是一名 statistician/python 程序员,所以这对我来说是一次新的尝试。我很可能错过了一个更大的图景,如果是这样,我会很感激我目前方​​法的替代方案。

所以一旦 onSelectionChanged 被过滤后的行调用 - 您需要将它传递给什么脚本?

我假设您想 link table 与传单地图。如果是这样,你需要

  • 获取对地图对象的引用(参见Leaflet docs
  • 根据过滤后的几何图形创建 GeoJSON layer 并将其添加到地图中。

如果 table 中的过滤和 leaflet 层数据更新发生多次,您需要删除现有层并添加一个新层,据我所知。检查这个 post.