选择输入并使用按钮提交后,如何更新地图框不透明度?
温馨提示:
本文最后更新于 2024年04月12日,已超过 48 天没有更新。若文章内的图片失效(无法正常加载),请留言反馈或直接联系我。
I can initialize the map and add the geojson polygons. But I can't get the opacity to update based on the options selected. I'm able to retrieve the values and calculate a normalized value for each zipcode but I can't get the opacity to reflect the new values.
Everything works to return an updated geojson with values based on the selections. But I can't update the layer with the new opacity levels.
fetch('https://vizibalmaps.s3.amazonaws.com/2023_zipcode_20mb.json')
.then(response => response.json())
.then(data => {
// Initialize the map
console.log('GeoJSON Data:', data);
console.log('GeoJSON Zipcode Type:', typeof data.features[0].properties.ZCTA5CE20);
const map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v10',
center: [-74.5, 40], // Default center coordinates
zoom: 4, // Adjust the zoom level
});
// Store the fetched data in the global variable
geojsonData = data;
map.on('load', function () {
map.addSource('polygons', {
type: 'geojson',
data: geojsonData, // Use the global variable to set the data
});
map.addLayer({
id: 'polygons',
type: 'fill',
source: 'polygons',
paint: {
'fill-color': '#FF5733',
// 'fill-opacity': 0.3,
'fill-outline-color': '#088',
},
});
.catch(error => console.error('Error fetching GeoJSON:', error));
// Function to update the map based on new data
function normalize(value, min, max) {
// Map the value from the range [min, max] to [0, 1]
return (value - min) / (max - min);
}
function getValueFromData(outputData, zipcode) {
// Find the entry with the matching zipcode
var entry = outputData.find(entry => entry.zipcode === zipcode);
// Return the output_value if the entry is found, otherwise return null or handle appropriately
return entry ? parseInt(entry.output_value) : null;
}
function updateMap(data) {
// Log the data to the console to examine its structure
// console.log(data);
// Extract the output data
var outputData = data.output;
// Get the min and max values from the data
var values = outputData.map(entry => parseInt(entry.output_value));
var minValue = Math.min(...values);
var maxValue = Math.max(...values);
// Iterate over the GeoJSON features to calculate normalized opacity based on the value
geojsonData.features.forEach(feature => {
// Check if the zipcode property exists in feature.properties
if (feature.properties.hasOwnProperty('ZCTA5CE20')) {
// console.log('GeoJSON Zipcode:', feature.properties.ZCTA5CE20); // check geojson zipcode format
// console.log('GeoJSON Zipcode Type:', typeof geojsonData.features[0].properties.ZCTA5CE20);
var zipcode = feature.properties.ZCTA5CE20;
var value = getValueFromData(outputData, zipcode); // Assuming you have a function to extract the value from the data
// console.log('var Zipcode:', zipcode); // check geojson zipcode format
// console.log('outputData value:', value);
// Check if a value was found for the zipcode
if (value !== null) {
var normalizedValue = normalize(value, minValue, maxValue);
var opacity = normalizedValue;
console.log(`Zipcode: ${zipcode}, Output Value: ${value}, normalizedValue: ${normalizedValue}`); // Log the zipcode and corresponding output value
feature.properties.opacity = opacity;
// Log the variables to the console
console.log("Zipcode:", zipcode);
console.log("Value:", value);
console.log("Normalized Value:", normalizedValue);
console.log("Opacity:", opacity);
} else {
console.log(`No output value found for zipcode: ${zipcode}`);
}
} else {
console.log('Zipcode property not found for feature:', feature);
}
// Optionally, you can set other properties such as color based on the opacity value
// Update the 'fill-opacity' property of the feature in the map layer
map.setPaintProperty('polygons', 'fill-opacity', opacity);
});
// Log the map object to the console
console.log(map);
// Update the data source for the 'polygons' layer
// map.getSource('polygons').setData(geojsonData);
}
</script>
</body>
</html>
正文到此结束
- 本文标签: 家庭宠物
- 本文链接: https://www.coder6.net/article/2252
- 版权声明: 本文由蚂蚁原创发布,转载请遵循《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
热门推荐
-
浏览(193) 评论(0)