У меня есть два массива (items и idValues). Элементы представляют многоугольники (проекты) на карте, которые выбраны и содержат значения их идентификаторов. idValues - это массив, который содержит идентификаторы информационных карточек на стороне для каждого проекта.
Когда я фильтрую свою карту, я хочу взять выбранные идентификаторы выбранных полигонов и сравнить эти идентификаторы со значениями идентификаторов моих информационных карт проекта на стороне, чтобы, если я выберу на карте только проекты, выполненные в 2011 году Я буду видеть только информационные карточки проектов, которые соответствуют этим проектам 2011 года.
Проблема для меня в том, что когда я пытаюсь сравнить массивы, они сравниваются по индексу, а не по значению, что дает мне неверный результат, и если я пытаюсь изменить выбор фильтра, он заканчивает фильтрацией уже отфильтрованных массив вместо перезапуска из всего массива idValues. Например:
idValues = [10-001, 10-002, 10-003, 11-004, 11-005, 11-006, 12-007, 12-008];
items = [11-004, 11-005, 11-006];
//I only want to show the cards that have idValues == to items values, but they are compared by index:
//10-001 !== 11-004
//10-002 !== 11-005 etc...
Как сравнить каждое значение массива с другим, если они имеют разную длину? И как мне убедиться, что каждый раз, когда я изменяю требования фильтра, это новый запрос и фильтрация уже сделанного выбора? Здесь есть пост, который я не видел, который может ответить на мой вопрос?
Мой код указан ниже, спасибо за любую помощь!
require([
"esri/map",
"esri/layers/FeatureLayer",
"esri/dijit/PopupTemplate",
"esri/dijit/Legend",
"dojo/_base/array",
"dojo/on",
"dojo/dom",
"dojo/dom-construct",
"dojo/domReady!"
], function(
Map,
FeatureLayer,
PopupTemplate,
Legend,
array,
on,
dom,
domConst
) {
var map = new Map("viewDiv", {
basemap: "gray-vector",
center: [ -85.20127, 35.12355 ],
zoom: 1
});
//Add layer to the map
var serviceUrl = "https://services2.arcgis.com/C8EMgrsFcRFL6LrL/arcgis/rest/services/HISAProjects_WFL1/FeatureServer/0?token=_3OEVd8Vn48n6NCc5StDZJZXhDbQmb6T3mqGZSNDqOQeg9whVAFaSgX2TnzlRsAy9R2CtzlrgdTk-ytdSxkYUyeQJEMV_r4v2hJska2KFGgC9ihtGe0twoO6zCZxcYfycDQmf80zvfRSoI8OtNQWYXLArn0yGc1WnvSInTMd8jm46yLvekFaQOmznJEtX73-bratx_zJGjN_SQ02s4kkgkgveg463iw7Ub1TIr0kjos";
var layer = new FeatureLayer(serviceUrl, {
outFields: [ "FY", "HISAProjects_final_1262017_cs_2", "HISAProjects_final_1262017_csv1", "HISAProjects_final_1262017_cs_4", "HISAProjects_final_1262017_cs_5", "HISAProjects_final_1262017_csv_", "HISAProjects_final_1262017_cs_3", "HISAProjects_final_1262017_cs_1", "HabitatData12_4_17_ProjectNum"],
infoTemplate: new PopupTemplate({
title: "{HISAProjects_final_1262017_cs_4}",
description: "<br />Lead PI: {HISAProjects_final_1262017_cs_5}"
+ "<br />Region: {HISAProjects_final_1262017_csv_}"
+ "<br />Year: {FY}"
+ "<br />Primary Habitat Type: {HISAProjects_final_1262017_cs_2}"
+ "<br />Secondary Habitat Type: {HISAProjects_final_1262017_cs_3}"
+ "<br />Distance from shore: {HISAProjects_final_1262017_csv1}"
+ "<br />Secondary Distance from shore: {HISAProjects_final_1262017_cs_1}"
//
// "Learn more.." link connected to individual main-areaCard info windows
})
});
map.addLayer(layer);
var legend = new Legend({
map: map,
layerInfos: [{
layer: layer,
title: "Habitat Type"
}]
}, "legendDiv");
// "Global" Variables
var filter1 = document.getElementById("filterhabitat");
var filter2 = document.getElementById("filterlocation");
var filter3 = document.getElementById("filteryear");
var button = document.getElementById("button");
var idValues = [];
var elem = document.getElementsByClassName("clickable");
//console.log(elem);
//console.log(elem.attributes);
map.on("load", function(evt){
legend.startup();
for(var i = 0; i < elem.length; ++i){
if(elem[i].attributes.id.value != "undefined"){
if(elem[i].attributes.id.value){
var elements = elem[i].attributes.id.value;
idValues.push(elements);
}
}
} //end for loop
console.log("idValues: " + idValues);
button.addEventListener("click", function(e){
habitatValue = filter1.options[filter1.selectedIndex].value;
distanceValue = filter2.options[filter2.selectedIndex].value;
yearValue = filter3.options[filter3.selectedIndex].value;
pushValues(habitatValue, distanceValue, yearValue);
});
}); //end of map event function
function pushValues (habitatValue, distanceValue, yearValue){
var expressionArray = [];
if (habitatValue) {
var str = `HISAProjects_final_1262017_cs_2 = '${habitatValue}'`;
expressionArray.push(str);
}
if (distanceValue) {
var str = `HISAProjects_final_1262017_csv1 = '${distanceValue}'`;
expressionArray.push(str);
}
if (yearValue) {
var str = `FY = '${yearValue}'`;
expressionArray.push(str);
}
console.log(expressionArray);
var definitionExpression = expressionArray.join(' AND ');
updateDefinitionExpression(definitionExpression);
}
function updateDefinitionExpression(definitionExpression){
//var definitionExpression = "HISAProjects_final_1262017_cs_2 = 'PELAGIC' AND FY = '2010'";
layer.setDefinitionExpression(definitionExpression);
layer.on('update-end', function(evt){
var projNumArr = [];
array.map(layer.graphics, function(gra){
projNumArr.push(gra.attributes.HabitatData12_4_17_ProjectNum);
});
var items = projNumArr;
// console.log("items: " + items);
// console.log("ids: " + idValues);
for(i in idValues){
console.log("items: " + items[i]);
console.log("idValues: " + idValues[i]);
if(idValues.length > 0){
if (idValues[i] !== items[i]){
$("#" + idValues[i]).hide();
}
}
}
}); //END HERE
map.infoWindow.hide();
}//end updateDefinitionExpression function
}); // end Function