Vector tiles on top of raster tiles is not getting displayed in openLayers

问题

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,

回答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

来源：https://stackoverflow.com/questions/46455477/vector-tiles-on-top-of-raster-tiles-is-not-getting-displayed-in-openlayers

标签

OpenLayers

openlayers-3

vector-tiles