栅格图块顶部的矢量图块未在openLayers中显示

Question

I am trying to render vector tiles on top of raster tiles in open layers map version 4.3.3. Both the tiles are getting render but vector tiles is not getting displayed over raster tiles.For example, I have vector tiles for one of the state and want this to display as semi transparent layer on top of raster tiles. I have store my vector tiles on S3 bucket and tileLoadFunction fetching those from S3 bucket. I haven't set any projection. I think tileLoadFunction has some default projection.

Following is my code to display both the tiles:

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

Can anybody guide, what is missing here to display vector tiles properly as semi-transparent layer over raster tiles?

Thanks,

Answer 1

Following is a sample project I have done to customize both vector and raster layers as you wish. Think this will help you to fix your issue.

https://github.com/NisalSP9/openlayers