javascript - 通过 openlayers 渲染 opensensemap IDW 功能

Question

我正在尝试使用 openlayers 在 map 上渲染一些额外的功能。这些功能可以从 opensensemap API 获取，但由于某种原因它们没有呈现。由于我对 openlayers 完全陌生，而且对 javascript 也不太了解，所以我希望得到一些帮助。

实时代码:https://ttnkn.github.io/map/pax/

var GeoStyle = {
    'Point': new ol.style.Style({
        image: new ol.style.Icon({
            src: '../img/bike.png',
            scale: 0.075,
        })
    }),
    'Circle': new ol.style.Circle({
        fill: new ol.style.Fill({
            color: 'rgba(255,255,255,0.4)'
        }),
        stroke: ol.style.Stroke({
            color: '#3399CC',
            width: 1.25
        }),
        radius: 5
    })
};

function GeoStyleFunc (feature,resolution) {
    return GeoStyle[feature.getGeometry().getType()];
}

var VectorSource =  new ol.source.Vector({
    format: new ol.format.GeoJSON(),
    url: 'https://api.opensensemap.org/boxes?bbox=9.118815,47.653129,9.228427,47.698786&format=geojson&exposure=mobile',
});

var VectorTile = new ol.source.XYZ({
    url: 'http://tile.memomaps.de/tilegen/{z}/{x}/{y}.png ',
    attributions: 'Map &#169; <a href="https://www.openstreetmap.org">OSM</a> | Tiles &#169; <a href="memomaps.de">MeMoMaps</a> | Data &#169; <a href="https://opensensemap.org/">OpenSenseMap</a>'
});

var map = new ol.Map({
    target: document.getElementById('map'),
    layers: [
        new ol.layer.Tile({
            source: VectorTile
        }),
        new ol.layer.Vector({
            source: VectorSource,
            style: GeoStyleFunc
        })
    ],
    controls: ol.control.defaults({ zoom: true, attribution: true }),
    view: new ol.View({
        center: ol.proj.fromLonLat([9.173, 47.672]),
        zoom: 15,
        maxZoom: 17,
        minZoom: 13
    })
});

var url = 'https://api.opensensemap.org/statistics/idw?bbox=9.118815,47.653129,9.228427,47.698786&phenomenon=Temperatur&gridType=hex&cellWidth=2';
fetch(url).then(value => {
    value.json().then(value => {
        var featureJson = value.data.featureCollection;
        var features = (new ol.format.GeoJSON()).readFeatures(featureJson);

        var vectorSourceHEX = new ol.source.Vector({
            features: features,
            projection: ol.proj.get('EPSG:4326')
        });

        var vectorLayer = new ol.layer.Vector({
            source: vectorSourceHEX,
//            style: GeoStyleFunc
        });

        map.addLayer(vectorLayer);
    });
}, error => { console.log(error) });

Answer 1

矢量源中不使用投影选项。如果您使用 readFeatures，则必须将数据转换为 View 投影(当您使用自动完成的 url 构造源时)。

    var features = (new ol.format.GeoJSON()).readFeatures(featureJson, {
        dataProjection: 'EPSG:4326',
        featureProjection: map.getView().getProjection()
    });

    var vectorSource = new ol.source.Vector({
        features: features,
    });