Я очень застрял, выдергивая волосы. Я закончил карту с символами в буклете о скоростях обнаружения камерой дикой природы. У меня есть элемент формы, который выбирает все виды, рыси, койоты или серые лисы. Все виды - это состояние карты по умолчанию и отображается нормально. Когда я выбираю Bobcat, во втором раскрывающемся списке цвет, определенный в моем операторе if / else, изменяется на основе других цветов под выбранным bobcat. Я знаю это, потому что, если я закомментирую часть кода койота и лисы, рысь отобразится правильно. Я уверен, что это что-то маленькое, но я не могу этого понять. Ниже приведен код специально для элемента формы. Заранее благодарим за помощь.
omnivore.csv('Data/DetectionRates_BCGF_V7.csv')
.on('ready', function (e) {
// access geoJson here
drawMap(e.target.toGeoJSON());
drawLegend(e.target.toGeoJSON());
// console.log(e.target.toGeoJSON())
// console.log(e.target)
// all data loaded into the layer
})
.on('error', function (e) {
// if the error can't be parsed or loaded over AJAX
console.log(e.error[0].message);
})
function drawMap(data) {
// console.log(data)
const options = {
pointToLayer: function (feature, ll) {
// Letters instead of numbers
return L.circleMarker(ll, {
weight: 2,
fillOpacity: 0,
opacity: 1,
});
}
}
// create 4 separate layers
const bobcatLayer = L.geoJson(data, options)
coyoteLayer = L.geoJson(data, options)
foxLayer = L.geoJson(data, options)
interactiveLayer = L.geoJson(data, options).addTo(map);
// fit the bounds to one of the layers
map.fitBounds(interactiveLayer.getBounds());
interactiveLayer.setStyle({
weight: 2,
color: '#222'
});
// adjust zoom level
map.setZoom(map.getZoom() - .4);
// set initial circle size in map
resizeCircles(interactiveLayer, 9, species)
// call sequenceUI function
sequenceUI(interactiveLayer)
dropDownUI(interactiveLayer)
} // end drawMap
function calcRadius(val) {
const radius = Math.sqrt(val / Math.PI);
return radius * 10; // adjust scale factor
}
// resize circles based on detection rates using radius scaling
function resizeCircles(interactiveLayer, monthYear, species) {
if (species == "all") {
interactiveLayer.eachLayer(function (layer) {
layer.setStyle({
color: '#173560'
})
const props = layer.feature.properties
const relativeDetRate = Number(props['b' + monthYear]) + Number(props['c' + monthYear]) + Number(props['f' + monthYear])
const radius = calcRadius(relativeDetRate);
if (radius == 0) {
layer.setStyle({
color: '#555',
radius: 0.5
})
} else {
layer.setRadius(radius);
}
});
} else {
interactiveLayer.eachLayer(function (layer) {
layer.setStyle({
color: '#333'
})
const props = layer.feature.properties
const relativeDetRate = Number(props[species + monthYear])
const radius = calcRadius(relativeDetRate);
const color = function (species) {
if (species == 'b') {
return '#BB952F'
} else {
return '#333'
}
}
// console.log(color(species), species)
if (radius == 0) {
layer.setStyle({
color: '#555',
radius: 0.5
})
} else {
layer.setRadius(radius)
layer.setStyle({
color: color(species)
})
}
});
interactiveLayer.eachLayer(function (layer) {
layer.setStyle({
color: '#A21E36'
})
const props = layer.feature.properties
const relativeDetRate = Number(props[species + monthYear])
const radius = calcRadius(relativeDetRate);
const color = function (species) {
if (species == 'c') {
return '#A21E36'
} else {
return '#333'
}
}
// console.log(color(species), species)
if (radius == 0) {
layer.setStyle({
color: '#555',
radius: 0.5
})
} else {
layer.setRadius(radius)
layer.setStyle({
color: color(species)
})
}
});
interactiveLayer.eachLayer(function (layer) {
layer.setStyle({
color: '#A21E36'
})
const props = layer.feature.properties
const relativeDetRate = Number(props[species + monthYear])
const radius = calcRadius(relativeDetRate);
const color = function (species) {
if (species == 'f') {
return '#3A4B56'
} else {
return '#333'
}
}
// console.log(color(species), species)
if (radius == 0) {
layer.setStyle({
color: '#555',
radius: 0.5
})
} else {
layer.setRadius(radius)
layer.setStyle({
color: color(species)
})
}
});
}
retrieveInfo(interactiveLayer, monthYear)
}```