cesium 闪烁点 实体闪烁

最新推荐文章于 2024-07-28 23:25:57 发布
置顶 最新推荐文章于 2024-07-28 23:25:57 发布
阅读量4.6k 收藏 35
点赞数 3
分类专栏： cesium 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46730573/article/details/119856078
版权
该博客介绍了如何使用Cesium创建动态地图效果，包括添加带有文字的点位和动态扩散的圆形。通过封装DragEntity类，实现了点位的加载和动态圆的更新。点击事件被用来使选中的点位闪烁，同时动态圆的半径会按设定的范围和步长变化。此外，还提供了清除效果的方法。
摘要由CSDN通过智能技术生成
# 效果

在这里插入图片描述

最终完整代码请看下面的封装一栏

# 基本思路

可以把当前效果，动态分成两部分，添加一个点，和添加一个圆，当点击时，动态改变点的颜色，动态改变圆的大小

# 实现方法

1. 首先我们需要生成一个球体做我们标记的容器。

viewer = new Cesium.Viewer('cesiumContainer',{
            // terrainProvider: Cesium.createWorldTerrain(),
            // animation: false, // 控制场景动画的播放速度控件
            // baseLayerPicker: true, // 底图切换控件
            // baselLayerPicker:false,// 将图层选择的控件关掉，才能添加其他影像数据
            // // fullscreenButton: false, // 全屏控件
            // geocoder: false, // 地理位置查询定位控件
            // homeButton: true, // 默认相机位置控件
            // timeline: false, // 时间滚动条控件
            // infoBox: false, //是否显示信息框
            // sceneModePicker: false, //是否显示3D/2D选择器
            // selectionIndicator: false, // 点击点绿色弹出 是否显示选取指示器组件
            // sceneMode: Cesium.SceneMode.SCENE3D, //设定3维地图的默认场景模式:Cesium.SceneMode.SCENE2D、Cesium.SceneMode.SCENE3D、Cesium.SceneMode.MORPHING
            // navigationHelpButton: false, // 默认的相机控制提示控件
            // scene3DOnly: true, // 每个几何实例仅以3D渲染以节省GPU内存
            // navigationInstructionsInitiallyVisible: false,
            // showRenderLoopErrors: false, //是否显示渲染错误
            // orderIndependentTranslucency:false,//设置背景透明
            
        });

2. 然后利用cesium中 billboard 来添加目标点位
添加点位的数据格式

poin :  [{id:'12321321' , name: "北京西路测试点", type: "固定枪机", state: "在线", position: { x: 116.4568, y: 39.8926} ,text:'X'},
         {id:'43244324' , name: "阿乐修理厂门口", type: "固定枪机", state: "在线", position: {  x: 116.4568, y: 39.8944 } ,text:'+'},
         {id:'43764324', name: "裕华路加油站", type: "固定枪机", state: "在线", position: { x: 116.4566, y: 39.8923 } ,text:'?'},
         {id:'437543345', name: "康佳大药房", type: "固定枪机", state: "在线", position: { x: 116.4513, y: 39.8923 }  ,text:'!'},],

添加点位先上代码（class封装）

//加载点
 dragEntity(){
   let drag = new DragEntity({
     viewer:this.$store.state.viewer, 
   })
   let _this = this
   // this.poin = [{id:234,position:[122.8,39.9],text:"L"},{id:432,position:[122,39],text:"C"}]
   this.poin.forEach(item => {
     let entity = drag.addEntity(item);
     _this.poinEntity[item.id] = entity;
   })
 },

创建dragEntity.js文件

/**
 * @param {Viewer} viewer
 * 
*/
export default class DragEntity{
    constructor(val){
        this.viewer = val.viewer,
    }
    addEntity(value){
        //数据格式{id:543595234324_432423,position:[122.8,39.9],text:"L"}
        let pinBuilder = new Cesium.PinBuilder();
        let poin = this.viewer.entities.add({
            id:value.id,
            name: value.name,
            position: Cesium.Cartesian3.fromDegrees(value.position.x, value.position.y),
            billboard: {
              image: pinBuilder.fromText(value.text,Cesium.Color.ROYALBLUE, 48).toDataURL(),
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            },
            monitoItems:{
                    data:value
                },
        });
        return poin
    }
    
}

解读一下，我们封装了一个class类，将添加点的方法封装到类中方便调用，我们用“billboard”方法与cesium中PinBuilder来进行添加目标点，"PinBuilder"不会的可以看一下官网https://sandcastle.cesium.com/?src=Map%20Pins.html&label=All，然后我们将创建好的实体，return出来，用一个对象来进行接收，用对象的目的就是为了以后方便查找。来看一眼效果
在这里插入图片描述
3. 第三步我们来动态扩散圆,只需要修改上面dragEntity.js文件即可，运用ellipse方法加载圆，动态扩散元具体讲解请看https://blog.csdn.net/weixin_46730573/article/details/119505757?spm=1001.2014.3001.5502

/**
 * @param {Viewer} viewer
 * 
*/
export default class DragEntity{
    constructor(val){
        this.viewer = val.viewer,
    }
    addEntity(value){
        let minR=value.minR;//最小半径
        let maxR = value.maxR;// 最大半径
        let deviationR = value.deviationR; // 每次增加的大小
        var r1 = minR
        function changeR1() {  
            r1=r1+deviationR;//deviationR为每次圆增加的大小
            if(r1>=maxR){
                r1=minR;
            }
            return r1;
        }
        function color() {
            let x=1-r1/maxR;
            return Cesium.Color.RED.withAlpha(x);
        }
        //数据格式{id:543595234324_432423,position:[122.8,39.9],text:"L"}
        let pinBuilder = new Cesium.PinBuilder();
        let poin = this.viewer.entities.add({
            id:value.id,
            name: value.name,
            position: Cesium.Cartesian3.fromDegrees(value.position.x, value.position.y),
            billboard: {
              image: pinBuilder.fromText(value.text,Cesium.Color.ROYALBLUE, 48).toDataURL(),
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            },
            ellipse: {
                semiMinorAxis: new Cesium.CallbackProperty(changeR1,false),
                semiMajorAxis: new Cesium.CallbackProperty(changeR1,false),
                material: new Cesium.ColorMaterialProperty(new Cesium.CallbackProperty(color,false)),
                outlineColor: Cesium.Color.RED,
                show: false
            },
            monitoItems:{
                data:value
            },
        });
        return poin
    }
}

修改dragEntity函数，添加给动态圆传的半径大小{minR:0, maxR:40, deviationR:1,}

//加载点
    dragEntity(){
      let drag = new DragEntity({
        viewer:this.$store.state.viewer, 
      })
      let _this = this
      this.poin.forEach(item => {
        let entity = drag.addEntity(Object.assign(item,{minR:0, maxR:40, deviationR:1,}));
        _this.poinEntity[item.id] = entity;
      })
    },

现在动态扩散圆我们就加载出来了；

4. 我们来加载点击事件，获取是点击实体

leftDownAction(){
      let viewer = this.$store.state.viewer
        this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        let _this = this
        let id
        _this.handler.setInputAction(function (movement) {
            let pick = viewer.scene.pick(movement.position); 
            if (Cesium.defined(pick) && (pick.id.id) ) {
                // _this.leftDownFlag = true;
                id= pick.id.id;
                 console.log(id)
            }
            
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        
    },

5. 当点击到实体时，点闪烁，点击空白处时，清除闪烁，运用 Cesium.CallbackProperty() 来控制点的闪烁

	clearClick(){
      let _this = this;
      if(_this.oldId){
        _this.poinEntity[_this.oldId].billboard.color = Cesium.Color.WHITE.withAlpha(1);
        _this.poinEntity[_this.oldId].ellipse.show = false;
      }
    },
    callbackProperty(id){
      this.clearClick()
      let flog = true;
      let x = 1;
      let callbackProperty = new Cesium.CallbackProperty(function () {
        if(flog){
            x=x-0.05;
            if(x<=0){
                flog=false;
            }
        }else{
            x=x+0.05;
            if(x>=1){
                flog=true;
            }
        }
        return Cesium.Color.RED.withAlpha(x);
      },false);
      setTimeout(()=>{
        this.poinEntity[id].billboard.color = callbackProperty;
        this.poinEntity[id].ellipse.show = true;
        this.oldId = id;
      },1000)
    },

当点击事件获取到id时调用callbackProperty（id）即可，在这个函数中我们创建了一个callbackProperty 方法为修改属性颜色

# 封装（完整代码）

创建dragEntity.js文件


/**
 * @param {Viewer} viewer
 * 
*/
export default class DragEntity{
    constructor(val){
        this.viewer = val.viewer,
    }
    addEntity(value){
        let minR=value.minR;//最小半径
        let maxR = value.maxR;// 最大半径
        let deviationR = value.deviationR; // 每次增加的大小
        var r1 = minR
        function changeR1() {  
            r1=r1+deviationR;//deviationR为每次圆增加的大小
            if(r1>=maxR){
                r1=minR;
            }
            return r1;
        }
        function color() {
            let x=1-r1/maxR;
            return Cesium.Color.RED.withAlpha(x);
        }
        //数据格式{id:543595234324_432423,position:[122.8,39.9],text:"L"}
        let pinBuilder = new Cesium.PinBuilder();
        let poin = this.viewer.entities.add({
            id:value.id,
            name: value.name,
            position: Cesium.Cartesian3.fromDegrees(value.position.x, value.position.y),
            billboard: {
              image: pinBuilder.fromText(value.text,Cesium.Color.ROYALBLUE, 48).toDataURL(),
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            },
            ellipse: {
                semiMinorAxis: new Cesium.CallbackProperty(changeR1,false),
                semiMajorAxis: new Cesium.CallbackProperty(changeR1,false),
                material: new Cesium.ColorMaterialProperty(new Cesium.CallbackProperty(color,false)),
                outlineColor: Cesium.Color.RED,
                show: false
            },
            monitoItems:{
                data:value
            },
        });
        return poin
    }
    
}

在实例中调用

import DragEntity from './dragentity.js'
data(){
    return{
      poinEntity:{},
      oldId:null,//储存上次点位ID
      poin :  [{id:'12321321' , name: "北京西路测试点", type: "固定枪机", state: "在线", position: { x: 116.4568, y: 39.8926} ,text:'X'},
            {id:'43244324' , name: "阿乐修理厂门口", type: "固定枪机", state: "在线", position: {  x: 116.4568, y: 39.8944 } ,text:'+'},
            {id:'43764324', name: "裕华路加油站", type: "固定枪机", state: "在线", position: { x: 116.4566, y: 39.8923 } ,text:'?'},
            {id:'437543345', name: "康佳大药房", type: "固定枪机", state: "在线", position: { x: 116.4513, y: 39.8923 }  ,text:'!'},],
    }
  },
mounted(){
    this.dragEntity()
    this.leftDownAction()
},
methods:{
	// 左键点击事件
    leftDownAction(){
      	let viewer = this.$store.state.viewer
        this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        let _this = this
        let id
        _this.handler.setInputAction(function (movement) {
            let pick = viewer.scene.pick(movement.position); 
            if (Cesium.defined(pick) && (pick.id.id) ) {
                id= pick.id.id;
                 _this.callbackProperty(id)
            }else{
              _this.clearClick();
            }
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        
    },
    // 清除效果
    clearClick(){
      let _this = this;
      if(_this.oldId){
        _this.poinEntity[_this.oldId].billboard.color = Cesium.Color.WHITE.withAlpha(1);
        _this.poinEntity[_this.oldId].ellipse.show = false;
      }
    },
    //添加效果展示
    callbackProperty(id){
      this.clearClick()
      let flog = true;
      let x = 1;
      let callbackProperty = new Cesium.CallbackProperty(function () {
        if(flog){
            x=x-0.05;
            if(x<=0){
                flog=false;
            }
        }else{
            x=x+0.05;
            if(x>=1){
                flog=true;
            }
        }
        return Cesium.Color.RED.withAlpha(x);
      },false);
      setTimeout(()=>{
        this.poinEntity[id].billboard.color = callbackProperty;
        this.poinEntity[id].ellipse.show = true;
        this.oldId = id;
      },1000)
    },
    //加载点和圆
    dragEntity(){
      let drag = new DragEntity({
        viewer:this.$store.state.viewer, 
      })
      let _this = this
      // this.poin = [{id:234,position:[122.8,39.9],text:"L"},{id:432,position:[122,39],text:"C"}]
      this.poin.forEach(item => {
        let entity = drag.addEntity(Object.assign(item,{minR:0, maxR:40, deviationR:1,}));
        _this.poinEntity[item.id] = entity;
      })
    },
}

想要完整demo可私信备注来意

GIS-CL
关注
  • 3
    点赞
  • 踩
  • 35
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
专栏目录
005：vue+cesium 显示闪烁的广告牌图片
大剑师兰特的GIS世界
02-27 627
第005个本示例的目的是介绍如何在vue+cesium中设置闪烁的广告牌图片。主要是介绍entity>billboard相关的属性设置。
107.（cesium篇）cesium椎体上下跳动
地图之家
05-15 541
107.（cesium篇）cesium椎体上下跳动
cesium实体闪烁
最新发布
m0_69112199的博客
07-28 144
通过setInterval控制闪烁频率,CallbackProperty改变实体颜色。欢迎补充，一起进步。
Cesium自定义着色器构件三角面片【闪烁】问题，但是一移动视角就闪烁
警警的博客
07-09 289
Cesium自定义着色器构件三角面片【闪烁】问题，但是一移动视角就闪烁
Cesium 实战 16 - 点（point）、文本标签（Label） 和 广告牌（Billboard）弹跳效果
linzi19900517的博客
02-07 3268
项目中需要广告牌（效果图标）的弹跳效果，百度搜索并尝试了很多博客，大概有三种方式实现。一种是通过监听地球渲染事件：viewer.scene.preUpdate.addEventListener 改变高度，实现效果。另一种方式是通过回调属性：CallbackProperty 实现效果。还有一种方式是通过周期定时函数 setInterval 来手动控制高度，实现效果，最终文本还是使用回调属性 CallbackProperty 来实现广告牌的弹跳效果，其他方式请查看参考博客。
cesium 闪烁点
zxl9669的博客
05-24 966
创建闪烁点主要是通过回调函数CallbackProperty，控制样式改变或是否显示识。
Cesium特效-2022年汇总
wzwxwc1987的专栏
03-09 1249
2022年基于cesium实现的各种特效
Cesium常见操作：entity闪烁
happy81997的博客
02-08 1123
核心思路，entity的闪烁主要是通过回调函数CallbackProperty，控制样式改变或是否显示。这里的方法其实就是通过CallbackProperty控制show为true或者false，如果x>=0.5，就是true，反之为false。
Cesium 绘制一个旋转发光的四棱锥
qq_35984445的博客
08-08 2798
其中主要构造几何如下，创建倒着的四棱锥，构建顶点数组与索引，同时构建四棱锥的三角面数组与索引。二、根据创建的矩阵（Matrix4）进行做动画自身中心轴旋转操作。2.然后根据坐标创建矩阵（Matrix4）和四棱锥的海拔。最近发现B站上大神的视频，听了一下，受益匪浅，分享给大家。三、根据矩阵（Matrix4）中的海拔做动画自身跳动。最后根据图片创建四棱锥的纹理。如图所示，四棱锥的三角面构建。顶层矩形也切割成两个三角面。如图所示，顶点数组构建。......
Cesium绘制点线面的工具封装
08-17
使用之前先看博客，里面有工具的介绍： Cesium 实战记录（四） 绘制点线面的工具封装 https://blog.csdn.net/KK_bluebule/article/details/126384623
Cesium绕点飞行代码源码
04-13
Cesium如何根据一个视觉点绕点分型， 这个效果是很多的小伙伴想要达到的，现在源代码整理好了，需要的可以下载了，具体有什么问题可以私信我
Cesium画点线面
01-25
本篇将详细讲解如何使用Cesium来绘制点、线和面，实现在Cesium地图上进行三维可视化。 首先，我们需要了解Cesium的基本结构。Cesium的核心是`Cesium.Viewer`对象，它负责管理场景、相机、时间线等元素。初始化...
Cesium绘制点线面以及面积测量
06-05
在Cesium这个强大的3D地球可视化库中，绘制点、线、面以及进行面积测量是常见的功能需求。Cesium提供了一系列API和工具，使得开发者能够创建丰富的交互式三维地球场景。这里我们将深入探讨如何利用Cesium和所谓的...
Cesium量算点线面
03-16
"Cesium量算点线面"是指使用Cesium进行空间几何对象的测量，包括点、线和面的绘制以及相关计算功能。在本场景中，我们主要探讨如何利用Cesium进行三维空间的量算操作。 1. **Cesium简介** Cesium是一个基于WebGL的...
SuperMap iClient3D for Cesium点聚合更改图标样式
SuperMap技术控
12-30 983
nannan 在场景中查询结果通常以标记点（布告板）的形式展现，但是如果标记点较多，不仅会大大增加客户端的渲染时间，让客户端变得很卡，而且会让人产生密集恐惧症（图1）。这样并不能满足我们实际的需求，因为我们还需要上面的数字。这样我们就需要查接口是否能带数字替换了。但是发现聚合只能用Cesium内定的默认符号，并不能自定义符号。最近有客户要做点聚合的功能，本身cesium自带聚合的方法，而且之前有人写过类似的方法。都是固定好了的，根本改不了。要不就是有样式改不了字，要不就是有字改不了样式。
Cesium 加载发光材质的行政区边界
lz5211314121的博客
07-14 1728
那么如果我们在加载 geojson 行政区的时候，是不是 也可以利用这发光的线条来展示，但是在 cesium 中加载 geojson 使用的是GeoJsonDataSource这种方式，这种方式有个缺点，就是你的数据必须是线要素或者是把行政区的面要素转换成线要素在设置材质。具体的转化过程你可以依赖 turf.js将面转换成线要素,但是我不推荐这种方式原因有两个，第一转换起来比较麻烦，还得依赖第三方库，第二，不利于后续的交互操作，如果你将面转换成了线，那么后续点击面进行高亮的操作你又该如何应对？
cesium实现点聚合效果
热门推荐
专注GIS开发
02-27 1万+
cesium实现点聚合效果
cesium 场景点光源
北京-giser的博客
01-17 553
cesium 场景点光源
cesium清除点实体
06-06
要清除Cesium中的点实体，可以使用以下代码： ```javascript viewer.entities.removeAll(); //清除所有实体 ``` 如果只想清除特定的点实体，可以使用以下代码： ```javascript var entity = viewer.entities.getById(entityId); //获取要清除的实体 if (entity) { viewer.entities.remove(entity); //清除实体 } ``` 其中，entityId是要清除的实体的ID。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

GIS-CL

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值