buildingsRaw存储了后端解析的码和高度的数组,分批加载每个网格的数据,需要确保requestIdleCallback是否确保每次都完全加载:
const buildingsRaw = [
["G001123212-033302-300102.0", "10101"],
["G001123212-033302-300102.1", "10101"],
["G001123212-033302-300103.0", "10101"],
["G001123212-033302-300102.2", "10101"],
["G001123212-033302-300102.3", "10101"],
["G001123212-033302-300103.2", "10101"]
]
const batchSize = 1000 // 每批渲染的数量
let batchIndex = 0
function renderBatch() {
const batchbuildings = buildingsRaw.slice(batchIndex, batchIndex + batchSize)
const instances = []
batchbuildings.forEach((building: string) => {
const codeAll = building.split(",")
const code = codeAll[0]
const heightIndex = parseInt(codeAll[1], 2)
const { latD, lngD } = tile(code)
const graphic = new mars3d.graphic.BoxPrimitive({
// position: [lat+lonlatResolution/2,lon+lonlatResolution/2,height+heightResolution/2],
position: new mars3d.LngLatPoint(lngD, latD, heightIndex * 8),
style: {
dimensions: new Cesium.Cartesian3(14, 16, heightIndex * 16),
// fill: true,
// material: Cesium.Color.WHITE.withAlpha(0.01),
color: Cesium.Color.YELLOW.withAlpha(0.5)
// opacity: 0.01,
// outline: true,
// outlineColor: Cesium.Color.YELLOW,
// clampToGround: true
},
id: code,
attr: { remark: "示例1" }
})
instances.push(graphic)
})
const combine = new mars3d.graphic.BoxCombine({
instances
})
flyLineGraphicLayer.addGraphic(combine)
batchIndex += batchSize
if (batchIndex < buildingsRaw.length) {
// 利用空闲时间来渲染下一个批次
if ("requestIdleCallback" in window) {
requestIdleCallback(renderBatch)
} else {
setTimeout(renderBatch, 0)
}
}
}
renderBatch()