래스터 타일 위에있는 벡터 타일이 openLayers에 표시되지 않습니다.

Question

열린 레이어 맵 버전 4.3.3의 래스터 타일 위에 벡터 타일을 렌더링하려고합니다. 두 타일이 렌더링되고 있지만 벡터 타일이 래스터 타일 위에 표시되지 않습니다. 예를 들어, 하나의 상태에 대해 벡터 타일이 있고이를 래스터 타일 상단에 반투명 레이어로 표시하려고합니다. S3 버킷에 내 벡터 타일을 저장하고 S3 버킷에서 타일을 가져 오는 tileLoadFunction을 저장했습니다. 나는 어떤 투사도 설정하지 않았다. 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