YY. TileLayer

瓦片图层对象，平时我们看到的地图，比如影像，矢量等，他们都是瓦片图层，一般有多个小的图片（256x256)按照一定的规律组成的集合，俗称栅格切片

creation

• constructor(url, options, crs)
  • options
    • {Number} minZoom：瓦片图层最小层级
    • {Number} maxZoom：瓦片图层的最大层级
    • {Number} maxAvailableZoom：瓦片最大可见层级
    • {Array[Number]} tileSize：瓦片大小[256,256]
    • {Array[Array]||YY.Envelope} maxBounds：瓦片图层的最大可视化范围，边界
    • {String} preview：该瓦片图层的 icon url。
  • crs 空间投影信息

example

//一般我们不用这种方式来new TileLayer,用YY.LayerLookup 这个类 的静态方法来  代理  YY.TileLayer的实例化
const options = {
    minZoom: 4,
    maxZoom: 18,
    maxBounds: [
        [-180, -90],
        [180, 90]
    ]
    preview: '../assets/image/preview.png'
}

// {projection:'EPSG:3857'} 表示投影为墨卡托
const tilelayer = new YY.TileLayer('http://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', options, {
    projection: 'EPSG:3857'
});
map.addBaseLayer(tileLayer);

////////////////////////////////////////////////////////////////////

//演示加载自定义的瓦片图层，这里以天地图为例子，项目中一般都是用这种方式

var origin = [-180, 90]; //天地图的切图原点
var res = function() { //切图参数
    var ss = [];
    for (var i = 0; i <= 18; i++) {
        ss.push(1.40625 / Math.pow(2, i));
    }
    return ss;
}();

var crs = { //构造空间投影信息
    origin: origin,
    resolutions: res,
    code: 'ESPG:4326' //84坐标系，经纬度投影

}

let options1 = {
    minZoom: 1,
    maxZoom: 18,
    maxBounds: [
        [-180, -90],
        [180, 90]
    ]
    preview: '../assets/image/preview.png'
}

//利用YY.LayerLookup.createTileLayer 加载天地图，
var tileLayer1 = YY.LayerLookup.createTileLayer('http://t0.tianditu.com/img_c/wmts?SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&FORMAT=tiles&TILEMATRIXSET=c&STYLE=default&LAYER=img&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}', options1, crs);

map.addBaseLayer(tileLayer1);
/////////////////////////////////////////////////////////
//当然我们可以快速的获取天地图

//这里我们创建了一个天地图的栅格瓦片图层
var tdtTileLayer = YY.LayerLookup.lookup('tdt');

//这里我们创建了一个天地图的栅格瓦片图层
var tdtTileLayer1 = YY.LayerLookup.lookup('tdt', {
    style: 'image'
});

method

group(baseLayer)

demo

• 将另一个瓦片图层和自己合并，一起加到地图上
• 参数
  • {YY.TileLayer} baseLayer
• 返回值： this

baseLayer.group(baselayer2);

map.addBaseLayer(baseLayer);

unGroup(baseLayer)

• 将另一个瓦片图层和自己拆开，从地图上移除
• 参数
  • {YY.TileLayer} baseLayer
• 返回值： this

getTileUrl(x, y, z)

• 获取瓦片的地址，用于 Ajax 瓦片请求，如果瓦片的请求地址需要重写，可以重写该方法，否则不要做任何改变
• 返回值： String 返回一个 URL

getOpacity()

• 获取瓦片的透明度
• 返回值： Number

setOpacity(opacity)

demo

• 设置瓦片的透明度
• 参数
  • {Number} opacity
• 返回值： this

show()

• 显示
• 返回值： this

hide()

• 隐藏
• 返回值： this

isVisible()

• 判断是否可见
• 返回值： Boolean

setMask(mask)

demo

• 设置瓦片蒙层，是瓦片图层只显示部分区域
• 参数
  • {YY.Polygon} mask
• 返回值： this

  var amapTileLayer = YY.LayerLookup.lookup("amap");
  var features = szAreas.features;
  features.forEach((element) => {
      var name = element.properties.name;
      if (name.indexOf("吴江") >= 0) {
          var coordinates = element.geometry.coordinates;
          var mask = new YY.Polygon(coordinates);
          amapTileLayer.setMask(mask);
      }
  });
  map.addBaseLayer(amapTileLayer);

getMask()

• 获取瓦片蒙层对象
• 返回值： YY. Polygon

removeMask()

• 移除瓦片蒙层对象
• 返回值： this

getId()

• 获取 ID
• 返回值： String/Number

setId(id)

• 设置 id
• 参数
  • {String/Number} id
• 返回值： this

getMap()

• 获取地图对象
• 返回值： YY. Map

baseLayer.group(baselayer2);

map.addBaseLayer(baseLayer);

setTimeout(() => {
    baseLayer.unGroup(baseLayer2); //三秒后将 baseLayer2从地图上移除
}, 3000);