Map.forEachLayerAtPixel回调函数具有空的RGBA数组 [英] Map.forEachLayerAtPixel callback function has an empty rgba array

问题描述

使用其中一个示例(https://openlayers.org/en/latest/examples/getfeatureinfo-image.html)上的一些代码，每当我将鼠标悬停在特定层的非透明部分时，我都会尝试更改指针表示形式。

map.on('pointermove', function(evt) {
    if (evt.dragging) {
        return;
    }
    var pixel = map.getEventPixel(evt.originalEvent);
    var hit = map.forEachLayerAtPixel(pixel, function(layer, rgba) {
        return rgba[3] == 0;
    }, {
        'layerFilter': function(layer) {return layer == aisLayer;}
    });
    map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});

遗憾的是，Map.forEachLayerAtPixel的回调函数中的RGBA变量为空。 根据文档(https://openlayers.org/en/latest/apidoc/module-ol_Map-Map.html#forEachLayerAtPixel)，第二个参数应该是保存RGBA值的数组，如果层不支持，则为NULL。

对我来说，它不是空的，但它没有RGBA值。它只是一个空的Uint8数组。

关于信息，以下是我正在使用的层，由Geoserver实例生成：

var aisLayer = new TileLayer({
    source: new TileWMS({
        // url: 'http://192.168.8.157:8600/geoserver/gwc/service/wms',
        url: 'http://192.168.8.157:8600/geoserver/ais/wms',
        params: {
            'LAYERS': 'ais:shipinfosview',
            'VERSION': '2.0.0',
            'SRS': 'EPSG:900913',
            'CQL_FILTER': 'time>2020-05-17T18:10:00'
        },
        serverType: 'geoserver',
        projection: 'EPSG:900913',
    })
});

知道这里出了什么问题吗？

谢谢！

推荐答案

正如Mike指出的，必须指定cross Origin才能允许像素操作。 这实际上是在文档中提到的。

但是，仅为我正在使用的层更改这一点是不够的。

因为我使用的是多个层，所以OpenLayers似乎会将这些层合并成一个层。 其中一个层没有crossOrigin参数，我仍然得到一个空数组。

为了避免这种情况并解决我的问题，OpenLayer有必要不将所有层合并到一个画布中。 我胡乱猜测，并将aisLayer的className参数更改为非默认参数。实际上，创建了一个没有默认名称的新画布。

如果您有这样的行为，我将很高兴得到一些关于这种行为的方式和原因的澄清。

下面是一个可行的解决方案：

let aisLayer = new TileLayer({
    className: 'ais-layer',
    source: new TileWMS({
        // url: 'http://192.168.8.157:8600/geoserver/gwc/service/wms',
        url: 'http://192.168.8.157:8600/geoserver/ais/wms',
        params: {
            'LAYERS': 'ais:shipinfosview',
            'VERSION': '2.0.0',
            'SRS': 'EPSG:900913',
            'CQL_FILTER': 'time>2020-05-17T18:10:00'
        },
        serverType: 'geoserver',
        projection: 'EPSG:900913',
        crossOrigin: 'anonymous',
    })
});

const source = new VectorSource({
    format: new GeoJSON(),
    url: './data/countries.json',
});
const layer = new VectorLayer({
    source: source,
});

const map = new Map({
    target: 'map-container',
    layers: [
        new TileLayer({
            source: new XYZSource({
                url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
            })
        }),
        layer,
        aisLayer,
    ],
    view: new View({
        center: fromLonLat([0, 0]),
        zoom: 2
    })
});


map.on('pointermove', function(evt) {
    if (evt.dragging) {
        return;
    }
    let pixel = map.getEventPixel(evt.originalEvent);
    let hit = map.forEachLayerAtPixel(pixel, function(layer, rgba) {
        return rgba[4] != 0;
    }, {
        'layerFilter': function(layer) {
            return layer.ol_uid == aisLayer.ol_uid;
        }
    });
    map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});

这篇关于Map.forEachLayerAtPixel回调函数具有空的RGBA数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！