CODEWITHSUNDEEP
openlayersopenlayers-3vector-tiles
bhushan patil
bhushan patil

Reputation: 113

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,

Upvotes: 1

Views: 1243

Answers (1)

Nisal Edu
Nisal Edu

Reputation: 7591

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

Upvotes: 0

Related Questions