代码中应在何处使用parseFloat/Number转换GeoJSON数据供Leaflet地图读取

核心修改点 #

1. 数值类型转换：在GeoJSON数据加载完成后统一处理所有需要用的数值字段，仅需转换一次，性能最优
2. 图例同步更新：每次切换字段渲染时，先移除旧图例，再基于当前字段的数值重新计算分级、生成新图例

完整修改代码片段 #

// Global variables
let map;
let lat = 34;
let lon = -118;
let zl = 9;

let geojsonPath = 'https://raw.githubusercontent.com/LCIWaterProjects/DRAFT-LA-County-Governance-Map/main/data/Data_Update.geojson';
let geojson_data;
let geojson_layer;

let brew = new classyBrew();
let legend = L.control({position: 'bottomright'});
let info_panel = L.control();

let fieldtomap;

// initialize
$( document ).ready(function() {
    createMap(lat,lon,zl);
    getGeoJSON();
});

// create the map
function createMap(lat,lon,zl){
    map = L.map('map').setView([lat,lon], zl);
    L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}',
    {
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        maxZoom: 18,
        id: 'light-v10',
        tileSize: 512,
        zoomOffset: -1,
        accessToken: 'pk.eyJ1Ijoic2FyYWhwZXJlejEiLCJhIjoiY2t0MG9hZDNnMDZ2NDJ1c2M5dzBmb201OSJ9.5fv8NqX5cfA0NMcmEW_63g'
    }).addTo(map);
}

// 补充定义getGeoJSON函数，加载数据同时转换字段类型
function getGeoJSON() {
    $.getJSON(geojsonPath,function(data){
        // 统一转换所有需要用到的字符串数值字段为数字类型
        data.features.forEach(feature => {
            // 需要转换的字段在这里逐一添加即可
            feature.properties.Population = Number(feature.properties.Population);
            feature.properties.Service_Co = Number(feature.properties.Service_Co);
            // 比如新增平均水费字段：feature.properties.Avg_Water_Fee = Number(feature.properties.Avg_Water_Fee);
        })
        geojson_data = data;
        // 初始默认加载人口数据
        mapGeoJSON('Population',5,'YlOrRd','jenks');
    })
}

function mapGeoJSON(field,num_classes,color,scheme){
    // 清除已有图层
    if (geojson_layer){
        geojson_layer.clearLayers()
    }
    fieldtomap = field;

    // 基于当前选中字段配置classyBrew
    const allValues = geojson_data.features.map(item => item.properties[fieldtomap]);
    brew.setSeries(allValues);
    brew.setNumClasses(num_classes);
    brew.setColorCode(color);
    brew.classify(scheme);

    // 移除旧图例，避免重叠
    if(map.hasLayer(legend)){
        legend.remove();
    }
    // 生成新图例
    createLegend();

    // 图层渲染逻辑
    geojson_layer = L.geoJSON(geojson_data, {
        style: function(feature) {
            return {
                fillColor: brew.getColorInRange(feature.properties[fieldtomap]),
                weight: 1,
                opacity: 1,
                color: '#fff',
                fillOpacity: 0.7
            };
        }
        // 你原来的其余图层配置（比如弹窗、交互事件）接在这里即可
    }).addTo(map);
}

function createLegend(){
    legend.onAdd = function (map) {
        var div = L.DomUtil.create('div', 'info legend'),
        breaks = brew.getBreaks(),
        labels = [],
        from, to;
        
        for (var i = 0; i < breaks.length; i++) {
            from = breaks[i];
            to = breaks[i + 1];
            if(to) {
                labels.push(
                    '<i style="background:' + brew.getColorInRange(to) + '"></i> ' +
                    from.toFixed(0) + ' &ndash; ' + to.toFixed(0));
                }
            }
            div.innerHTML = labels.join('<br>');
            return div;
        };
    legend.addTo(map);
}

// 按钮触发逻辑无需修改
function myPopFunction(){
    mapGeoJSON('Population',5,'YlOrRd','jenks');
}

function myServeFunction(){
    mapGeoJSON('Service_Co',5,'BuPu','quantiles');
}

内容的提问来源于stack exchange，提问作者prock