vue3.2+ts+cesium制作3DGIS效果的大屏（上）

10月前作者：weixin_39954459 分类：Toy博客阅读(40) 违法举报

这篇具有很好参考价值的文章主要介绍了vue3.2+ts+cesium制作3DGIS效果的大屏（上）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

大屏主场景是3d的一个gis，用的是cesium，在线服务的arcGis，离线服务的瓦片是百度图

在cesium中实现地球自转，昼夜光照，定位追踪平滑视角转移，定位追踪直接视角转移，开启地形服务实现瓦片模型偏移贴地加载+glb贴地加载，告警异常变红呼吸提示效果，点击特效，点击挂载dom节点入cesium，3d嵌套2d内再嵌套3d，左键点击标记效果，左键点击定位追踪效果，左键点击区分效果，右键查询笛卡尔坐标系，右键落点贴地生成站房效果并进行打点

先贴一点效果，图3瓦片是太原市的我demo场景是阳泉市

vue3.2+ts+cesium制作3DGIS效果的大屏（上）

图一

vue3.2+ts+cesium制作3DGIS效果的大屏（上）

图二

vue3.2+ts+cesium制作3DGIS效果的大屏（上）

图三

vue3.2+ts+cesium制作3DGIS效果的大屏（上）

图四

vue3.2+ts+cesium制作3DGIS效果的大屏（上）

图五

初始化的配置项贴一个我常用的在线图 arcGis的非常的好用，离线服务后续我再开一篇文章讲述离线gis的搭建文章来源地址https://www.toymoban.com/news/detail-441851.html

/*
vue版本 3.2
echatrs版本 5.3.2
echarts-gl版本 2.0.9
cesium基础底图 ArcGIS在线底图
cesium地形叠加 ArcGIS地形
*/
let viewerLoad:Function = (data:number,Cesium:any):Object =>{
    return [{
        geocoder:false,    
        homeButton:false,
        sceneModePicker:true,
        baseLayerPicker:false,
        navigationHelpButton:false,
        animation:false,
        timeline:false,
        fullscreenButton:false,
        vrButton:false,
        // terrainProvider:Cesium.createWor

到了这里，关于vue3.2+ts+cesium制作3DGIS效果的大屏（上）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

vue3+ts 绘制流程图 vueflow 附代码及效果图

已完成渲染流程图，自定义模板内容(上下分级),自定义样式，新增节点addRandomNode，点击修改节点nodeClickHandler(从父组件传值) 官网：https://vueflow.dev/guide/node.html#node-template 文档比较复杂，很多想找的方法没法一下就找到需要注意我装了三个，如果npm安装报错可以试试yarn add

2024年02月12日
浏览(37)
uniapp使用vue3和ts开发小程序自定义tab栏，实现自定义凸出tabbar效果

要实现自定义的tabbar效果，可以使用自定义tab覆盖主tab来实现，当程序启动或者从后台显示在前台时隐藏自带的tab来实现。自定义一个tab组件，然后在里面实现自定义的逻辑。组件中所使用的组件api可以看：Tabbar 底部导航栏 | uView 2.0 - 全面兼容 nvue 的 uni-app 生态框架 - uni-

2024年02月04日
浏览(44)
uniapp+vue3+ts--编写微信小程序对接e签宝签署时跳转刷脸效果（人脸识别）中间页代码

e签宝内嵌H5方式集成签署页的文档说明：https://open.esign.cn/doc/opendoc/case3/ahb0sg 签署时跳转刷脸效果示意图： 1. 在文件夹新建一个文件，路径为pages/middle/index，并在pages.json中注册。【ps这个路径要跟e签宝后台定义的中间页路径一致】 2.通过上面文档步骤进行相关代码编写，下面

2024年01月25日
浏览(59)
【WebGIS实例】（10）Cesium开场效果（场景、相机旋转，自定义图片底图）

漫游效果视频：【WebGIS实例】（10）Cesium开场效果（场景、相机点击鼠标后将停止旋转并正常加载影像底图：可以直接看代码，注释写得应该比较清楚了：调用：刚进入时就是直接加载这种图片作为SingleTileImageryProvider的，因为这样能够很快得加载出完整效果，而且不会像

2024年02月12日
浏览(40)
运用pyecharts制作可视化大屏（代码展示及效果图-动图）

一、Matplotlib绘图折线图 import matplotlib.pyplot as plt # 调用画图库 plt.rcParams[\\\'font.sans-serif\\\'] = [\\\'SimHei\\\'] # 设置成可以显示中文，字体为黑体 plt.figure( figsize =(12,8)) # 调整图片尺寸 x = [\\\'周一\\\',\\\'周二\\\',\\\'周三\\\',\\\'周四\\\',\\\'周五\\\',\\\'周六\\\',\\\'周日\\\'] # 设置x轴数据 y = [401,632,453,894,775,646,1207] # 设置对应

2024年02月05日
浏览(50)
【Vue基础-数字大屏】加载动漫效果

一、需求描述当网页正在加载而处于空白页面状态时，可以在该页面上显示加载动画提示。二、步骤代码 1、全局下载npm install -g json-server 2、在src目录下新建文件夹mock，新建文件data.json存放模拟数据 3、在mock目录下启动json-server 4、下载数据请求内容npm install --save axios 如果

2024年02月07日
浏览(36)
vue3+cesium项目搭建

最近需要在一个Vue3的项目中使用到cesium，对于一个cesium没有太多了解的人来说，还是比较麻烦的，本篇博文就将自己在这个过程踩的坑记录下来，有需要的可以看一下 1、vue+cesium框架搭建 2、项目运行起来后，球体不出现，只出现星空持续ing… 1、初始化vue3项目框架 vue cre

2024年02月15日
浏览(46)
Cesium引入vite + vue3

卸载命令使用 vite.config.js 组件使用加载高德地图高德地图的加载方便很多，并不需要申请key，可以直接加载到我们的Cesium中。加载ArcGISMap地图

2024年02月14日
浏览(37)
JavaScript、Vue实现大数据大屏展示3D旋转动画效果

最近在写一些数据大屏的时候客户需要做个3D旋转动效的效果，简单整理之后写了一个小demo做下记录，先看一下效果：当点击next的时候，整个模块旋转切换到下个菜单，点击prev的时候也可以切换到上一个菜单效果。首先我们先构建一个大体的dom结构，如下: 编写基本的css样

2024年02月11日
浏览(41)
vite+vue3+cesium环境搭建

1.创建一个Vite项目 npm create vite@latest 2.安装cesium插件：vite-plugin-cesium npm i cesium vite-plugin-cesium vite -D 3、配置vite.config.js import cesium from \\\'vite-plugin-cesium\\\'; export default defineConfig({ plugins: [vue(),cesium()] }) 4、清空style.css中的样式 5、配置App.vue 清空一切不需要的，设置样式使得全屏 6、配

2024年02月09日
浏览(37)