無法在 openlayers 中顯示我的功能。 有人知道如何解決這個問題嗎？

Question

幾個星期以來，我一直在為自己的預測而苦苦掙扎。 一開始我可以展示我的特征，但它們出現在jemen（它們應該在意大利）。 在我意識到我的坐標被反轉后，例如我的坐標 [41.18702782291,15.450187402143]（位於意大利）顯示在 [15.450187402143, 41.18702782291]（位於 jemen）中，我決定反轉我的多面體的坐標幾何，所以現在我有 [15.450187402143, 41.18702782291] 格式。 我不知道發生了什么，但現在我無法在地圖上看到我的特征。

我有一個帶有我的功能的對象 geojson，這是我的代碼：

var myview = new View({
  center: [15.450187402143, 41.18702782291],
  projection: 'EPSG:4326',
  zoom: 6
})

var mylayer = new TileLayer({
  source: new OSM()
})

var layer = [mylayer]

const map = new Map({
  target: 'map',
  layers: layer,
  view: myview
}); 

const vectorSource = new VectorSource({
  format: new ol.format.GeoJSON(),
  features: (new ol.format.GeoJSON()).readFeatures(geoJson, {dataProjection: 'EPSG:4326',
  featureProjection: map.getView().getProjection()})
  //EPSG:32633 - WGS 84 / UTM zone 33N
  //features: new GeoJSON().readFeatures(geoJson, {dataProjection: 'EPSG:4326', FeatureProjection: map.getView().getProjection()})
});

console.log(geoJson);
console.log(vectorSource.getFormat());
vectorSource.addFeatures((vectorSource.getFormat()).readFeatures(geoJson));
console.log("1");
const vectorLayer = new VectorLayer({
  source: vectorSource
});

map.addLayer(vectorLayer);

const numFeatures = vectorLayer.getSource().getFeatures().length;
console.log("Count right after construction: " + numFeatures);

最后幾行顯示這些特征在源代碼中並且正確獲取它們。

Answer 1

這對我來說很好。

const geoJson = {
    "type": "Feature",
    "properties": {
        "name": "Coors Field",
        "amenity": "Baseball Stadium",
        "popupContent": "This is where the Rockies play!"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [15.450187402143, 41.18702782291]
    }
};

let map;
$(document).ready(function() {

    // CREATE MAP
    map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM({
                    wrapX: false
                }),
                projection: 'EPSG:4326',
                visible: true
            })
        ],
        target: 'map',
        view: new ol.View({
            projection: 'EPSG:4326',
            center: [15.450187402143, 41.18702782291],
            zoom: 7,
        })
    });

    const vectorSource = new ol.source.Vector({
        format: new ol.format.GeoJSON(),
        features: (new ol.format.GeoJSON()).readFeatures(geoJson, {dataProjection: 'EPSG:4326',
        featureProjection: map.getView().getProjection()}),
        
        //EPSG:32633 - WGS 84 / UTM zone 33N
        //features: new GeoJSON().readFeatures(geoJson, {dataProjection: 'EPSG:4326', FeatureProjection: map.getView().getProjection()})
    });

    vectorSource.addFeatures((vectorSource.getFormat()).readFeatures(geoJson));
    const vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: new ol.style.Style({
            image: new ol.style.Circle({
                radius: 10,
                fill: new ol.style.Fill({color: 'red'})
            })
        })
    });

    map.addLayer(vectorLayer);
});