Cesium基础教程篇七

已于 2024-07-26 17:24:33 修改
阅读量590 收藏 19
点赞数 11
文章标签： javascript
于 2024-07-26 16:42:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43700915/article/details/140715995
版权

Cesium基础教程篇七

文章目录

前言

Cesium官网：官网链接
Cesium 是一个开源的、高性能的 3D 地球和地图可视化平台，它允许开发者创建基于 Web 的、交互式的地理空间应用程序。Cesium 的核心是一个 WebGL 驱动的引擎，它能够渲染大规模的地理数据集，支持高精度的地球模型和动态数据可视化。

一、Entity的介绍与使用

Entity 是Cesium中用于绘制几何图形的重要接口，比如在地球上绘制我们最熟悉的点、线、面。但是Cesium作为一个3D GIS引擎，它还内置了大量的3D图形对象，Entity类是用于绘制这些图形的一个重要接口不是唯一接口，Cesium还有Primitive和DrawCommand用于绘制图形）。

  1. Entity：官网沙盘地址
  2. 官网API：Entity API
    在这里插入图片描述
    api中介绍的大部分图形都在红框中，先大致了解些当中的几个主要参数
availability：有效性，此属性用于设置Entity对象的显示时间，即在指定的时间内显示。 
position： 位置，设置Entity实体的位置，笛卡尔坐标
orientation ：方向，用于设置实体对象的方向，比如添加一个模型后，这个模型朝东还是朝西
viewFrom ：此属性用于锁定实体视角时的偏移量 Cartesian3，比如要将相机视角锁定到一个正在行驶的车辆模型上，可以通过viewer.trackedEntity 进行设置，viewFrom用于设置锁定视角时的偏移量。
parent： 设置Entity的父级Entity，表示Entity可以嵌套使用。
  1. 使用方式：创建的Entity要想在场景中被渲染出来，需要添加到viewer.entitites这个集合中。
	let entity=new Cesium.Entity({
	     position:position,
	     point:{
	         pixelSize:20,
	         color:Cesium.Color.RED
	     }
	 })
	viewer.entities.add(entity);

在这里插入图片描述

二、几何图形的简要学习

1. PointGraphic 点

1.1 官网API

在这里插入图片描述

1.2 参数介绍

show： 是否显示

pixelSize： 像素大小，即这个点显示的大小，单位为像素，比如分别设置10，和20对比
在这里插入图片描述

heightReference：

NONE：绝对高度，即从椭球面为0开始算
CLAMP TO GROUND：贴模型或者贴地形或者都贴，有三种类型
RELATIVE TO GROUND：高度相对于地形和模型
CLAMP TO TERRAIN：贴在地形上
RELATIVE TO TERRAIN ：高度相对于地形
CLAMP TO 3D TILE：贴在模型上
RELATIVE_T0_3D_TILE：高度相对模型
在这里插入图片描述

outlineColor：边线颜色

outlineWidth： 边线宽度（像素）
在这里插入图片描述

scaleByDistance： 根据距离缩放（距离指相机到点的距离new Cesium.NearFarScalar(near, nearValue, far, farValue)，远近坐标的缩放比例的设置）
在这里插入图片描述

translucencyByDistance： 根据距离设置透明度（距离指相机到点的距离new Cesium.NearFarScalar(near, nearValue, far, farValue)，远近坐标的透明度的设置）
在这里插入图片描述

distanceDisplayCondition： 根据距离显示隐藏（距离指相机到点的距离）
在这里插入图片描述

disableDepthTestDistance： 深度测试的距离，可以用于屏蔽遮挡（旋转时多少距离内可以不被其他场景遮挡住）
在这里插入图片描述
该章节仅介绍点的知识，后面有需要私信再出点线面体广告牌墙体等

三、DataSource的管理方式

我们可以通过 CustomDataSource 类来对添加到场景中的实体对象进行分类控制（比如统一控制显隐状态）前面我们创建的Entity都是通过viewer.entities.add方法添加到场景中进行渲染的，当我们添加到viewer.entities中的实体对象比较多时想要控制部分实体的显隐会变得比较麻烦。
在这里插入图片描述

	const dataSource = new Cesium.CustomDataSource('data');
	const entity = dataSource.entities.add({
	   position : Cesium.Cartesian3.fromDegrees(x, y, z),
	   billboard : {
	       image : 'xxx.png'
	   }
	});
	viewer.dataSources.add(dataSource);

然后通过dataSource.show=visible去控制显示隐藏比entities去控制更方便

四、Entity的简单材质介绍

1. cesium内置材质：我们将 Color 类型的值设置给实体对象几何图形的material属性，material属性用于控制实体对象几何图形的外观样式。除了 Color 以外，material属性还支持实现了MaterialProperty 接口的类的实例。

1.1：ColorMaterialProperty：颜色材质，前面我们直接为material属性设置一Color值，最后这个Color值会转换成ColorMaterialProperty类型。

 let position = Cesium.Cartesian3.fromDegrees(-75.59670696331766, 40.0387958759308, 51);
 let entity = new Cesium.Entity({
     position: position, 
     plane: {
         plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_X,1.0),
         dimensions: new Cesium.Cartesian2(100, 100),
         material:new Cesium.ColorMaterialProperty(Cesium.Color.RED),
         //material:Cesium.Color.RED
     }
 })
 viewer.entities.add(entity);

在这里插入图片描述

1.2：ImageMaterialProperty：图片材质（支持网络图片、图片元素、Canvas元素、视频元素）

let entity = new Cesium.Entity({
     position: position,
     plane: {
         plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_X,1.0),
         dimensions: new Cesium.Cartesian2(100, 100),
         material:new Cesium.ImageMaterialProperty({
             image:"xxx.png",
             transparent:true
         })
     }
 })
 viewer.entities.add(entity);

在这里插入图片描述

1.3：GridMaterialProperty：格网材质

let entity = new Cesium.Entity({
     position: position,
     plane: {
         plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_X,1.0),
         dimensions: new Cesium.Cartesian2(100, 100),
         material:new Cesium.GridMaterialProperty({ })
     }
 })
 viewer.entities.add(entity);

在这里插入图片描述

1.4：StripeMaterialProperty：条纹材质

let entity = new Cesium.Entity({
     position: position,
     plane: {
         plane: new Cesium.Plane(Cesium.Cartesian3.UNIT_X,1.0),
         dimensions: new Cesium.Cartesian2(100, 100),
         material: new Cesium.StripeMaterialProperty({
             repeat: 10
         })
     }
 })
viewer.entities.add(entity);

在这里插入图片描述

1.5：PolylineGlowMaterialProperty：发光线材质（ 仅用于 PolylineGraphic ）

let positions = [
     x1, y1,z1,
     x2, y2, z2
 ]
 positions = Cesium.Cartesian3.fromDegreesArrayHeights([].concat.apply([], positions));
 let entity = new Cesium.Entity({
     polyline: {
         positions: positions,
         width:10,
         material: new Cesium.PolylineGlowMaterialProperty({
             color: Cesium.Color.fromCssColorString('#FF4500'),
             glowPower: 0.3,
             opacity: 0.6,
         })
     }
 })
 viewer.entities.add(entity);

1.6：PolylineOutlineMaterialProperty：边线材质（ 仅用于 PolylineGraphic ）

let positions = [
     x1, y1,z1,
     x2, y2, z2
 ]
 positions = Cesium.Cartesian3.fromDegreesArrayHeights([].concat.apply([], positions));
 let entity = new Cesium.Entity({
     polyline: {
         positions: positions,
         width:10,
         material: new Cesium.PolylineOutlineMaterialProperty({  
             color: Cesium.Color.fromCssColorString('#FF4500'),
             outlineWidth:2,
             outlineColor:Cesium.Color.BLUE
         })
     }
 })
 viewer.entities.add(entity);

在这里插入图片描述
cesium官网还有更多材质，可搜索MaterialProperty查看详细文档

2. 自定义材质

Cesium已经为我们定义了很多类型的材质，但是在实际项目中，我们往往还需要定义自己的材质类型，以满足项目的需求。自定义材质类型，我们需要实现 MaterialProperty 接口。
在这里插入图片描述
以官方文档为例尝试自定义流动线材质
1、首先定义材质

	function PolylineFlowMaterialProperty(options) {
        this._definitionChanged = new Cesium.Event(); 
        this._image = options.image;
    }
    Object.defineProperties(PolylineFlowMaterialProperty.prototype, {
        isConstant: {
            get: function () {
                return false;
            },
        },
        definitionChanged: {
            get: function () {
                return this._definitionChanged;
            },
        },
    });
    PolylineFlowMaterialProperty.prototype.getType = function (time) {
        return "PolylineFlow";
    };
    PolylineFlowMaterialProperty.prototype.getValue = function (time, result) {
        if (!Cesium.defined(result)) {
            result = {};
        } 
        result.image = this._image;
        return result;
    };
    PolylineFlowMaterialProperty.prototype.equals = function (other) {
        return (
            this === other || //
            (other instanceof PolylineFlowMaterialProperty && //
                Property.equals(this._image, other._image))
        );
    };

属性：
isConstant 是否为常量，我们直接返回false
definitionChanged 为一个Event类型，我们new 了一个Event为其赋值

方法：
getType 获取材质的类型，字符串标识，我们设置为‘PolylineFlow’
getValue 获取相关数据，我们只需要一个图片参数，将其从PolylineFlowMaterialProperty中传递到result
equals 用于判断两个材质是否相同，这是为了进行对象重用，当两个材质的参数都一摸一样，那代表是一样的，就不需要创建两个对象。

2、设置到cesium材质当中，并设置fabric属性

Cesium.Material.PolylineFlowType = 'PolylineFlow';
Cesium.Material._materialCache.addMaterial(Cesium.Material.PolylineFlowType, {
        fabric: {
            type: Cesium.Material.PolylineFlowType,
            uniforms: { 
                image: "",
            },
            source: `
            czm_material czm_getMaterial(czm_materialInput materialInput)  {
                   czm_material material = czm_getDefaultMaterial(materialInput);
                   vec2 st = materialInput.st; //纹理坐标
                   float t =czm_frameNumber / 100.0;
                   vec4 imageColor =texture(image, vec2(fract( 5.*st.s - t),st.t));//从图片中采样颜色值
                   material.diffuse =imageColor.rgb * 1.5;
                   material.alpha =imageColor.a ;
                   return material;
             }`
        },
        translucent: function (material) {
            return true
        }
 })

着色器中的uniforms参数会通过材质类的getValue获取，source是材质类的着色器代码，这是一个固定的结构，在czm_getMaterial方法中计算着色器结果。

3、使用自定义材质

	let positions = [
        x1, y1, z1,
        x2, y2, z2
    ]
    positions = Cesium.Cartesian3.fromDegreesArrayHeights([].concat.apply([], positions));
    let entity = new Cesium.Entity({
        polyline: {
            positions: positions,
            width: 10,
            material: new PolylineFlowMaterialProperty({
                image: "xxx.png"
            })
        }
    })
    viewer.entities.add(entity);

4、效果
在这里插入图片描述
5、更多内容就如第一章说的本地运行源码找到ColorMaterialProperty.js，参考学习源码知识了解材质
6、彩蛋：可以使用components属性代替addMaterial方法中对象参数的source，学会去源码找答案

总结

这是第七章Entity基础知识学习，更多进一步的cesium相关知识请关注我，带你更深层次了解cesium

后续更多和cesium有关的更深度的内容可以在创奇社区找我 点击进入创奇社区

Cesium进阶学习
关注
  • 11
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Cesium基础教程插件
07-25
cesium1.117源码包
Cesium中文教程V1.0.pdf
06-18
CesiumJS Web端数据可视化- - - Cesium中文教程，欢迎交流学习！后续会根据官网状态更新哦！期待Cesium for Unreal~！~！
Cesium基础教程篇八
weixin_43700915的博客
07-26 538
cesium基础教程篇Cesium3DTileset的知识学习
Cesium基础教程篇六
weixin_43700915的博客
07-26 251
Cesium影像、坐标系、相机等学习
Cesium基础教程篇九
weixin_43700915的博客
07-29 194
cesium基础教程篇交互的知识学习
Cesium基础教程篇十
最新发布
weixin_43700915的博客
07-29 168
cesium基础教程篇数学计算类的知识学习
Cesium基础教程篇二
weixin_43700915的博客
07-25 363
Cesium ion的使用和Cesium部件的学习
Cesium基础教程篇三
weixin_43700915的博客
07-25 217
Cesium中主类Viewer的学习
Cesium基础教程篇一
weixin_43700915的博客
07-25 368
Ceisum基础课程之ceisum的安装下载（包括源码的方式）
Cesium基础教程篇四
weixin_43700915的博客
07-25 179
Ceisum的外部环境学习（光照、昼夜、月亮、大气等）
Cesium基础教程篇五
weixin_43700915的博客
07-26 158
Cesium地形的学习
Cesium基础知识讲解,cesium开发教程
09-10
在"Cesium基础知识讲解"的PDF教程中，你将深入理解Cesium的核心概念、基本使用方法以及如何通过它来构建自己的项目。 1. **Cesium简介** Cesium起源于洛克希德·马丁公司，现在由分析系统联盟（Analytical ...
Cesium1.7教程.pdf
03-23
根据官网最新文档整理，每个细节一清二楚，如cesium基础知识讲解，包含 开发环境搭建、cesium基础知识、数据处理及服务发布 ，各种效果的实现等讲解。，免去了您查英文文档的麻烦。内附各种实例，包括效果图和源码，...
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 350
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
【React 】开发环境搭建详细指南
lph159的博客
07-24 1205
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
VUE中的重点*
qq_61132537的博客
07-22 1067
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 217
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
cesium基础教程
08-26
Cesium是一个用于构建地球上可视化应用程序的开源JavaScript库。它使用WebGL技术来呈现3D场景，并提供了丰富的地理信息系统（GIS）功能。以下是一个基础教程，帮助您入门Cesium： 1. 安装Cesium：您可以从Cesium的官方网站（https://cesium.com/）下载Cesium的最新版本。您可以选择使用Cesium的开源版或商业版。 2. 创建HTML文件：创建一个新的HTML文件，命名为index.html，并将以下代码添加到文件中： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Cesium Basic Tutorial</title> <style> #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="cesiumContainer"></div> <script src="path/to/cesium/Cesium.js"></script> <script> // 在这里编写您的Cesium代码 </script> </body> </html> ``` 确保将`path/to/cesium/Cesium.js`替换为Cesium库文件的实际路径。 3. 创建一个简单的地图：在`<script>`标签中添加以下代码，以创建一个基本的地图场景： ```javascript var viewer = new Cesium.Viewer('cesiumContainer'); ``` 4. 运行应用程序：将index.html文件保存，并在兼容的Web浏览器中打开它。您应该能够看到一个简单的Cesium地图场景。 这只是一个入门级的教程，Cesium提供了许多功能和API，可用于构建更复杂的地球可视化应用程序。您可以查阅Cesium的官方文档（https://cesium.com/docs/）和示例代码，以了解更多关于Cesium的信息和用法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Cesium进阶学习

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

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

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

打赏作者

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

抵扣说明：

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

余额充值