如何将 OL3 矢量切片与自定义地图投影一起使用答案

【问题标题】：how to use OL3 vector tiles with a custom map projection如何将 OL3 矢量切片与自定义地图投影一起使用
【发布时间】：2017-02-02 09:26:53
【问题描述】：

我们有以下使用矢量图块的最小示例。

如果我们将地图投影更改为 http://epsg.io/3857 以外的其他内容，我们将无法完成这项工作。有没有办法告诉 VectorTile 图层或源它应该在其他地图投影上工作？

我们的经验是，当我们更改它时，它开始在错误的位置请求图块 - 看起来 tilegrid 正在使用新的 mapprojection 来请求图块，而不是不同工具生成的 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>

【问题讨论】：

标签： openlayers-3

【解决方案1】：

目前无法在与创建切片的投影不同的投影中渲染矢量切片图层。

【讨论】：