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

问题描述

我正在尝试在开放图层地图版本4.3.3中的栅格图块上渲染矢量图块.这两个图块都在渲染，但矢量图块没有显示在栅格图块上.例如，我有一个状态的矢量图块，并希望将其显示为栅格图块顶部的半透明层.我已将我的矢量图块存储在S3存储桶中，并且tileLoadFunction从S3存储桶中获取了这些内容.我没有设定任何投影.我认为tileLoadFunction具有一些默认的投影.

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?

谢谢

推荐答案

以下是一个示例项目，我已经完成了自定义矢量层和栅格层的定制.认为这将帮助您解决问题.

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

这篇关于栅格图块顶部的矢量图块未在openLayers中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！