使用 RGF93 / Lambert-93 渲染瓦片矢量源的问题 -- 法国坐标系

Question

jsFiddle 在这里给出：here

我是 Open Layers 6 的新手，我正在尝试根据 Open Layers workshop.

中给出的示例或多或少地在地图上显示矢量切片数据

上面示例代码中提供的矢量切片源的 URL 无法正常工作，因此我使用 this page. There I read that the source is defined using using the RGF93 / Lambert-93 (EPSG:2154) coordinate system and then, using Google, I found that coordinate system's definition and bounds on this page.

中描述的矢量切片源

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

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

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

下面给出了代码（另见上面的link to 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 将它们设置在投影上并给出我也在使用 ol.extent.getCenter 获取中心？
为什么数据只在缩放级别 2 出现，而在缩放级别 1 或 3 时完全消失？
我应该怎么做才能使法国地图很好地居中并在地图中间放大？

Answer 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 包含 link

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

这又定义了瓷砖网格。如果您想避免对 tilegrid 选项进行硬编码的黑魔法，您可以获取 TileJSON url 并使用类似于 https://github.com/OrdnanceSurvey/OS-Data-Hub-API-Demos/blob/master/OSVectorTileAPI/OpenLayers/map.js#L52-L71

的代码从内容构建一个 tilegrid 和矢量切片源

使用 RGF93 / Lambert-93 渲染瓦片矢量源的问题 -- 法国坐标系

problem with rendering tile vector source using the RGF93 / Lambert-93 -- France coordinate system

openlayers

openlayers-6