如何访问函数内的json变量，实现上传JSON文件加载到Leaflet地图

核心问题说明 #

1. logFile函数中定义的json属于函数局部变量，作用域仅在函数内部，外部默认无法直接访问
2. 文件读取是异步操作，你写在全局的L.geoJSON(json).addTo(map)会在页面加载时直接执行，此时用户还未上传文件，json变量不存在，必然运行报错
3. 原有代码中地图实例的变量名为map_init，后续调用addTo(map)时的map变量未定义，属于变量名书写错误

推荐实现方式（符合异步执行逻辑） #

直接在文件读取完成的logFile回调中执行地图图层添加操作，无需额外暴露变量，修改后的JavaScript代码如下：

// Get the form and file field
let form = document.querySelector('#upload');
let file = document.querySelector('#file');
// Listen for submit events
form.addEventListener('submit', handleSubmit);

/**
 * Handle submit events
 * @param  {Event} event The event object
 */
function handleSubmit(event) {
    // Stop the form from reloading the page
    event.preventDefault();
    // If there's no file, do nothing
    if (!file.value.length) return;
    // Create a new FileReader() object
    let reader = new FileReader();
    // Setup the callback event to run when the file is read
    reader.onload = logFile;
    // Read the file
    reader.readAsText(file.files[0]);
}

function logFile(event) {
    let str = event.target.result;
    let json = JSON.parse(str);
    console.log('string', str);
    console.log('json', json);
    // 读取完成后直接将GeoJSON添加到地图，修正地图实例变量名为map_init
    L.geoJSON(json).addTo(map_init);
}

var map_init = L.map('map', {
    center: [9.0820, 8.6753],
    zoom: 8
});
var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map_init);
// 删除原有全局位置的L.geoJSON(json).addTo(map)代码，执行时机错误

如需在其他位置复用json变量的实现方式 #

如果确实需要在logFile外部多处使用上传的JSON数据，可以将变量提升到全局作用域，注意必须在文件读取完成后再调用该变量：

// 全局声明变量存储上传的JSON数据
let uploadGeoJson;

// Get the form and file field
let form = document.querySelector('#upload');
let file = document.querySelector('#file');
// ... 其余原有逻辑不变
function logFile(event) {
    let str = event.target.result;
    // 给全局变量赋值
    uploadGeoJson = JSON.parse(str);
    console.log('json', uploadGeoJson);
    L.geoJSON(uploadGeoJson).addTo(map_init);
}

// 其他位置需要调用时，需保证是在文件上传完成后触发，例如按钮点击事件中：
// document.querySelector('#otherBtn').addEventListener('click', () => {
//   if (uploadGeoJson) {
//     console.log('读取全局存储的json', uploadGeoJson)
//     // 其他业务逻辑
//   }
// })

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