Mars3D开发者中心

外观

自定义图层

约 280 字小于 1 分钟

2025-01-25

主要核心点

主要外部实现好createImageryProvider方法即可, 如果是普通的xyz瓦片可以自定义ImageryProvider类并重写requestImage(x, y, level, request)方法返回canves即可。

示例代码

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

// import * as mars3d from "mars3d"

class MyXyzImageryProvider extends mars3d.provider.XyzImageryProvider {
  constructor(options = {}) {
    // options.customTags = options.customTags || {}
    // options.customTags.mars3d_u = (imageryProvider, x, y, level) => {
    //   return `x=${x};y=${-y};z=${level};v=009;type=sate`
    // }

    super(options)
  }
 
  // requestImage(x, y, level, request) {
  //   const resource = this._resource
  //   const url = resource.getUrlComponent(true)
  //   const webpUrl = mars3d.Util.template(url, {
  //     z: level,
  //     x: x,
  //     y: y
  //   })
  //   return new Promise((resolve, reject) => {
  //     const img = new Image()
  //     img.onload = () => {
  //       const canvas = document.createElement("canvas")
  //       canvas.width = img.width
  //       canvas.height = img.height
  //       const ctx = canvas.getContext("2d")
  //       ctx.drawImage(img, 0, 0)
  //       resolve(canvas)
  //     }
  //     img.onerror = (error) => {
  //       reject(new Error("Failed to load WebP image: " + error))
  //     }
  //     img.src = webpUrl
  //   })
  // }
}

class MyXyzLayer extends mars3d.layer.XyzLayer {
  // 构建ImageryProvider
  async _createImageryProvider(options) {
    return createImageryProvider(options)
  }
}
async function createImageryProvider(options) {
  return new MyXyzImageryProvider(options)
}

// 注册下
const layerType = "xyz-my" // 图层类型,可以json中定义使用
mars3d.LayerUtil.register(layerType, MyXyzLayer)
mars3d.LayerUtil.registerImageryProvider(layerType, createImageryProvider)