vue3使用cesium绘制瓦片图、点云图

最新推荐文章于 2025-06-06 15:11:25 发布

轻叙

最新推荐文章于 2025-06-06 15:11:25 发布

阅读量1k

点赞数 9

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.csdn.net/weixin_45992894/article/details/136394438

cesium加载点云图

1.需要在cesium官网申请token,天地图key
cesium官网地址：https://cesiun.com
天地图:https://www.tianditu.gov.cn
2.这里通过cdn方式引入了

  <link href="https://cesium.com/downloads/cesiumjs/releases/1.78/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <script src="https://cesium.com/downloads/cesiumjs/releases/1.78/Build/Cesium/Cesium.js"></script>

3.绘制点云图

<div id="cesiumContainer"></div>

const TDT_tk = ref("689c05c21d2a662c7700b50a692f149e")
// cesiumtoken
const cesium_tk = ref("eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkZmE0ODY4Mi1kNGJk" +
    "LTQ3MDUtODZhYS05MDljZmE4NjUxNjIiLCJpZCI6MTkwMjM0LCJpYXQiOjE3MDU0ODI4OTF9.35qWxPwV6a7CHbS-nN0fV" +
    "gJQCDsVDEOhVn8doA7rAl8")
// pnts初始化
const initPnts = () => {
   
   
   //初始页面加载
  Cesium.Ion.defaultAccessToken = cesium_tk.value;
  let viewer = new Cesium.Viewer('cesiumContainer', {
   
   
    geocoder: false,   // 位置查找工具
    baseLayerPicker: false,// 图层选择器（地形影像服务）
    timeline: false, // 底部时间线
    homeButton: false,// 视角返回初始位置
    fullscreenButton: false, // 全屏
    animation: false,   // 左下角仪表盘（动画器件）
    sceneModePicker: