三维体元

加载三维体元

代码实例

<script setup lang="ts">
import { onMounted, onBeforeUnmount, onBeforeMount, ref, watch } from 'vue'
//@ts-ignore
import { StatusBar } from 'larkexplorer-ui'
import 'larkexplorer-ui/dist/style.css'
onBeforeMount(() => {
  hideBar()
})
const LarkExplorer = window.LarkExplorer
let map: any
let cusVoxels: any
onMounted(() => {
  LarkExplorer.ready({
    baseUrl: './dist/resources/',
  }).then(initMap)
})

function initMap() {
  map = new LarkExplorer.Map('map')
  console.log(map)
  map.Terrain.translucency = true
  map.Terrain.alpha = 0.6
  initView()
}
function initView() {
  const status = {
    position: {
      x: -2184569.3657661164,
      y: 4425163.691173753,
      z: 4028078.6690067747,
    },
    hpr: {
      heading: 6.236529523842609,
      pitch: -0.5602595763379314,
      roll: 0.0000424647946690726,
    },
  }
  map.Navigation.flyToPos(status, 3)
  statusBar.value = true
}
/**
 * 采用真实数据
 */
const readTxt = () => {
  const datas = OpenPup()
  const result: any[] = []
  for (let i = 0; i < 30; i++) {
    let name: any = i + 1
    name += 'VR.dat'
    let xhr = new XMLHttpRequest()
    xhr.open('GET', '/voxels/VR/' + name, false) // public文件夹下的绝对路径
    xhr.overrideMimeType('text/html;charset=utf-8')
    xhr.send(null)
    const text = xhr.responseText
    let wordBr = text.split(/
|
/g)
    for (let n = 0; n < wordBr.length; n++) {
      const word = wordBr[n]
      if (word.trim() != '') {
        const item = word.split(',')
        const _index = Number(item[0]) / 5
        const h = Number(item[1])
        const value = Number(item[2])
        const coord = datas.find(
          (ele) => ele.fileName === (i + 1).toString() && ele.index === _index
        )
        if (coord) {
          const xyzValue = {
            ...coord,
            z: h,
            value,
          }
          result.push(xyzValue)
        }
      }
    }
  }
  cusVoxels = map.Layers.Voxels.add(result)
  console.log(cusVoxels)
}
function OpenPup() {
  let xhr = new XMLHttpRequest()
  xhr.open('GET', '/voxels/data.txt', false) // public文件夹下的绝对路径
  xhr.overrideMimeType('text/html;charset=utf-8')
  xhr.send(null)
  const text = xhr.responseText
  let wordBr = text.split(/
|
/g)
  let result = []
  for (let i = 0; i < wordBr.length; i++) {
    const word = wordBr[i].split(',')
    const key = word[0].split('-')

    const item = {
      fileName: key[0],
      index: Number(key[1]) - 1,
      x: Number(word[1]),
      y: Number(word[2]),
    }
    result.push(item)
  }
  return result
}

const showPoints = ref(false)
watch(showPoints, (val) => {
  cusVoxels && cusVoxels.showPoints(val)
})

const initVoxels = () => {
  cusVoxels && cusVoxels.destroy()
  cusVoxels = undefined
}
</script>

运行效果 更多示例