【超图+CESIUM】【基础API使用示例】34、超图｜CESIUM

前言

 缺少前置学习使用资料，请自行查阅：[https://blog.csdn.net/weixin_44402694/article/details/123110136](https://blog.csdn.net/weixin_44402694/article/details/123110136)以下示例使用到的公共静态资料，不建议下载，建议官网自行下载超图Build资源，示例所涉及图片会在示例使用到时提供出来。如有需要可下载：[https://download.csdn.net/download/weixin_44402694/82180350](https://download.csdn.net/download/weixin_44402694/82180350)。绘制光流流光线段。

使用

效果
完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>绘制光流效果</title><link href="./public/Build/Cesium/Widgets/widgets.css" rel="stylesheet" /><scripttype="text/javascript"src="./public/Build/Cesium/Cesium.js"></script><style>* {margin: 0;padding: 0;}html,body,#cesium-container {width: 100%;height: 100%;}.panel {position: fixed;left: 10px;top: 10px;z-index: 1;background-color: #fff;}.panel .btn {cursor: pointer;}</style></head><body><div id="cesium-container" /><div class="panel"><p class="btn">1、绘制光流效果</p><p class="btn">清除</p></div><script>polylineTrailLinkMaterialProperty()let viewerwindow.onload = function () {viewer = new Cesium.Viewer('cesium-container', {sceneModePicker: true,navigation: false,})initBindDrawEventHandler()}// 初始化绑定按钮的绘制事件function initBindDrawEventHandler() {const btns = document.querySelectorAll('.panel .btn')btns[0].addEventListener('click', () => {drawFlowingLineHandler()activeCurrentClickBtnHandler(0)})btns[1].addEventListener('click', () => {clearAllEntitiesHandler()activeCurrentClickBtnHandler(1)})}// 绘制光流效果function drawFlowingLineHandler() {viewer.entities.add({id: 'test',name: 'test',polyline: {positions: Cesium.Cartesian3.fromDegreesArrayHeights([50, -10, 500000, 140, -10, 500000,]),width: 10,material: new Cesium.PolylineTrailLinkMaterialProperty(Cesium.Color.YELLOW,3000 //ms), //修改抛物线材质}})}// 清除所有实体function clearAllEntitiesHandler() {viewer.entities.removeAll()}// 将图片作为材质添加到cesium中，供绘制流动的线段使用function polylineTrailLinkMaterialProperty() {// 流动线纹理function PolylineTrailLinkMaterialProperty(color, duration) {this._definitionChanged = new Cesium.Event()this._color = undefinedthis._colorSubscription = undefinedthis.color = colorthis.duration = durationthis._time = new Date().getTime()}Object.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {isConstant: {get: function () {return false},},definitionChanged: {get: function () {return this._definitionChanged},},color: Cesium.createPropertyDescriptor('color'),})PolylineTrailLinkMaterialProperty.prototype.getType = function (time) {return 'PolylineTrailLink'}PolylineTrailLinkMaterialProperty.prototype.getValue = function (time,result) {if (!Cesium.defined(result)) {result = {}}result.color = Cesium.Property.getValueOrClonedDefault(this._color,time,Cesium.Color.WHITE,result.color)result.image = Cesium.Material.PolylineTrailLinkImageresult.time =((new Date().getTime() - this._time) % this.duration) /this.durationreturn result}PolylineTrailLinkMaterialProperty.prototype.equals = function (other) {return (this === other ||(other instanceof PolylineTrailLinkMaterialProperty &&Cesium.Property.equals(this._color, other._color)))}Cesium.PolylineTrailLinkMaterialProperty =PolylineTrailLinkMaterialPropertyCesium.Material.PolylineTrailLinkType = 'PolylineTrailLink'Cesium.Material.PolylineTrailLinkImage ='data:image/png;base64,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' //图片 图片为箭头Cesium.Material.PolylineTrailLinkSource ='czm_material czm_getMaterial(czm_materialInput materialInput)\n\{\n\czm_material material = czm_getDefaultMaterial(materialInput);\n\vec2 st = materialInput.st;\n\vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));\n\material.alpha = colorImage.a * color.a;\n\material.diffuse = (colorImage.rgb+color.rgb)/2.0;\n\return material;\n\}'Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineTrailLinkType,{fabric: {type: Cesium.Material.PolylineTrailLinkType,uniforms: {color: new Cesium.Color(255.0, 255.0, 255.0, 1),image: Cesium.Material.PolylineTrailLinkImage,time: 0,},source: Cesium.Material.PolylineTrailLinkSource,},translucent: function (material) {return true},})}// 高亮当前点击按钮function activeCurrentClickBtnHandler(idx) {const btns = document.querySelectorAll('.panel .btn')Array.from(btns).forEach((btn, index) => {btn.style.color = index === idx ? 'red' : '#000'})}</script></body>
</html>

【超图+CESIUM】【基础API使用示例】34、超图｜CESIUM - 绘制光流流光线段相关推荐

【超图+CESIUM】【基础API使用示例】04、超图｜CESIUM - 设置地图风格样式
前言缺少前置学习使用资料,请自行查阅:[https://blog.csdn.net/weixin_44402694/article/details/123110136](https://blog.c ...
【超图+CESIUM】【基础API使用示例】10、超图｜CESIUM - 场景出图、下载当前截图
前言缺少前置学习使用资料,请自行查阅:[https://blog.csdn.net/weixin_44402694/article/details/123110136](https://blog.c ...
【超图+CESIUM】【基础API使用示例】42、超图｜CESIUM - 绘制编辑线段｜读取kml文件绘制编辑｜导出kml线段数据
前言缺少前置学习使用资料,请自行查阅:[https://blog.csdn.net/weixin_44402694/article/details/123110136](https://blog.c ...
【超图+CESIUM】【基础API使用示例】38、超图｜CESIUM - 特效-云层设置
前言缺少前置学习使用资料,请自行查阅:[https://blog.csdn.net/weixin_44402694/article/details/123110136](https://blog.c ...
【超图+CESIUM】【基础API使用示例】41、超图｜CESIUM - 特效-雪景设置
前言缺少前置学习使用资料,请自行查阅:[https://blog.csdn.net/weixin_44402694/article/details/123110136](https://blog.c ...
【超图+CESIUM】【基础API使用示例】43、超图｜CESIUM - 绘制编辑面｜读取kml文件绘制编辑｜导出kml面数据
前言缺少前置学习使用资料,请自行查阅:[https://blog.csdn.net/weixin_44402694/article/details/123110136](https://blog.c ...
【超图+CESIUM】【基础API使用示例】22、超图｜CESIUM - 标绘面：Cesium.DrawHandler绘制面Cesium.DrawMode.Polygon
前言缺少前置学习使用资料,请自行查阅:[https://blog.csdn.net/weixin_44402694/article/details/123110136](https://blog.c ...
【超图+CESIUM】【基础API使用示例】16、超图｜CESIUM -设置地球模式：椭球模式、圆球模式
前言缺少前置学习使用资料,请自行查阅:[https://blog.csdn.net/weixin_44402694/article/details/123110136](https://blog.c ...
【超图+CESIUM】【基础API使用示例】50、超图｜CESIUM - moveLeft\moveRight\moveForward\moveBackward实现运动中的碰撞检测效果
前言由于项目业务需要,所以实现了这四个api的碰撞检测效果. 核心是通过ray射线来做碰撞检测. 代码目录结构核心代码 <ul class="btn-list">& ...
Cesium基础使用介绍
既然给我发了参与方式,不参加似乎有点不给人面子,反正也没多少人看我的博客,那我就试试吧,也欢迎大家自己参与:2017年度全网原创IT博主评选活动投票:http://www.itbang.me/goVo ...

【超图+CESIUM】【基础API使用示例】34、超图｜CESIUM - 绘制光流流光线段

前言

使用

【超图+CESIUM】【基础API使用示例】34、超图｜CESIUM - 绘制光流流光线段相关推荐

最新文章

热门文章