如何使用Raster源类型?

时间:2016-09-16 16:09:04

标签: javascript html openlayers-3

TL; DR:如何在OL3中使用光栅源?如何使用它显示任何内容? 一个简单的工作示例将是完美的。

============================================== < / p>

我尝试使用ol.source.Raster来显示高程数据。

我首先尝试做的是使整个地图具有如下颜色:

var bing = new ol.source.BingMaps({key: '%key%', imagerySet: 'Aerial'});
var raster = new ol.source.Raster({
    sources: [bing],
    operation: function(pixels, data) {
        return (0, 255, 0, 128);
    },
});
map = new ol.Map({
    layers: [
        new ol.layer.Tile({source: bing}),
        new ol.layer.Image({source: raster})
    ],
    target: 'ol-map',
    view: new ol.View({
        center: ol.proj.transform([-1, 52], 'EPSG:4326', 'EPSG:3857'),
        zoom: 6
    })
});

我预计整个地图都是绿色的。

然而,这没有任何作用。如同,它显示了bing层,但不显示栅格图层。或者,由于此代码,栅格图层并不包含任何内容,我不知道。

我已尝试在ol3网站上查看the examples,但他们没有帮助。事实上,点击它们上面的编辑按钮并被带到JSFiddle后,它们似乎无法呈现任何内容。也许这是JSFiddle的一个问题。所以我已经复制了所谓的源代码,并尝试在.html文件中运行它。加载了ol3地图对象,但没有别的,有趣的是。

在上下文中,我将使用ol3中的Geolocation API来计算切片的高程颜色并在栅格图层中渲染它们。

1 个答案:

答案 0 :(得分:2)

函数operation中的值返回必须是数组(您可以参考链接http://openlayers.org/en/latest/apidoc/ol.html#.RasterOperation)。您可以更改栅格

var raster = new ol.source.Raster({
sources: [bing],
operation: function(pixels, data) {
    return [0, 255, 0, 128];
},
});