以编程方式将数据从 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 © <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.
我是一个总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 © <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.