Блог

Главная - Вопросы по программированию - Как использовать файл.csv для открытия слоев

Как использовать файл.csv для открытия слоев

#javascript #html #maps #openlayers

Вопрос:

У меня есть файл.csv в папке из базы данных. Я хочу показать вектор внутри моей карты, но не знаю, как добраться до этого файла. (преобразуется в json, принимая только широту или долготу….). Я попытался взять координаты из другой функции и использовать их в своем событии загрузки, но координаты никогда не меняются.

Это функция, которую я использую для перечисления в календаре, который у меня есть (объявлены var широта и var долгота, чтобы попробовать использовать в 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

Ответ №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);

Комментарии:

1. Как я могу динамически определять долготу и широту при нажатии на событие?. он показывает ту же координату. Я попытался объявить широту var; Долготу var; перед событием загрузки и функцией внутри события загрузки, подобной этой var Longitude; var Latitude; function loadEvent(e){ function getNewLonLat(evt){ var n=evt.length; for(i=0;i<n;i ){ Longitude = evt[i]["Longitude"]; Latitude = evt[i]["Latitude"] } } getNewLonLat(); .....

Метки: