1
我正嘗試在mapbox中加載一個geojson數據，我想在標記上使用複選框應用多個篩選。我試着看看這裏給出的例子：https://www.mapbox.com/mapbox.js/example/v1.0.0/non-exclusive-markers/對地圖盒中的標記進行多重篩選
所以這裏的過濾是基於每個標記的健康和資產代碼。無論是'健康'，'警告'，'已停止'或'123125'，'123135'，'123145'。 該代碼用於加載地圖，並根據其健康的顏色放置標記。過濾器菜單也獲得了六個過濾器選項。但是，當選擇具有相同標記的兩個過濾器時，標記將從屏幕上消失。
例如，選擇'123125'然後選擇'警告'。黃色標記出現在屏幕上，但取消選擇任何一個過濾器時，它會消失。我沒有得到如何防止這一點。 「123135」，「停止」和「123145」，「健康」也會發生同樣的情況。
請看下面的代碼，並幫助我。
<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src="/js/leaflet-0.7.2/leaflet.ajax.min.js"></script>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiZG9zcyIsImEiOiI1NFItUWs4In0.-9qpbOfE3jC68WDUQA1Akg';
var map = L.mapbox.map('map', 'mapbox.streets');
var featureLayerGeoJSON = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"title":"Volkswagen Group",
"healthy":false,
"warning":true,
"stopped":false,
"marker-color":"#FFFF00",
"marker-size":"medium",
"Asset_Code": "123125",
"Health_Code": "Warning"
},
"geometry": {
"type": "Point",
"coordinates": [ -43.172502,-22.965881 ]
}
},
{
"type": "Feature",
"properties": {
"title":"Volkswagen Group",
"healthy":false,
"warning":true,
"stopped":false,
"marker-color":"#FF0000",
"marker-size":"medium",
"Asset_Code": "123135",
"Health_Code": "Stopped"
},
"geometry": {
"type": "Point",
"coordinates": [ -8.990956,38.581054 ]
}
},
{
"type": "Feature",
"properties": {
"title":"Volkswagen Group",
"healthy":false,
"warning":true,
"stopped":false,
"marker-color":"#1EB01E",
"marker-size":"medium",
"Asset_Code": "123145",
"Health_Code": "Healthy"
},
"geometry": {
"type": "Point",
"coordinates": [ 139.740667,35.626567 ]
}
}
]
};
map.featureLayer.setGeoJSON(featureLayerGeoJSON);
// Find and store a variable reference to the list of filters.
var filters = document.getElementById('filters');
// Wait until the marker layer is loaded in order to build a list of possible
// types. If you are doing this with another featureLayer, you should change
// map.featureLayer to the variable you have assigned to your featureLayer.
var makeCheckboxes1 = function() {
// Collect the types of symbols in this layer. you can also just
// hardcode an array of types if you know what you want to filter on,
// like var types = ['foo', 'bar'];
var typesObj = {}, types = [];
map.featureLayer.eachLayer(function (entity) {
typesObj[entity.feature.properties['Asset_Code']] = true;
})
for (var k in typesObj) types.push(k);
var checkboxes = [];
// Create a filter interface.
for (var i = 0; i < types.length; i++) {
// Create an an input checkbox and label inside.
var item = filters.appendChild(document.createElement('div'));
var checkbox = item.appendChild(document.createElement('input'));
var label = item.appendChild(document.createElement('label'));
checkbox.type = 'checkbox';
checkbox.id = types[i];
checkbox.checked = true;
// create a label to the right of the checkbox with explanatory text
label.innerHTML = types[i];
label.setAttribute('for', types[i]);
// Whenever a person clicks on this checkbox, call the update().
checkbox.addEventListener('change', update);
checkboxes.push(checkbox);
}
// This function is called whenever someone clicks on a checkbox and changes
// the selection of markers to be displayed.
function update() {
var enabled = {};
// Run through each checkbox and record whether it is checked. If it is,
// add it to the object of types to display, otherwise do not.
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) enabled[checkboxes[i].id] = true;
}
map.featureLayer.setFilter(function(feature) {
// If this symbol is in the list, return true. if not, return false.
// The 'in' operator in javascript does exactly that: given a string
// or number, it says if that is in a object.
// 2 in { 2: true } // true
// 2 in { } // false
return (feature.properties['Asset_Code'] in enabled);
});
}
}
var makeCheckboxes2 = function() {
// Collect the types of symbols in this layer. you can also just
// hardcode an array of types if you know what you want to filter on,
// like var types = ['foo', 'bar'];
var typesObj = {}, types = [];
map.featureLayer.eachLayer(function (entity) {
typesObj[entity.feature.properties['Health_Code']] = true;
})
for (var k in typesObj) types.push(k);
var checkboxes = [];
// Create a filter interface.
for (var i = 0; i < types.length; i++) {
// Create an an input checkbox and label inside.
var item = filters.appendChild(document.createElement('div'));
var checkbox = item.appendChild(document.createElement('input'));
var label = item.appendChild(document.createElement('label'));
checkbox.type = 'checkbox';
checkbox.id = types[i];
checkbox.checked = true;
// create a label to the right of the checkbox with explanatory text
label.innerHTML = types[i];
label.setAttribute('for', types[i]);
// Whenever a person clicks on this checkbox, call the update().
checkbox.addEventListener('change', update);
checkboxes.push(checkbox);
}
// This function is called whenever someone clicks on a checkbox and changes
// the selection of markers to be displayed.
function update() {
var enabled = {};
// Run through each checkbox and record whether it is checked. If it is,
// add it to the object of types to display, otherwise do not.
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) enabled[checkboxes[i].id] = true;
}
map.featureLayer.setFilter(function(feature) {
// If this symbol is in the list, return true. if not, return false.
// The 'in' operator in javascript does exactly that: given a string
// or number, it says if that is in a object.
// 2 in { 2: true } // true
// 2 in { } // false
return (feature.properties['Health_Code'] in enabled);
});
}
}
makeCheckboxes1();
makeCheckboxes2();
</script><style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
.filter-ui {
background:#fff;
position:absolute;
top:10px;
right:10px;
z-index:100;
padding:10px;
border-radius:3px;
}
</style><!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Multiple filters on markers</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.3.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.3.0/mapbox.css' rel='stylesheet' />
</head>
<body>
<nav id='filters' class='filter-ui'>
<h4 align='center'>Filter based on Health</h4>
</nav>
<div id='map'></div>
</body>
</html>請幫助我。
你能爲我們創建一個小提琴嗎？ – hurricane
@hurricane，我試着用上面分享的代碼創建小提琴。但輸出不會加載標記。 鏈接爲：https://jsfiddle.net/ey88gfgd/ 使用'運行代碼片段'在這裏輸出加載標記，如上面的問題所述。 – shoghi07