如何在 openlayer 6 中添加 tms 层？

Posted 2023-03-25

【中文标题】如何在 openlayer 6 中添加 tms 层？

【英文标题】：How to add tms layer in openlayer 6?

【发布时间】：2020-08-17 09:58:13

【问题描述】：

我使用 OpenLayer2、Mapproxy、Mapnik 和 tilecache 来生成地图。我在 openlayer2 中添加了 TMS 层。 现在我想升级我的openlayer，为此我选择了最新版本的ol6。 如何在ol6中添加TMS层。

我的openlayer 2 js是这样的

var layer = new OpenLayers.Layer.TMS('District', 'http://127.0.0.1:8080/tms/', layername: 'district/distgrid', type: 'png', isBaseLayer:true,transitionEffect:"resize" );
map.addLayer(layer);

【参考方案1】：

在 OpenLayers 中，TMS 层是 tile layers，使用 XYZ source：

import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';

const layer = new TileLayer(
  source: new XYZ(
    url: 'https://a-c.tile.openstreetmap.org/z/x/y.png'
  )
);

但是，我不确定您提供的属性（请查看文档）。另请阅读this answer。

【讨论】：

我无法导入 TileLayer 或任何东西，出现错误。 'ol/layer' 是文件夹路径还是语法？当我使用 new ol.layer.Tile 时没有错误。我可以用吗？

看看 node_modules/ol/layer/Tile.js。这应该是导入路径（减去扩展名）。

哦，我的错。你使用 javascript 还是 TypeScript？如果是第一个，那么new ol.layer.Tile 应该没问题。

非常感谢..它起作用了..我有一个疑问，我给了像 127.0.0.1:8080/tms/1.0.0/district/distgrid" + "/z/x/-y.png 这样的磁贴 url。可以在 url 中给出 1.0.0 吗？无论如何它现在工作

您的网址完全没问题。很高兴我能帮忙:)