如何在Openlayers中读取CSV文件并加载矢量坐标点到地图

问题1：坐标不更新的修复方案 #

根因

1. 变量作用域冲突：你在setListEvents的for循环中用var重新声明了Latitude、Longitude，这两个是函数内部的局部变量，完全没有修改你最外层声明的全局变量，全局变量始终处于未赋值状态，导致loadEvent读取的坐标永远无效。
2. 全局存储逻辑错误：就算修复了作用域问题，循环结束后全局变量只会保存最后一条事件的坐标，点击任意事件卡片都会拿到最后一条的坐标，不符合业务需求。

代码修改

首先修改setListEvents中事件卡片的生成逻辑，把对应事件的经纬度直接存入DOM的自定义属性，无需依赖全局变量：

var Latitude = events[i]['Latitude'];
var Longitude = events[i]['Longitude'];
// 拼接卡片DOM时新增data-lat、data-lng属性存储当前事件的坐标
msg = msg+"<div id='"+Id+"' data-folder='"+Folder+"' data-lat='"+Latitude+"' data-lng='"+Longitude+"' class='card' onclick='loadEvent(this);'><div class='card-body'><h4 class='card-title' style='color: #ff0000;'>"+Magnitude;
msg = msg+"</h4><p style='margin-bottom: 0;'>Fecha: "+Date+" Hora: "+Time+"<br />Profundidad: "+Depth+"km<br />Ubicación: "+Latitude+"º"+Longitude+"º</p></div></div>";

然后修改loadEvent函数，直接从点击的卡片DOM中读取对应坐标，同时修正OpenLayers的坐标投影、语法错误：

function loadEvent(e){
    const circleStyle = new ol.style.Circle({
        fill: new ol.style.Fill({
        color:[245,49,5,1] // 透明度参数取值范围为0-1，原代码10为无效值
        }),
        radius:5,
    })
    // 直接从点击的DOM属性中取当前事件的经纬度
    const lat = parseFloat(e.dataset.lat);
    const lng = parseFloat(e.dataset.lng);
    // OpenLayers默认使用EPSG:3857投影，CSV存储的WGS84经纬度需要先做投影转换
    const place = ol.proj.fromLonLat([lng, lat]);
    const point = new ol.geom.Point(place);

    const newfeature = new ol.Feature({
        geometry: point,
        name: "prueba",
    })

    const newPoints = new ol.layer.Vector({
        source : new ol.source.Vector({
            features:[newfeature]
        }),
        visible:true,
        title: "New Points",
        style : new ol.style.Style({
            image: circleStyle
        })
    })
    map.addLayer(newPoints)
}

修改完成后即可实现点击不同事件卡片，地图加载对应坐标点位的效果。

问题2：CSV文件读取处理方案 #

如果需要直接读取file.csv文件批量渲染所有点位，可以按以下步骤操作：

• 引入CSV解析工具（比如轻量的Papa Parse库），读取CSV文件转成JSON数组
• 遍历JSON数组提取每行的经纬度字段，批量生成OpenLayers的Feature对象
• 把生成的Feature批量传入矢量图层的数据源，即可实现全量点位的渲染，也可以按需求把CSV数据转成GeoJSON格式复用。

内容的提问来源于stack exchange，提问作者Ander Canales Medina