javascript - 如何将特定国家/地区的 map 加载到 OpenStreetMap 中？

Question

我想加载特定国家/地区的 map (例如 https://openstreetmap.in )。我正在使用以下代码片段，但它从 https://www.openstreetmap.org 加载 map :

layers: [
    new ol.layer.Tile({
        source: new ol.source.OSM()
    })
]

有人可以告诉我如何加载特定于国家/地区的 map 吗？

Answer 1

您需要创建一个自定义图 block 图层，即所谓的 OSM 图层或 XYZ 图层。 OpenLayer 示例 Localized OpenStreetMap和 XYZ解释如何指定自定义图 block 源。

openstreetmap.in 的图 block 服务器 URL 为 https://{a-c}.tiles.mapbox.com/v4/openstreetmap.1b68f018/{z}/{x}/{y}@2x.png ?access_token=pk.eyJ1IjoiamluYWxmb2ZsaWEiLCJhIjoiY2psejFtZG8wMWhnMjNwcGFqdTNjaGF2MCJ9.ZQVAZAw8Xtg4H2YSuG4PlA。

您的代码应大致如下所示:

var osmIndia = new TileLayer({
  source: new OSM({
    attributions: [
      '© <a href="https://www.mapbox.com/">mapbox</a> and <a href="https://www.openstreetmap.org/">OpenStreetMap</a>'
    ],
    url: 'https://{a-c}.tiles.mapbox.com/v4/openstreetmap.1b68f018/{z}/{x}/{y}@2x.png?access_token=pk.eyJ1IjoiamluYWxmb2ZsaWEiLCJhIjoiY2psejFtZG8wMWhnMjNwcGFqdTNjaGF2MCJ9.ZQVAZAw8Xtg4H2YSuG4PlA'
  })
});

[...]

layers: [
    osmIndia
]