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 过滤器?
基础教程推荐
- Javascript 在多个元素上单击事件侦听器并获取目标 2022-01-01
- jQuery File Upload - 如何识别所有文件何时上传 2022-01-01
- 如何在特定日期之前获取消息? 2022-01-01
- 如何使用 CSS 显示和隐藏 div? 2022-01-01
- 为什么我在 Vue.js 中得到 ERR_CONNECTION_TIMED_OUT? 2022-01-01
- 每次设置弹出窗口的焦点 2022-01-01
- Node.js 有没有好的索引/搜索引擎? 2022-01-01
- 什么是不使用 jQuery 的经验技术原因? 2022-01-01
- WatchKit 支持 html 吗?有没有像 UIWebview 这样的控制器? 2022-01-01
- 如何使用sencha Touch2在单页中显示列表和其他标签 2022-01-01
