Map.forEachLayerAtPixel回调函数有一个空的rgba数组

Question

使用在一个示例（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。

嗯，对我来说，它不是null，但是没有rgba值。它只是一个空的Uint8array。

有关信息，这是我正在使用的层，由地理服务器实例生成：

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',
    })
});

你知道这是怎么了吗？

谢谢！

Answer 1

正如Mike所指出的，必须指定crossOrigin以允许像素操纵。实际上是在文档中提到的。

但是，仅更改我正在使用的图层是不够的。

由于我正在使用多个图层，因此Openlayers似乎将这些图层合并为一个图层。其中一层没有crossOrigin参数，我仍然得到一个空数组。

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

如果您有此行为，我将很高兴对这种行为的方式和原因做出一些澄清。

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

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' : '';
});