Cesium:结合canvas添加渐变背景色

最新推荐文章于 2024-06-27 20:03:22 发布
最新推荐文章于 2024-06-27 20:03:22 发布
阅读量1.6k 收藏 3
点赞数 2
分类专栏： WebGIS 文章标签： Cesium Canvas Label Billboard 渐变色
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43524214/article/details/125352818
版权
本文介绍了如何在Cesium中利用canvas元素为Wall墙体和Label文字创建渐变背景色。通过将canvas作为material的image属性，可以实现自定义的视觉效果。示例代码分别展示了Wall墙体和Label的渐变背景效果。
摘要由CSDN通过智能技术生成

Wall墙体渐变

在这里插入图片描述    Cesium开发中，添加Wall墙体，通常是通过指定Cesium.Wall的material属性来实现颜色填充的。而material属性对应的Cesium.Material提供了fromType()方法，可以将一张image图片作为背景进行填充。
在这里插入图片描述
   &nbspCesium API文档对Image属性的描述为：image属性值表示图片的路径，但是其实，这里的image完全可以使用canvas元素进行替换。如下的2种效果即为结合canvas绘图实现的。
在这里插入图片描述
在这里插入图片描述   示例代码如下，


                

                
                
        

        

    




        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
                
                    
                    超级会员免费看
                
            

            
            
            
        

    

      

        

            

              
                
                  是席木木啊
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    2
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    3
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
                
  • 
                  
                    打赏
                    
                  
                  
    打赏
    
                
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          

                

                        订阅专栏
                










                



	

		

			

				
					
Cesium 颜色渐变 -Shader

				
			

			

				

					一路走一路学，总会不落后
				

				

					02-01
					
					905
					
				

			

		

		

			
				
注意：此处只是为了演示，56.0/255.0等固定值运算最好算完后再在片元着色器中使用。通过计算两个rgb的值映射到0到1的位置信息中。

			
		

	



                

              
                



	

		

			

				
					
CesiumJS【Basic】- #055 绘制渐变填充多边形（Primitive方式）

					
最新发布

				
			

			

				

					AlanL的专栏
				

				

					07-03
					
					59
					
				

			

		

		

			
				
绘制渐变填充多边形（Primitive方式）

			
		

	



                


  
              

                


	

		

			

				
					
Cesium 多边形渐变色纹理（Canvas）

				
			

			

				

					qq_17627195的博客
				

				

					07-25
					
					3747
					
				

			

		

		

			
				
可以直接使用Cesium.ImageMaterialProperty(options)方法给。

			
		

	





	

		

			

				
					
Cesium颜色渐变的围墙

				
			

			

				

					一路走一路学，总会不落后
				

				

					02-01
					
					570
					
				

			

		

		

			
				
1、需要修改的是entity墙的纹理（material）的属性值，使用Cesium 材质相关的类为 MaterialProperty，该类中ImageMaterialProperty图片纹理功能；b、repeat 值为一个二位数，分别表示X,y方向的重复次数，例如new Cartesian2(2.0, 1.0)表示x方向重复2次,y方向重复1次。stop 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。2、创建一个Canvas，根据Canvas的属性设置一张颜色渐变的图片；

			
		

	



		

			
		



	

		

			

				
					
Cesium实现渐变面

				
			

			

				

					qq_43474235的博客
				

				

					03-31
					
					1143
					
				

			

		

		

			
				
使用着色器，通过纹理坐标和其他参数计算出材质的颜色和透明度。通过给定的颜色、漫反射强度和透明度，计算出最终的反射颜色和透明度，并且根据给定的中心点位置和当前像素的纹理坐标，计算出距离中心的距离用来做透明度的参考值，然后计算得到的颜色加载到对应的材质上。

			
		

	





	

		

			

				
					
cesium修改灰色背景（默认蓝色）（cesium篇.81）

				
			

			

				

					地图之家
				

				

					06-16
					
					1071
					
				

			

		

		

			
				
地图之家总目录（订阅之前建议先查看该博客）
文章末尾处提供保证可运行完整代码包，运行如有问题，可“私信”博主。
效果如下所示：
下面献上完整代码，代码重要位置会做相应解释

			
		

	





	

		

			

				
					
070：vue+cesium: 利用canvas设置线性渐变色材质

				
			

			

				

					大剑师兰特的GIS世界
				

				

					02-05
					
					1374
					
				

			

		

		

			
				
本示例的目的是介绍如何在vue+cesium中设置线性渐变色的材质，这里使用canvas的辅助方法。

			
		

	





	

		

			

				
					
cesium中级（一）使用渐变纹理

				
			

			

				

					processing
				

				

					04-07
					
					7375
					
				

			

		

		

			
				
官网实例
在渲染地形的时候，我们会使用渐变的纹理，来表示不同的地形高度，官网给出的实例为：Globe Material
var viewer = new Cesium.Viewer('cesiumContainer', {
            //2.本地图片
            imageryProvider: new Cesium.SingleTileImageryPr...

			
		

	





	

		

			

				
					
cesium示例教程100+目录

				
			

			

				

					大剑师兰特的GIS世界
				

				

					09-07
					
					3654
					
				

			

		

		

			
				
cesium示例教程100+旨在为开发者提供简单快捷的，。在每一个示例中，解释相应的API知识点，做到。目录中有链接的为已有文章，没链接的为目标文章，不断更新中…

			
		

	





	

		

			

				
					
cesium加载3dtiles白膜，通过shader自定义材质实现渐变效果并显示动态光环

				
			

			

				

					weixin_39150852的博客
				

				

					05-11
					
					5016
					
				

			

		

		

			
				
关键代码：
function loadTilesShader(tileset) {
  tileset.style = new Cesium.Cesium3DTileStyle({
    color: {
      conditions: [
        ['true', 'rgba(0, 127.5, 255 ,1)']
      ]
    }
  });
  //实现渐变效果
  tileset.tileVisible.addEventListener(function (tile) {
 

			
		

	





	

		

			

				
					
Cesium--3dtileset建筑渐变加动态线条

				
			

			

				

					12-18
				

			

		

		

			
				
Cesium不改源码，tileset建筑渐变加动态线条

			
		

	





	

		

			

				
					
Cesium添加自定义Canvas

				
			

			

				

					weixin_38366919的博客
				

				

					04-01
					
					2058
					
				

			

		

		

			
				
有时候需要添加自绘的图形，可以用以下代码实现：


    let that = this;
    this.viewer.entities.add({
        name: "Site Layer",
        rectangle: {
          coordinates: Cesium.Rectangle.fromDegrees(100.0, 20.0, 130.0, 35.0),
          //coordinates: new Cesium.BoundingRectan

			
		

	





	

		

			

				
					
cesium加载S3M白膜，通过分层设色实现渐变效果，设置点光源

				
			

			

				

					weixin_39150852的博客
				

				

					05-12
					
					4675
					
				

			

		

		

			
				
var hyp = null;
var layer = null;
//加载白膜
function fnOpenSCENE() {
  var promise = scene.open('http://www.supermapol.com/realspace/services/3D-CBDbuilding/rest/realspace');
  Cesium.when.all(promise, function () {
    //切换视角至模型位置
    scene.camera.setView({


			
		

	





	

		

			

				
					
cesium中使用canvas实现文字+图片的功能

				
			

			

				

					zengfeichuan的专栏
				

				

					11-30
					
					5146
					
				

			

		

		

			
				
Cesium.when.all([
  Cesium.Resource.fetchImage('../images/ajax-loader.gif')
   // Cesium.Resource.fetchImage('Assets/Textures/maki/airport.png')
   
    ],
    function(images) {...

			
		

	





	

		

			

				
					
Cesium中根据属性值（如降水量）创建渐变色的图层

				
			

			

				

					qq_39917149的博客
				

				

					06-27
					
					317
					
				

			

		

		

			
				
请注意，上述代码仅提供了一个基本示例，实际应用中你可能需要根据降水量的具体范围和需求来更精细地控制颜色渐变。Cesium没有直接提供像Mapbox那样的interpolate表达式来定义颜色分级，因此你可能需要手动编写逻辑来实现更复杂的颜色渐变效果。对于更高级的需求，你也可以考虑使用Cesium的CustomShader来实现完全自定义的着色效果。：遍历加载的GeoJSON数据中的每个多边形实体，并根据其属性值（如precipitation）设置相应的颜色。// 加载GeoJSON数据。

			
		

	





	

		

			

				
					
cesium 根据canvas可视区域中心视点旋转角度

				
			

			

				

					qq_68410134的博客
				

				

					06-08
					
					329
					
				

			

		

		

			
				
【代码】cesium 根据屏幕中心视点旋转角度。

			
		

	





	

		

			

				
					
Cesium 使用Canvas 为billboard构造图片

				
			

			

				

					志远的博客
				

				

					05-20
					
					3546
					
				

			

		

		

			
				
目录

一、需求来源

二、实现方法

三、效果

一、需求来源

1. 提升网页渲染性能，在使用cesium加载label实体的时候会自动将文字渲染成图片，这一过程中效率较慢，如果需要绘制大量label，利用canvas建议自己构造图片，然后利用billboard进行加载。

2. 目标需要使用特殊字体进行绘制，利用canvas构造文字。



二、实现方法

js代码：


// 创建二维画布
const canvas = document.createElement('canvas');
const.

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
是席木木啊

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

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

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

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值