开发者社区> 问答> 正文

通过openlayers渲染opensensemap IDW功能

我正在尝试使用openlayers在地图上渲染一些额外的功能。可以从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 © <a href="https://www.openstreetmap.org">OSM</a> | Tiles © <a href="memomaps.de">MeMoMaps</a> | Data © <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) });

展开
收起
几许相思几点泪 2019-12-22 18:43:41 1051 0
0 条回答
写回答
取消 提交回答
问答分类:
API
问答地址:
问答排行榜
最热
最新

相关电子书

更多
WebGL 在前端可视化中的实践 立即下载
函数计算最佳实践:快速开发一个分布式 Puppeteer 网页截图服务 立即下载
360°全景视频播放器的实现原理 立即下载