Question

我们有以下使用矢量切片的最小示例。

如果我们将地图投影更改为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>

Answer 1

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

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

1 个答案: