2017-02-02 40 views
1

我們有以下使用矢量圖塊的最小示例。如何使用帶有自定義地圖投影的OL3矢量圖塊

如果我們將地圖投影更改爲http://epsg.io/3857以外的東西,我們還無法完成此項工作。有什麼辦法可以告訴VectorTile圖層或源代碼它可以在其他地圖投影上使用嗎?

我們經歷的是,當我們改變它時,它開始在錯誤的位置請求瓷磚 - 看起來像瓷磚網格正在使用新的地塊投影來請求瓷磚,而不是使用不同工具生成的佈局http://epsg.io/3857

<!DOCTYPE html> 
<html> 

<head> 
    <title>OSM Vector Tiles</title> 
    <link rel="stylesheet" href="http://openlayers.org/en/v3.16.0/css/ol.css" type="text/css"> 
    <script src="http://openlayers.org/en/v3.16.0/build/ol-debug.js"></script> 
    <style> 
     .map { 
      background: #f8f4f0; 
     } 
    </style> 
</head> 

<body> 
    <div id="map" class="map"></div> 
    <script> 
     var format = new ol.format.GeoJSON({ defaultDataProjection : new ol.proj.Projection({ 
      code: '', 
      units: ol.proj.Units.TILE_PIXELS 
     })}); 

     var tileGrid = ol.tilegrid.createXYZ({ 
      maxZoom: 22 
     }); 

     var map = new ol.Map({ 
      layers: [ 

       new ol.layer.Tile({ 
        source: new ol.source.OSM(), 
        zIndex: 1 
       }), 

       new ol.layer.VectorTile({ 
        source: new ol.source.VectorTile({ 
         format: format, 
         tileGrid: tileGrid, 
         tilePixelRatio: 16, 
         url: ... 
        }), 
        renderMode: 'vector', 
        style: [ 
         new ol.style.Style({ 
      fill: new ol.style.Fill({ 
      color: 'rgba(255, 255, 255, 0.2)' 
      }), 
      stroke: new ol.style.Stroke({ 
      color: '#33ccff', 
      width: 2 
      }), 
      image: new ol.style.Circle({ 
      radius: 2, 
      fill: new ol.style.Fill({ 
       color: 'red' 
      }) 
      }) 
     }) 
     ] 
       }) 



      ], 
      target: 'map', 
      view: new ol.View({ 
       //center: ol.proj.fromLonLat([9.1645879, 55.7383757]), // Billund 
       center: ol.proj.fromLonLat([12.1272493, 55.590296]), // Roskilde 

       maxZoom: 22, 
       zoom: 12 
      }) 
     }); 
    </script> 
</body> 

</html> 

回答

0

目前不可能在與創建瓷磚的投影不同的投影中呈現矢量瓷磚圖層。