Leaflet: Update GeoJson filter?(传单:更新 GeoJson 过滤器?)
问题描述
我想用数据填充 GeoJson 层,然后动态过滤要显示的特征.
I would like to populate a GeoJson layer with data and then dynamically filter what features to show.
我已经让过滤器功能工作,但我不知道如何更改过滤器然后刷新图层.
I have gotten the filter function to work but I do not know how to change the filter and then refresh the layer.
添加数据后有什么方法可以更新过滤器?
Is there any way I can update the filter after I have added the data?
推荐答案
我通过将每个功能类型添加到不同的 LayerGroup 基于特征的属性.例如
I did this by adding each feature type to a different LayerGroup based on a property of the feature. e.g.
GeoJSON
var data =[
{
type: "Feature",
properties: {
type: "type1"
},
geometry: {
type: "Point",
coordinates: [-1.252,52.107]
}
},
{
type: "Feature",
properties: {
type: "type2"
},
geometry: {
type: "Point",
coordinates: [-2.252,54.107]
}
}
];
创建 GeoJSON 层
//array to store layers for each feature type
var mapLayerGroups = [];
//draw GEOJSON - don't add the GEOJSON layer to the map here
L.geoJson(data, {onEachFeature: onEachFeature})//.addTo(map);
/*
*for all features create a layerGroup for each feature type and add the feature to the layerGroup
*/
function onEachFeature(feature, featureLayer) {
//does layerGroup already exist? if not create it and add to map
var lg = mapLayerGroups[feature.properties.type];
if (lg === undefined) {
lg = new L.layerGroup();
//add the layer to the map
lg.addTo(map);
//store layer
mapLayerGroups[feature.properties.type] = lg;
}
//add the feature to the layer
lg.addLayer(featureLayer);
}
然后您可以调用 Leaflet map.addLayer/removeLayer 函数,例如
Then you can call the Leaflet map.addLayer/removeLayer functions e.g.
//Show layerGroup with feature of "type1"
showLayer("type1");
/*
* show/hide layerGroup
*/
function showLayer(id) {
var lg = mapLayerGroups[id];
map.addLayer(lg);
}
function hideLayer(id) {
var lg = mapLayerGroups[id];
map.removeLayer(lg);
}
这篇关于传单:更新 GeoJson 过滤器?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:传单:更新 GeoJson 过滤器?
基础教程推荐
- 如何使用TypeScrip将固定承诺数组中的项设置为可选 2022-01-01
- html表格如何通过更改悬停边框来突出显示列? 2022-01-01
- Vue 3 – <过渡>渲染不能动画的非元素根节点 2022-01-01
- Chart.js 在线性图表上拖动点 2022-01-01
- 如何使用JIT在顺风css中使用布局变体? 2022-01-01
- 自定义 XMLHttpRequest.prototype.open 2022-01-01
- 我可以在浏览器中与Babel一起使用ES模块,而不捆绑我的代码吗? 2022-01-01
- 直接将值设置为滑块 2022-01-01
- 用于 Twitter 小部件宽度的 HTML/CSS 2022-01-01
- Electron 将 Node.js 和 Chromium 上下文结合起来意味着 2022-01-01