如何使用OL3矢量切片与自定义地图投影

Question

We have the following minimal example of using vector tiles. 我们有以下使用矢量切片的最小示例。

We have not been able to make this work if we change the map projection to something other than http://epsg.io/3857 . 如果我们将地图投影更改为http://epsg.io/3857以外的其他内容，我们就无法完成这项工作。 Is there any way to tell the VectorTile layer or source that it should work on other map projections? 有没有办法告诉VectorTile图层或源它应该在其他地图投影上工作？

What we experience is that when we change it, it starting to request tiles in the wrong location -looks like the tilegrid is using the new mapprojection to requests tiles instead of the http://epsg.io/3857 layout that different tools produces. 我们经历的是，当我们更改它时，它开始在错误的位置请求切片 - 看起来像是使用新的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>

Answer 1

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

如何使用OL3矢量切片与自定义地图投影

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-02-03 10:20:41

如何使用OL3矢量切片与自定义地图投影

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-02-03 10:20:41

解决方案1
0 已采纳 2017-02-03 10:20:41