如何使用 file.csv 到 Openlayers

Question

我有一个 file.csv 从数据库中插入一个文件夹。我想在我的地图中显示一个 Vector 但不知道如何访问该文件。（转换为 json，仅采用纬度或经度....）。我尝试从另一个函数获取坐标并在我的 loadEvent 中使用，但坐标永远不会改变。

这是我用来在日历中列出的函数（声明了 var latitude 和 var Longitude 以尝试在 loadEvent 中使用）

var Latitude;
var Longitude;  
function setListEvents(list,events){
    var n = events.length;
    var msg = "";
    for(i=0;i<n;i++){
        var Magnitude = events[i]['Magnitude'];
        var Id = events[i]['id'];
        var Folder = events[i]['Folder'];
        var Date = events[i]['Date'];
        var Time = events[i]['Time'];
        var Depth = events[i]['Depth'];
        var Latitude = events[i]['Latitude'];
        var Longitude = events[i]['Longitude'];
        //msg = msg+"<div>Magnitud: <font style='color:red;'>"+Magnitude+"</font></div>";
        msg = msg+"<div id='"+Id+"' data-folder='"+Folder+"' 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>";
    }
    //console.log(list);
    //console.log(msg);
    $( '#'+list ).html( msg );
    console.log(Latitude,Longitude);
}

这是我在 loadEvent 中的代码的一部分：

function loadEvent(e){
const circleStyle = new ol.style.Circle({
    fill: new ol.style.Fill({
    color:[245,49,5,10]
    }),
    radius:5,
})

const place = [Latitude,Longitude];
const point = new ol.geom.Point(place);

const newfeature = new ol.Feature({
    labelPoint: point,
    name: "prueba",
})
newfeature.setGeometryName('labelPoint');
var pointing = newfeature.getGeometry().getCoordinates();

console.log(pointing);

const newPoints = new ol.layer.Vector({
    source : new ol.source.Vector({
        features:[ new ol.Feature(pointing)]
/*    url: "assets/map.geojson",
    format: new ol.format.GeoJSON()  */
    }),
    visible:true,
    title: "New Points",
    style : new ol.style.Style({
        image: circleStyle
    })
})
map.addLayer(newPoints)
}

黄色警报来自另一个函数 CSV RESULTS

Answer 1

您将需要按经度、纬度顺序的点坐标，然后转换为视图投影

const newPoints = new ol.layer.Vector({
    source : new ol.source.Vector({
        features: [new ol.Feature(
          new ol.geom.Point(
            ol.proj.fromLonLat([Longitude, Latitude], map.getView().getProjection())
          }
        )]
    }),
    visible: true,
    title: "New Points",
    style : new ol.style.Style({
        image: circleStyle
    })
});
map.addLayer(newPoints);

如何使用 file.csv 到 Openlayers

How to use file.csv to Openlayers

javascript

html

maps

openlayers