渲染编码方格

46 阅读1分钟

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()