柵格圖塊頂部的矢量圖塊未在openLayers中顯示

Question

我正在嘗試在開放圖層地圖版本4.3.3中的柵格圖塊上渲染矢量圖塊。 這兩個圖塊都在渲染，但矢量圖塊沒有顯示在柵格圖塊上。例如，我有一種狀態的矢量圖塊，希望將此顯示為柵格圖塊頂部的半透明層。 我已將我的矢量圖塊存儲在S3存儲桶中，並且tileLoadFunction從S3存儲桶中獲取了這些矢量圖塊。 我沒有設定任何投影。 我認為tileLoadFunction具有一些默認投影。

以下是我的代碼，用於顯示兩個磁貼：

var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            name: 'Tile',
            type: 'GeoJSON',
            source: new ol.source.XYZ({
                url: 'https://api.tiles.mapbox.com/v4/mapbox.emerald/{z}/{x}/{y}.png?access_token=' + MAPBOX_KEY
            })
        }),

        new ol.layer.VectorTile({
            name: 'VectorTile',
            type: 'MVT',
            source: new ol.source.VectorTile({
                format: new ol.format.MVT(),
                renderMode: 'vector',
                tileGrid: ol.tilegrid.createXYZ({ maxZoom: 14 }),
                url: 'data',
                tileLoadFunction: tileLoadFunction                    
            }),                 
            style: new ol.style.Style({
                fill: new ol.style.Fill({
                    color: 'rgba(0, 0, 0, 0.5)'
                }),
                stroke: new ol.style.Stroke({
                    color: 'white',
                    width: 3
                })
            })
        })
    ],
    target: 'map',
    view: new ol.View({
        center: [-7400327.330457623, 2062576.7712471967],
        maxZoom: 20,
        minzoom: 2,
        zoom: 8       
    })
});

 function tileLoadFunction(tile, url) {
   getSignedUrl(url, function(s3Url) {
   var loader = ol.featureloader.loadFeaturesXhr(s3Url, tile.getFormat(), 
                          tile.onLoad.bind(tile),                                                 
                          tile.onError.bind(tile));
        tile.setLoader(loader);
    }

任何人都可以指導，這里缺少哪些內容才能正確地將矢量圖塊顯示為柵格圖塊上的半透明層？

謝謝，

Answer 1

以下是我已完成的示例項目，可以根據需要自定義矢量層和柵格層。 認為這將幫助您解決問題。

https://github.com/NisalSP9/openlayers