cesium2s

cesium2s——一个开源的个人cesium-sdk，封装了业务开发中的常用功能；

快速开始——

1.npm引入：

npm i cesium2s

2.创建基础地球——以在vue3中使用为例：

<template>
  <div id="globe"></div>
</template>

<script setup lang="ts">
import {Cesium2s} from "cesium2s"
import { onMounted, ref } from "vue"
import type { Ref } from "vue"
const globe: Ref<HTMLElement | null> = ref(null)
onMounted(() => {
  if(!globe.value) return;
  const cesium2s: Cesium2s = new Cesium2s(globe.value, {
    //添加arcgis卫星影像瓦片图源作为底图
    baseLayer: new Cesium.ImageryLayer(
      new Cesium.UrlTemplateImageryProvider({
        url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}.png",
        maximumLevel: 16,
      })
    ),
  })  
})
</script>

<style scoped>
.globe {
  width: 100vw;
  height: 100vh;
}
</style>

3.加载倾斜摄影并调整高度

const tileset = await cesiumTools.load3dtiles(
      "/models/3dtiles/building/tileset.json"
    )
cesiumTools.adjust3DTilesetHeight(tileset, 40) //向上调整40米
viewer.flyTo(tileset) //飞到模型处

4.添加、删除自定义Dom弹窗

const dom = document.createElement("div")
dom.innterHTML = 'hello,world~'

//添加弹窗
const popup = cesiumTools.addPopup({
  id: 'yourPopId',
  popDom: dom,
  position,
})

//删除弹窗
cesiumTools.removePopup('yourPopId')

后续开发计划：

• 优化导出结构，使用方式，仿照mapboxgl封装；
• 修复TransformHelper绑定3dTiles后，平移坐标轴方向不正确的bug；
• 绕点飞行demo编写；
• 流光线、曲线、抛物线绘制封装；
• 交互绘制功能封装；
• 高亮函数封装；
• 仿照Mapboxgl的封装思路进行核心类的封装；