gpt4 book ai didi

javascript - 如何在过滤后保持 GeoJSON 样式?

转载 作者:行者123 更新时间:2023-12-03 10:43:02 25 4
gpt4 key购买 nike

我的 map 有一个简单的过滤器,用于由菜单-ui 切换控制的小型 GeoJSON 多边形数据集。

$('.menu-ui a').on('click', function() {
// For each filter link, get the 'data-filter' attribute value.
var filter = $(this).data('filter');
$(this).addClass('active').siblings().removeClass('active');
featureLayer.setFilter(function(f) {
// If the data-filter attribute is set to "all", return
// all (true). Otherwise, filter on markers that have
// a value set to true based on the filter name.
return (filter === 'all') ? true : f.properties.DISTRICT == filter;
});
return false;
});

多边形样式在此之前设置:

var featureLayer = L.mapbox.featureLayer()
.loadURL('citycouncils.geojson')
.addTo(map);

function getMyColor(myargument) {
if (myargument === '1') {
return '#996767'
};
if (myargument === '2') {
return '#679967'
};
if (myargument === '3') {
return '#676799'
};
if (myargument === '4') {
return '#676794'
};
if (myargument === '5') {
return '#676799'
};
}
featureLayer.on('ready', function() {
featureLayer.eachLayer(function(polygon) {
polygon.bindPopup('District ' + polygon.feature.properties.DISTRICT);
console.log(typeof setStyle);
polygon.setStyle({
opacity: 0.55,
weight: 2,
opacity: 1,
fillOpacity: 0.55,
fillColor: getMyColor(polygon.feature.properties.DISTRICT),
color: 'white'
});
});
});

GeoJSON 样式在 map 加载时正确,但在切换菜单用户界面和过滤 GeoJSON 时样式会丢失。如何通过过滤过程保留样式?

编辑:The filter function works fine.如何在流程中传递样式?

最佳答案

当您应用过滤器时,过滤后的要素将重新添加到图层中,因为您仅在首次加载要素并添加它们时在就绪事件上应用样式,因此当您由于重新添加而使用过滤器。使用过滤器后,您应该再次应用样式,尝试如下操作:

var featureLayer = L.mapbox.featureLayer('http://run.plnkr.co/1zb4Lj1NPtpu4MAM/data.geo.json').addTo(map);

// Fetch available inputs
var inputs = document.querySelectorAll('input.filter');

// Loop over inputs
for (i = 0; i < inputs.length; i++) {
// Attach events
inputs[i].onchange = function () {
// Run filter on inputchange
filter();
}
}

// Object to hold the colors
var colors = {
'1': 'red',
'2': 'yellow',
'3': 'blue'
};

// Method which applies style
var setStyle = function () {
// Loop over layers in featureLayer
featureLayer.eachLayer(function (layer) {
// Set style on layer
layer.setStyle({
// set colors from object
fillColor: colors[layer.feature.id],
color: colors[layer.feature.id]
});
});
}

// Filter function
var filter = function () {
// Array for checked inputs
var checked = [];
// Loop over inputs
for (i = 0; i < inputs.length; i++) {
// See if input is checked
if (inputs[i].checked) {
// Is checked add to array
checked.push(Number(inputs[i].value));
}
}
// Set filter function on array
featureLayer.setFilter(function (feature) {
// return true is feature.id is in checked array
return (checked.indexOf(feature.id) != -1);
});
// Call style function
setStyle();
}

// Run filter when featureLayer is ready
featureLayer.on('ready', filter);

Plunker 上的工作示例:http://plnkr.co/edit/UToM2gtLHEI6EZyjvtGy?p=preview

关于javascript - 如何在过滤后保持 GeoJSON 样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28691435/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com