Cesium|xt3d 光柱椎体（粒子效果）
2024-04-18 20:48:13
Cesium|xt3d 实例名称
- 效果
- 代码
- 预览地址
效果
代码
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>cesium|xt3d</title><!-- 引入Cesium --><script src="https://unpkg.com/cesium@1.84.0/Build/Cesium/Cesium.js"></script><link rel="stylesheet" href="https://unpkg.com/cesium@1.84.0/Build/Cesium/Widgets/widgets.css"><!-- 引入xt3d --><script src="http://www.xt3d.cn/xt3dlib/xt3d.min.js"></script><style>html,body,#map3d {width: 100%;height: 100%;margin: 0px;padding: 0px;}</style>
</head><body><div id="map3d"></div><script>let xt3dInit = {init(el) {this.initViewer(el);this.addConeGlows();this.setView();},//初始化viewerinitViewer(el) {this.viewer = new Cesium.Viewer(el, {infoBox: false,selectionIndicator: false,navigation: false,animation: false,shouldAnimate: false,timeline: false,baseLayerPicker: false,geocoder: false,homeButton: false,sceneModePicker: false,navigationHelpButton: false,imageryProvider: new Cesium.UrlTemplateImageryProvider({url: "https://a.tiles.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.png?access_token=mapboxTk"})});//是否开启抗锯齿this.viewer.scene.fxaa = true;this.viewer.scene.postProcessStages.fxaa.enabled = true;},//添加光柱椎体addConeGlows() {let pointObjs = [{position: Cesium.Cartesian3.fromDegrees(116.3123, 31.8329, 0),color: Cesium.Color.CYAN}, {position: Cesium.Cartesian3.fromDegrees(116.7517, 30.5255, 0),color: Cesium.Color.CYAN}, {position: Cesium.Cartesian3.fromDegrees(118.1909, 32.536, 0),color: Cesium.Color.CYAN}, {position: Cesium.Cartesian3.fromDegrees(115.8062, 30.6244, 0),color: Cesium.Color.CYAN}, {position: Cesium.Cartesian3.fromDegrees(115.7629, 32.9919, 0),color: Cesium.Color.CYAN}, {position: Cesium.Cartesian3.fromDegrees(117.5208, 33.6841, 0),color: Cesium.Color.CYAN}, {position: Cesium.Cartesian3.fromDegrees(118.0481, 29.9542, 0),color: Cesium.Color.CYAN}, {position: Cesium.Cartesian3.fromDegrees(117.7734, 31.4978, 0),color: Cesium.Color.CYAN}, {position: Cesium.Cartesian3.fromDegrees(116.1914, 33.4698, 0),color: Cesium.Color.CYAN}, {position: Cesium.Cartesian3.fromDegrees(117.3889, 30.2014, 0),color: Cesium.Color.CYAN}, {position: Cesium.Cartesian3.fromDegrees(117.4109, 33.1073, 0),color: Cesium.Color.RED}, {position: Cesium.Cartesian3.fromDegrees(118.3557, 31.0858, 0),color: Cesium.Color.CYAN}, {position: Cesium.Cartesian3.fromDegrees(116.7847, 33.7722, 0),color: Cesium.Color.CYAN}, {position: Cesium.Cartesian3.fromDegrees(118.6304, 32.5363, 0),color: Cesium.Color.RED}, {position: Cesium.Cartesian3.fromDegrees(117.9382, 30.9375, 0),color: Cesium.Color.CYAN}, {position: Cesium.Cartesian3.fromDegrees(117.29, 32.0581, 117.8),color: Cesium.Color.RED}];for (let i = 0; i < pointObjs.length; i++) {let pointObj = pointObjs[i];let coneGlow = new xt3d.AdvancedPlugin.ConeGlowExt(this.viewer, pointObj.position, {radius: 5000,height: 80000,color: pointObj.color,distanceDisplayCondition: new Cesium.DistanceDisplayConditionGeometryInstanceAttribute(8000, 3010000),})}},//设置视角setView() {let flyToOpts = {destination: {x: -2366923.5614564246,y: 5402886.312927618,z: 3409769.6741513386},orientation: {heading: 1.0541649212467705,pitch: -0.8913923169706712,roll: 0.000370180589240654},duration: 1};this.viewer.scene.camera.flyTo(flyToOpts);},destroy() {this.viewer.entities.removeAll();this.viewer.imageryLayers.removeAll(true);this.viewer.destroy();}}xt3dInit.init("map3d");</script>
</body></html>
预览地址
xt3d 在线预览地址
加粗样式
Cesium|xt3d 光柱椎体（粒子效果）相关推荐
- Cesium|xt3d旋转椎体
Cesium|xt3d旋转椎体 效果 代码 预览地址 效果 代码 <!DOCTYPE html> <html lang="zh-CN"><head&g ...
- Cesium|xt3d 雷达追踪圆锥体
Cesium|xt3d 雷达追踪圆锥体 效果 代码 预览地址 效果 代码 <!DOCTYPE html> <html lang="zh-CN"><he ...
- Cesium|xt3d卫星正摄动画
Cesium|xt3d卫星正摄动画 效果 代码 预览地址 效果 代码 <!DOCTYPE html> <html lang="zh-CN"><head ...
- Cesium|xt3d模型展开动画
Cesium|xt3d模型展开动画 效果 代码 预览地址 效果 代码 <!DOCTYPE html> <html lang="zh-CN"><head ...
- Cesium|xt3d绕圈飞行
Cesium|xt3d绕圈飞行 效果 代码 预览地址 效果 代码 <!DOCTYPE html> <html lang="zh-CN"><head&g ...
- Cesium|xt3d动态轨迹线
Cesium|xt3d动态轨迹线 效果 代码 预览地址 效果 代码 <!DOCTYPE html> <html lang="zh-CN"><head& ...
- Cesium|xt3d 自定义信息框
Cesium|xt3d 自定义信息框 效果 代码 预览地址 效果 代码 <!DOCTYPE html> <html lang="zh-CN"><hea ...
- Cesium|xt3d扇叶扫描
Cesium|xt3d扇叶扫描 效果 代码 预览地址 效果 代码 <!DOCTYPE html> <html lang="zh-CN"><head&g ...
- Cesium|xt3d雷达遮罩扫描
Cesium|xt3d雷达遮罩扫描 效果 代码 预览地址 效果 代码 <!DOCTYPE html> <html lang="zh-CN"><head ...
最新文章
- 中文扩增子分析视频教程推荐
- 写给java初学者,从零开始学习java开发的完整学习路线
- inotify+rsync实时同步服务部署
- hdu3037 Saving Beans
- 【密码学】一万字带您走进密码学的世界（下）
- python中home定义是什么_第48p，什么是函数？，Python中函数的定义
- 《C#图解教程》读书笔记之六：接口和转换
- python字典成绩_python_字典
- Eric Evans说DDD还未结束
- svn代码版本管理总结
- python的继承与多态
- 你为什么选择考研，考研对你的意义是什么？
- hashset如何检查重复_如何使用 C# 中的 HashSet
- 四十五.加密与解密 AIDE入侵检测系统 扫描与抓包
- 腾讯的bugly的更新和热更新
- 70.爬楼梯 （力扣leetcode） 博主可答疑该问题
- adodb 连接mysql_PHP程序中使用adodb连接不同数据库的代码实例
- SharePoint - CAML
- SpringMVC+Mybatis+Maven搭建 简单配置双数据源
- 历经艰辛，新买的kingmax 8G超棒(SM325)量产成功，速度飙升一倍