Openlayers Geojson axios API 獲取數據

Question

我想從本地主機上的 API 獲取數據（geojson 格式），並根據讀取的數據，在 map 上顯示標記。

GeoJson 格式：

{
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        53.531697,
                        23.545435
                    ]
                },
                "properties": {
                    "Shop_Id": 328,
                    "Shop_Name": "A01_0386,4_TF_0",
                    "Shop_Radius": 0.1512987687
                }
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        29.54306,
                        31.531401
                    ]
                },
                "properties": {
                    "Shop_Id": 532,
                    "Shop_Name": "A01_0397,0_TF_0",
                    "Shop_Radius": 0.1773436375047
                }
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        28.34949,
                        30.10745
                    ]
                },
                "properties": {
                    "Shop_Id": 160,
                    "Shop_Name": "A01_0003,9_TF_0",
                    "Shop_Radius": 0.1922466020678
                }
            }
]
}

當我從 geojson 文件中讀取它時，它會在 map 上正確顯示，但是如果我想從 API: http://localhost:8080/get_shop 獲取數據，那么這些標記可以到達。

我的邏輯：

var styles = {
    'Point': new Style({
        stroke: new Stroke({
            color: 'rgba(17,158,76,0.8)',//#F3C35D
            width: 15,
        })
    })

}

var styleFunction = function(feature) {
    return styles[feature.getGeometry().getType()];
};

var vectorSource = new VectorSource({
    format: new GeoJSON(),
    loader: vectorLoader(),
    projection:"EPSG:4326",

})

function vectorLoader(){
    axios.get('http://localhost:8080/get_shops'
        ,{
            "dataType": 'json',
            headers: {
                "Content-Type":"application/json",
                "Access-Control-Allow-Origin": "*",
                'Access-Control-Allow-Headers': 'Origin,X-Requested-With,Content-Type,Accept',
                'Access-Control-Allow-Credentials': true,
                "crossorigin":true
            }
        }
    )
        .then(res => {
            console.log("1: " + JSON.stringify(res.data));
            console.log("1: " + JSON.stringify(res.data[0]));
            var geoJsonFormat = new GeoJSON();
            var features = geoJsonFormat.readFeatures(JSON.stringify(res.data));
            vectorSource.addFeatures(features)
            // return JSON.stringify(res.data[0]);

        })
        .catch(err => console.warn(err))
}


var vectorLayer = new VectorLayer({
    source: vectorSource,
    style: styleFunction
});


const map = new Map({
    target: 'map',
    layers: [
        new TileLayer({
            source: new OSM()
        }),vectorLayer],
        view: new View({
    center: fromLonLat([12,44]) ,
    zoom: 3,
})
});

和錯誤：

Error: Unsupported GeoJSON type: undefined
    readGeometry GeoJSON.js:295
    readFeatureFromObject GeoJSON.js:110
    readFeaturesFromObject GeoJSON.js:144
    readFeatures JSONFeature.js:52
    vectorLoader Mapper.js:110

我想使用 Axios 而不是 jQuery 因為我收到了 $ is no defined 的錯誤。

有什么建議嗎？

Answer 1

這是來自 console.log(JSON.stringify(res.data[0])) 的我的 output：

{
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        53.531697,
                        23.545435
                    ]
                },
                "properties": {
                    "Shop_Id": 328,
                    "Shop_Name": "A01_0386,4_TF_0",
                    "Shop_Radius": 0.1512987687
                }
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        29.54306,
                        31.531401
                    ]
                },
                "properties": {
                    "Shop_Id": 532,
                    "Shop_Name": "A01_0397,0_TF_0",
                    "Shop_Radius": 0.1773436375047
                }
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        28.34949,
                        30.10745
                    ]
                },
                "properties": {
                    "Shop_Id": 160,
                    "Shop_Name": "A01_0003,9_TF_0",
                    "Shop_Radius": 0.1922466020678
                }
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        18.34949,
                        26.10745
                    ]
                },
                "properties": {
                    "Shop_Id": 1340,
                    "Shop_Name": "F01_0032,9_TF_0",
                    "Shop_Radius": 0.1922443220678
                }
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        72.339,
                        20.1545
                    ]
                },
                "properties": {
                    "Shop_Id": 210,
                    "Shop_Name": "G32_0003,9_TF_0",
                    "Shop_Radius": 0.1925346020678
                }
            }
]
}