我是一个javascript/传单/ag网格新手，所以请耐心等待。

我正在创建一个网站，允许用户根据从ag网格中选择的行来查询(添加/删除(传单地图上的空间点。我对React或Angular没有任何理解/经验，所以我使用的是香草javascript。传单用于在空间上显示数据。

我的空间数据有GPS坐标，这些坐标是父记录。每个父母都有多个孩子。

空间数据

空间数据是我读入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 ] } }
]};

儿童记录

每个父空间ID都有子记录。数据在.js代码中。

我希望的功能是有人可以为一条名为"灌篮"的路线过滤ag网格；SpatialID"："下Blair_0"；。如果他们筛选"测试二"，它将提供相同的空间ID。这将可以在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);
});

我可以很容易地将"测试"发送到控制台。这使我能够检查我的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网格的预期行为，但这似乎不可能。

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

我主要是一名统计学家/python程序员，所以这对我来说是一次新的尝试。我可能错过了一件更大的事情，如果是这样的话，我会很感激目前方法的替代方案。

所以，一旦用过滤后的行调用onSelectionChanged，您需要将其传递给哪个脚本？

我想你想把表格和传单地图联系起来。如果是，您需要

获取映射对象的引用(请参阅传单文档(
基于过滤后的Geometries创建一个GeoJSON层，并将其添加到地图中

据我所知，如果表中的过滤以及传单层数据更新发生多次，您需要删除现有层并添加新层。查看此帖子。

通过编程将数据从ag网格传递到传单

空间数据

儿童记录

myownscript.js

我的html

相关内容

最新更新

热门标签：