自定义图层

307字约1分钟

2025-01-25

本页目标

通过继承瓦片图层，扩展自己的瓦片图层。

示例代码

按mars2d规范，演示创建自己的一个瓦片图层，并定义type类型，可以在config.json内使用对应type来参数化创建图层。

// import * as mars2d from "mars2d"

class GoogleLayer extends mars2d.layer.TileLayer {
  constructor(options = {}) {
    let url
    switch (options.layer) {
      case "vec":
        // url = "http://mt{s}.google.cn/vt/lyrs=m@207000000&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Galile"
        url = "https://gac-geo.googlecnapps.cn/maps/vt?lyrs=m&x={x}&y={y}&z={z}"
        break
      case "img_d":
        // url = "http://mt{s}.google.cn/vt/lyrs=s&hl=zh-CN&gl=CN&x={x}&y={y}&z={z}&s=Gali"
        url = "https://gac-geo.googlecnapps.cn/maps/vt?lyrs=s&gl=CN&x={x}&y={y}&z={z}"
        break
      case "img_z":
        // url = "http://mt{s}.google.cn/vt/imgtp=png32&lyrs=h@207000000&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}&s=Galil"
        url = "https://gac-geo.googlecnapps.cn/maps/vt?lyrs=h&gl=CN&x={x}&y={y}&z={z}"
        break
      case "ter":
        // url = "http://mt{s}.google.cn/vt/lyrs=t@131,r@227000000&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}&s=Galile"
        url = "https://gac-geo.googlecnapps.cn/maps/vt?lyrs=t@131,r&gl=CN&x={x}&y={y}&z={z}"
        break
      default:
        url = options.url
        break
    }
    super({
      maxZoom: 20,
      subdomains: "123",
      url,
      ...options
    })
  }
}

// 注册下
mars2d.LayerUtil.register("google", GoogleLayer)

自定义图层

示例代码

相关