cesium源码热更新调试编译

最新推荐文章于 2025-07-16 20:42:14 发布

柳晓黑胡椒

最新推荐文章于 2025-07-16 20:42:14 发布

阅读量411

点赞数 8

CC 4.0 BY-SA版权

分类专栏： # 再识Cesium 文章标签： cesium 热更新开源

柳晓黑胡椒

本文链接：https://blog.youkuaiyun.com/hr_beginner/article/details/149367660

再识Cesium 专栏收录该内容

2 篇文章

订阅专栏

🚀 个人简介：某大型测绘遥感企业资深Webgis开发工程师，软件设计师(中级)、优快云优质创作者
💟 作者：柳晓黑胡椒❣️
📝 专栏：再识Cesium
🌈 若有帮助，还请关注 ➕ 点赞➕收藏，不行的话我再努努力💪💪💪

我突发奇想，想把几个cesium做的让我特别惊奇的地方，比如3dtiles的lod实现，重新认识一边，也整理成blob，分享给粉丝们
当然，首先得把热更新的环境搭好，这里对照的是，目前的latest版本 cesium 1.131

搭建vite项目

yarn create vite@latest

备注：如果遇到什么npm，npx，yarn…的node问题，我个人认为不用去寻找nvm的环境变量问题，直接卸载当前nvm，安装最新版的nvm就可解决问题

在这里插入图片描述

拷贝源码打包后的包

copy源码包，创建cesium文件夹
由于我搭建的是ts的环境，把.js改成.ts了
copy静态资源 CesiumUnminified

调试

在这里插入图片描述

import {onMounted} from "vue";

window.CESIUM_BASE_URL = "CesiumUnminified/" // 配置静态资源
import * as Cesium from "@/cesium-source/Cesium.ts"
import "@cesium/widgets/Source/widgets.css" // 引入样式

onMounted(() => {
  viewer = new Cesium.Viewer('cesiumCintainer')

  let ImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
    url: 'https://{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=902014349629fe7d6d4b5273211a2fd6',
    layer: 'img_d',
    style: 'default',
    format: 'image/jpeg',
    tileMatrixSetID: 'w',
    subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
    maximumLevel: 18,
  });
  viewer.imageryLayers.addImageryProvider(ImageryProvider);
})

@cesium路径

发现 @cesium路径找不到文件导致报错

需要在项目中vite.config.ts配置路径

resolve: {// Vite路径别名配置
    alias: {
        '@': path.resolve('./src'),
        "@cesium": path.resolve('./src/cesium-source')
    },
},

在这里插入图片描述

验证热更新

code效果

调试完，地图正常出来了
在这里插入图片描述
控制台没有明显的报错

修改源码

这里以WebMapTileServiceImageryProvider，我们可以通过引用找到源码处，添加打印代码

果然浏览器端，热更新了