Leaflet——L.tileLayer

官方示例

var imageUrl = 'https://maps.lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
    imageBounds = [[40.712216, -74.22655], [40.773941, -74.12544]];
L.imageOverlay(imageUrl, imageBounds).addTo(map);

代码示例

const topLeftLon = mercator2Lon(this.Data.minX),
      rightBottomLon = mercator2Lon(this.Data.maxX),
      topLeftLat = mercator2Lat(this.Data.maxY),
      rightBottomLat = mercator2Lat(this.Data.minY);
const bounds = L.latLngBounds(
      L.latLng(topLeftLat, topLeftLon),
      L.latLng(rightBottomLat, rightBottomLon)
      );
 this.rgbImageTilelayer = L.tileLayer(
      this.tileUrl + "/{z}/{x}/{y}.png",
      {
    
     pane: "ypane1", tms: true, bounds: bounds }
 ).addTo(this.$store.state.map);

注: pane: “ypane1”,设置层级

this.map.createPane('ypane1')
this.map.getPane('ypane1').style.zIndex = 399
   tms: true

如果是 TMS 方式,则必须开启,必须设置tms:true的原因是:若为tms切片,则会进行y翻转,使得瓦片编号时是以左下角为原点,因而y的编号会不同于以左上角为原点的切片编号。

猜你喜欢

转载自blog.csdn.net/YG_zhh/article/details/126933013
l