使用 RGF93 / Lambert-93 渲染平铺矢量源的问题——法国坐标系答案

【问题标题】：problem with rendering tile vector source using the RGF93 / Lambert-93 -- France coordinate system使用 RGF93 / Lambert-93 渲染平铺矢量源的问题——法国坐标系
【发布时间】：2020-12-21 16:26:00
【问题描述】：

jsFiddle 在这里给出：here

我是 Open Layers 6 的新手，我正在尝试在地图上显示矢量切片数据，或多或少基于 Open Layers workshop 中给出的示例。

上述示例代码中提供的矢量切片源的 URL 不起作用，因此我使用this page 中描述的矢量切片源。在那里我读到源是使用 RGF93 / Lambert-93 (EPSG:2154) 坐标系定义的，然后使用谷歌，我发现坐标系的定义和边界on this page。

在下面的代码中，我使用了投影的定义和最后一个链接的投影边界。

即使数据确实出现在地图上，它们也只出现在屏幕的最左侧，并且仅在缩放级别 2 时出现，如下所示：

如果我更改缩放级别，屏幕上不会显示任何内容。

代码如下（另见上面 JsFiddle 的链接）：

/*
 * Provenance:
 * 
 *     https://cloud.maptiler.com/tiles/v3-2154/
 *     https://epsg.io/2154
 *
 */
const EPSG_2154 = 'EPSG:2154';

proj4.defs(EPSG_2154
           , "+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");
ol.proj.proj4.register(proj4);





const proj = ol.proj.get(EPSG_2154);
proj.setExtent([-378305.81, 6093283.21, 1212610.74, 7186901.68]);
const extent = proj.getExtent();

console.log('extent is: ', extent);




const key = '7A1r9pfPUNpumR1hzV0k';
const layer = new ol.layer.VectorTile({
    source: new ol.source.VectorTile({
        attributions: [
            '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'
        ],
        /*
         *    It is important that the Vector Tile Source projection be explicitly declared and
         *    be the same as the view projection, otherwise you get:
         *
         *        https://github.com/openlayers/openlayers/issues/11429
         *
         */
        projection: EPSG_2154,
        format: new ol.format.MVT(),
        url: `https://api.maptiler.com/tiles/v3-2154/{z}/{x}/{y}.pbf?key=${key}`,
        maxZoom: 14
    })
});

const center = ol.extent.getCenter(extent);
console.log('center is: ', center);
const map = new ol.Map({
    target: 'map-container',
    view: new ol.View({
        projection: EPSG_2154,
        center,
        zoom: 2
    })
});

map.addLayer(layer);

我的问题是：

考虑到我使用here 定义的确切“投影边界”并使用setExtent 将它们设置在投影上，并且考虑到我也在使用@ 987654332@获取中心？
为什么数据只在缩放级别 2 时出现，而在缩放级别 1 或 3 时完全消失？
我应该怎么做才能使法国地图在地图中间很好地居中并放大？

【问题讨论】：

查看这个例子cloud.maptiler.com/maps/basic-2154/openlayers 你需要指定tilegrid，因为它不使用默认的EPSG:3857 grid..
更新了 jsFiddle jsfiddle.net/1jye9uto
@Mike 这很棒，但它也是黑魔法。从哪里得知这一切？我什至不知道“tilegrid”的概念存在，更不用说如何指定，语义是什么以及它如何与其他参数相互作用。

标签： openlayers openlayers-6

【解决方案1】：

正如一些 MapTiler 示例使用 TileJSON（请参阅 https://github.com/mapbox/tilejson-spec/tree/master/2.2.0）用于栅格切片一样，也有用于矢量切片的 TileJSON，例如样式 https://api.maptiler.com/maps/basic-2154/style.json?key=7A1r9pfPUNpumR1hzV0k 包含链接

"sources":{"openmaptiles":{"url":"https://api.maptiler.com/tiles/v3-2154/tiles.json?key=7A1r9pfPUNpumR1hzV0k","type":"vector"}}

这反过来又定义了 tilegrid。如果您想避免硬编码 tilegrid 选项的黑魔法，您可以获取 TileJSON url 并从内容中构造一个 tilegrid 和矢量 tile 源，代码类似于 https://github.com/OrdnanceSurvey/OS-Data-Hub-API-Demos/blob/master/OSVectorTileAPI/OpenLayers/map.js#L52-L71

【讨论】：