时间戳

首页 > 解决方案 > 如何将我的自定义地图图块的返回 url 传递给 react-leaflet？

react-leaflet - 如何将我的自定义地图图块的返回 url 传递给 react-leaflet？

问题描述

// 传单：

L.TileLayer.Custom = L.TileLayer.extend({
  attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
  getTileUrl({x, y, z}) {
    if (y < 0) {
      y = 0;
    }
    const _x = 'C' + padStart(correctEdges(z, x).toString(16), 8, '0');
    const _y = 'R' + padStart(y.toString(16), 8, '0');
    const _z = 'L' + padStart(z.toString(10), 2, '0');
    return `${url()}${this.options.path}/${_z}/${_y}/${_x}.${this.options.imgType}`;
  }
});

我正在传单中生成一个磁贴 url。如何将返回的自定义地图图块的 url 传递给 react-leaflet TileLayer 元素？我不会使用http://{s}.tile.osm.org/{z}/{x}/{y}.png.

相反，字符串是动态更新的

${url()}${this.options.path}/${_z}/${_y}/${_x}.${this.options.imgType}

url = <string>

// 反应传单：

<TileLayer
  attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
  url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"
/>

标签： react-leaflet

解决方案

只需保存urlin 状态和何时

<TileLayer
  ..
  url={this.state.url}
/>

这是你要求的吗？

推荐阅读