//按mars3d规范，封装的pbf图层
|
|
;(function (window) {
|
let BasicRenderer = window.mapboxRenderer.BasicRenderer
|
|
// 创建一个全局变量作为pbfBasicRenderer渲染模板，避免出现16个canvas上下文的浏览器限制，以便Cesium ImageLayer.destory()正常工作。
|
// https://github.com/mapbox/mapbox-gl-js/issues/7332
|
const OFFSCREEN_CANV_SIZE = 1024
|
const baseCanv = document.createElement("canvas")
|
baseCanv.style.imageRendering = "pixelated"
|
baseCanv.addEventListener("webglcontextlost", () => console.log("webglcontextlost"), false)
|
baseCanv.width = OFFSCREEN_CANV_SIZE
|
baseCanv.height = OFFSCREEN_CANV_SIZE
|
|
class MVTImageryProvider {
|
/**
|
* create a MVTImageryProvider Object
|
* @param options MVTImageryProvider options
|
* @param options.style - mapbox style object
|
* @param options.sourceFilter - sourceFilter is used to filter which source participate in pickFeature process.
|
* @param options.maximumLevel - if cesium zoom level exceeds maximumLevel, layer will be invisible.
|
* @param options.minimumLevel - if cesium zoom level belows minimumLevel, layer will be invisible.
|
* @param options.tileSize - can be 256 or 512. 256 default
|
* @param options.headers - url fetch request headers
|
* @param options.tilingScheme - Cesium tilingScheme, default WebMercatorTilingScheme(EPSG: 3857)
|
*/
|
constructor(options) {
|
this.options = options
|
|
let pbfStyle = options.style
|
this.mapboxRenderer = new BasicRenderer({
|
style: pbfStyle
|
})
|
this.mapboxRenderer._transformRequest = (url, resourceType) => {
|
return this.transformRequest(url, resourceType)
|
}
|
|
console.log( this.mapboxRenderer)
|
|
this.mapboxRenderer._canvas = baseCanv
|
this.mapboxRenderer._canvas.addEventListener("webglcontextrestored", () => this.mapboxRenderer._createGlContext(), false)
|
this.mapboxRenderer._createGlContext()
|
|
if (options.showCanvas) {
|
this.mapboxRenderer.showCanvasForDebug()
|
}
|
|
this.ready = false
|
this.readyPromise = this.mapboxRenderer._style.loadedPromise.then(() => {
|
this.ready = true
|
})
|
|
this.tilingScheme = options.tilingScheme ?? new Cesium.WebMercatorTilingScheme()
|
this.rectangle = this.tilingScheme.rectangle
|
this.tileSize = this.tileWidth = this.tileHeight = options.tileSize || 1024
|
this.maximumLevel = options.maximumLevel || Number.MAX_SAFE_INTEGER
|
this.minimumLevel = options.minimumLevel || 0
|
this.tileDiscardPolicy = undefined
|
//this.errorEvent = new Cesium.Event();
|
this.credit = new Cesium.Credit(options.credit || "", false)
|
this.proxy = new Cesium.DefaultProxy("")
|
this.hasAlphaChannel = options.hasAlphaChannel ?? true
|
this.sourceFilter = options.sourceFilter
|
}
|
|
transformRequest = (url) => {
|
if (this.options.transformUrl) {
|
url = this.options.transformUrl(url)
|
}
|
return { url: url, headers: this.options.headers || {}, credentials: "" }
|
}
|
|
createTile() {
|
const canv = document.createElement("canvas")
|
canv.width = this.tileSize
|
canv.height = this.tileSize
|
canv.style.imageRendering = "pixelated"
|
const ctx = canv.getContext("2d")
|
if (ctx) {
|
ctx.globalCompositeOperation = "copy"
|
}
|
return canv
|
}
|
|
async canvasToImage(canvas) {
|
const img = new Image()
|
return new Promise((resolve) => {
|
img.onload = function () {
|
resolve(img)
|
}
|
img.crossOrigin = ""
|
img.src = canvas.toDataURL("image/png")
|
})
|
}
|
|
requestImage(x, y, zoom, releaseTile = true) {
|
if (zoom > this.maximumLevel || zoom < this.minimumLevel) {
|
return Promise.reject(undefined)
|
}
|
|
this.mapboxRenderer.filterForZoom(zoom)
|
const tilesSpec = []
|
this.mapboxRenderer.getVisibleSources(zoom).forEach((s) => {
|
tilesSpec.push({
|
source: s,
|
z: zoom,
|
x: x,
|
y: y,
|
left: 0,
|
top: 0,
|
size: this.tileSize
|
})
|
})
|
|
return new Promise((resolve, reject) => {
|
const canv = this.createTile()
|
const renderRef = this.mapboxRenderer.renderTiles(
|
canv.getContext("2d"),
|
{
|
srcLeft: 0,
|
srcTop: 0,
|
width: this.tileSize,
|
height: this.tileSize,
|
destLeft: 0,
|
destTop: 0
|
},
|
tilesSpec,
|
async (err) => {
|
if (!!err) {
|
switch (err) {
|
case "canceled":
|
case "fully-canceled":
|
reject(undefined)
|
break
|
default:
|
reject(undefined)
|
}
|
} else {
|
if (releaseTile) {
|
renderRef.consumer.ctx = null
|
const img = await this.canvasToImage(canv)
|
resolve(img)
|
// releaseTile默认为true，对应Cesium请求图像的情形
|
this.mapboxRenderer.releaseRender(renderRef)
|
this.mapboxRenderer._style.sourceCaches?.origin?._tileCache.reset()
|
} else {
|
// releaseTile为false时在由pickFeature手动调用，在渲染完成之后在pickFeature里边手动释放tile
|
resolve(renderRef)
|
}
|
}
|
}
|
)
|
})
|
}
|
|
pickFeatures(x, y, zoom, longitude, latitude) {
|
return this.requestImage(x, y, zoom, false)?.then((renderRef) => {
|
let targetSources = this.mapboxRenderer.getVisibleSources(zoom)
|
targetSources = this.sourceFilter ? this.sourceFilter(targetSources) : targetSources
|
|
const queryResult = []
|
|
const lng = Cesium.Math.toDegrees(longitude)
|
const lat = Cesium.Math.toDegrees(latitude)
|
|
targetSources.forEach((s) => {
|
queryResult.push({
|
data: this.mapboxRenderer.queryRenderedFeatures({
|
source: s,
|
renderedZoom: zoom,
|
lng,
|
lat,
|
tileZ: zoom
|
})
|
})
|
})
|
|
console.log(queryResult)
|
|
// release tile
|
renderRef.consumer.ctx = undefined
|
this.mapboxRenderer.releaseRender(renderRef)
|
this.mapboxRenderer._style.sourceCaches?.origin?._tileCache.reset()
|
return queryResult
|
})
|
}
|
}
|
|
class PbfLayer extends mars3d.layer.BaseTileLayer {
|
//构建ImageryProvider
|
_createImageryProvider(options) {
|
return createImageryProvider(options)
|
}
|
}
|
|
function createImageryProvider(options) {
|
if (options.url) {
|
return Cesium.Resource.fetchJson(options).then((data) => {
|
return new MVTImageryProvider({ ...options, style: data })
|
})
|
} else {
|
return new MVTImageryProvider(options)
|
}
|
}
|
|
PbfLayer.createImageryProvider = createImageryProvider
|
|
//注册下
|
const layerType = "pbf" //图层类型
|
mars3d.LayerUtil.register(layerType, PbfLayer)
|
mars3d.LayerUtil.registerImageryProvider(layerType, createImageryProvider)
|
|
//对外接口
|
window.mars3d.layer.PbfLayer = PbfLayer
|
})(window)
|
