您的位置：首页 > 财经 > 产业 > 杭州营销网站建设平台_福建省最新消息今天_市场营销手段13种手段_深圳网络优化推广公司

杭州营销网站建设平台_福建省最新消息今天_市场营销手段13种手段_深圳网络优化推广公司

2025/4/8 2:59:14 来源：https://blog.csdn.net/m0_51244077/article/details/147003493  浏览:  次   关键词：杭州营销网站建设平台_福建省最新消息今天_市场营销手段13种手段_深圳网络优化推广公司
杭州营销网站建设平台_福建省最新消息今天_市场营销手段13种手段_深圳网络优化推广公司

文章目录

    • cesium 材质 与 交互 以及 性能相关介绍
      • 1. Cesium 材质与着色器简介
      • 2. 具体实例应用核心代码及解释
      • 3. 代码解释
    • Cesium 交互
      • 1. 常见交互和事件类型
      • 2. 示例代码及解释
      • 3. 代码解释
    • cesium 性能优化
      • 数据加载与管理
      • 渲染优化
      • 相机与场景管理
      • 代码优化
      • 服务器端优化
    • 案例分享
      • 1. 数据分块与按需加载
        • 代码示例
        • 代码解释
      • 2. 视锥体剔除
        • 代码示例
        • 代码解释
      • 3. 优化事件处理（节流）
        • 代码示例
        • 代码解释

cesium 材质 与 交互 以及 性能相关介绍

1. Cesium 材质与着色器简介

Cesium 是一个用于创建基于 Web 的地理信息系统（GIS）应用的开源 JavaScript 库。材质和着色器在 Cesium 中起着重要作用，它们能让你自定义地理场景的外观。

  • 材质（Materials）：Cesium 中的材质定义了对象表面的视觉属性，如颜色、光泽度、透明度等。Cesium 提供了多种内置材质，也允许你自定义材质。
  • 着色器（Shaders）：着色器是运行在 GPU 上的小程序，用于计算图形的颜色和光照效果。在 Cesium 里，你可以通过编写自定义的着色器代码来实现复杂的视觉效果。

2. 具体实例应用核心代码及解释

以下是一个简单的示例，展示如何在 Cesium 中使用自定义材质和着色器来创建一个具有动态颜色变化的矩形。

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><title>Cesium Material and Shader Example</title><script src="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Cesium.js"></script><link href="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Widgets/widgets.css" rel="stylesheet"><style>html,body,#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}</style>
</head><body><div id="cesiumContainer"></div><script>// 初始化 Cesium Viewerconst viewer = new Cesium.Viewer('cesiumContainer');// 定义自定义材质const customMaterial = new Cesium.Material({fabric: {type: 'CustomMaterial',uniforms: {time: 0},source: `czm_material czm_getMaterial(czm_materialInput materialInput){czm_material material = czm_getDefaultMaterial(materialInput);// 根据时间计算颜色vec3 color = vec3(sin(time), cos(time), 0.5);material.diffuse = color;return material;}`},translucent: false});// 创建矩形实体并应用自定义材质const rectangle = viewer.entities.add({rectangle: {coordinates: Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0),material: customMaterial}});// 动画更新时间const clock = viewer.clock;clock.onTick.addEventListener(function () {const currentTime = Cesium.JulianDate.toSeconds(clock.currentTime);customMaterial.uniforms.time = currentTime;});</script>
</body></html>

3. 代码解释

  • 初始化 Cesium Viewer：通过 new Cesium.Viewer('cesiumContainer') 创建一个 Cesium 查看器，将其挂载到 cesiumContainer 元素上。
  • 定义自定义材质：
    • 使用 Cesium.Material 创建一个自定义材质。
    • fabric 对象包含材质的类型、制服（uniforms）和着色器源代码。
    • uniforms 中的 time 是一个可变的全局变量，用于控制颜色的变化。
    • source 中的着色器代码 czm_getMaterial 函数计算材质的颜色。这里根据时间 time 计算颜色，使颜色随时间动态变化。
  • 创建矩形实体并应用材质：使用 viewer.entities.add 创建一个矩形实体，并将自定义材质应用到矩形上。
  • 动画更新时间：通过监听时钟的 onTick 事件，在每一帧更新 time 制服的值，从而实现颜色的动态变化。

这个示例展示了如何在 Cesium 中使用自定义材质和着色器来创建一个具有动态效果的地理对象。你可以根据需要修改着色器代码，实现更复杂的视觉效果。

Cesium 交互

在 Cesium 里，交互和事件能让用户与地理场景进行互动，进而实现像点击、拖动、鼠标移动等操作。下面为你详细介绍常见的交互和事件以及对应的示例代码。

1. 常见交互和事件类型

  • 鼠标事件：像左键点击（LEFT_CLICK）、左键双击（LEFT_DOUBLE_CLICK）、鼠标移动（MOUSE_MOVE）、右键点击（RIGHT_CLICK）等。
  • 触摸事件：例如触摸开始（PINCH_START）、触摸移动（PINCH_MOVE）、触摸结束（PINCH_END）等。
  • 相机事件：相机移动开始（CAMERA_MOVE_START）、相机移动结束（CAMERA_MOVE_END）等。

2. 示例代码及解释

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><title>Cesium Interaction and Events Example</title><script src="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Cesium.js"></script><link href="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Widgets/widgets.css" rel="stylesheet"><style>html,body,#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}</style>
</head><body><div id="cesiumContainer"></div><script>// 初始化 Cesium Viewerconst viewer = new Cesium.Viewer('cesiumContainer');// 鼠标左键点击事件const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);handler.setInputAction(function (movement) {const ray = viewer.camera.getPickRay(movement.position);const cartesian = viewer.scene.globe.pick(ray, viewer.scene);if (cartesian) {const cartographic = Cesium.Cartographic.fromCartesian(cartesian);const longitude = Cesium.Math.toDegrees(cartographic.longitude);const latitude = Cesium.Math.toDegrees(cartographic.latitude);console.log(`Clicked at longitude: ${longitude}, latitude: ${latitude}`);}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);// 鼠标移动事件handler.setInputAction(function (movement) {const ray = viewer.camera.getPickRay(movement.endPosition);const cartesian = viewer.scene.globe.pick(ray, viewer.scene);if (cartesian) {const cartographic = Cesium.Cartographic.fromCartesian(cartesian);const longitude = Cesium.Math.toDegrees(cartographic.longitude);const latitude = Cesium.Math.toDegrees(cartographic.latitude);console.log(`Mouse moved to longitude: ${longitude}, latitude: ${latitude}`);}}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);// 相机移动结束事件viewer.scene.camera.moveEnd.addEventListener(function () {const position = viewer.scene.camera.positionCartographic;const longitude = Cesium.Math.toDegrees(position.longitude);const latitude = Cesium.Math.toDegrees(position.latitude);const height = position.height;console.log(`Camera moved to longitude: ${longitude}, latitude: ${latitude}, height: ${height}`);});</script>
</body></html>

3. 代码解释

  • 初始化 Cesium Viewer：借助 new Cesium.Viewer('cesiumContainer') 创建一个 Cesium 查看器，将其挂载到 cesiumContainer 元素上。
  • 鼠标左键点击事件：
    • 利用 Cesium.ScreenSpaceEventHandler 创建一个事件处理器。
    • 通过 setInputAction 方法为左键点击事件（Cesium.ScreenSpaceEventType.LEFT_CLICK）绑定处理函数。
    • 在处理函数里，运用 viewer.camera.getPickRay 获取鼠标点击位置的射线，再使用 viewer.scene.globe.pick 得到射线与地球表面的交点坐标，最后将其转换为经纬度并输出。
  • 鼠标移动事件：
    • 同样使用 setInputAction 方法为鼠标移动事件（Cesium.ScreenSpaceEventType.MOUSE_MOVE）绑定处理函数。
    • 在处理函数中，获取鼠标移动位置的射线与地球表面的交点坐标，转换为经纬度并输出。
  • 相机移动结束事件：
    • 借助 viewer.scene.camera.moveEnd.addEventListener 为相机移动结束事件绑定处理函数。
    • 在处理函数中，获取相机的当前位置，转换为经纬度和高度并输出。

这些示例展示了在 Cesium 中如何处理常见的交互和事件，你可以根据需求添加更多的交互逻辑。

cesium 性能优化

在使用 Cesium 开发地理信息系统（GIS）应用时，性能优化是至关重要的，它能显著提升用户体验，特别是在处理大规模地理数据和复杂场景时。以下从多个方面介绍 Cesium 性能优化的方法：

数据加载与管理

  • 数据压缩
    • 对地形、影像等数据进行压缩处理，例如使用有损压缩算法处理影像数据，能在不明显降低视觉效果的前提下，大幅减小数据体积，加快数据的下载和加载速度。
    • 对于矢量数据，可以采用数据编码算法（如 GeoJSON 的 TopoJSON 编码）进行压缩，减少数据传输量。
  • 数据分块与按需加载
    • 将大规模的地理数据分割成小块，根据用户的视野范围和相机位置，只加载当前可见区域的数据，避免一次性加载过多数据导致内存占用过高和加载时间过长。
    • 利用 Cesium 的 ImageryLayer 和 TerrainProvider 等类的相关方法，实现数据的分块加载和动态更新。
  • 数据缓存
    • 利用浏览器的本地存储（如 localStorage 或 IndexedDB）对已加载的数据进行缓存，当用户再次访问相同数据时，直接从本地缓存中读取，减少网络请求。
    • 对于频繁使用的地理数据，还可以在服务器端设置缓存机制，提高数据的响应速度。

渲染优化

  • 简化模型与几何数据
    • 对复杂的 3D 模型进行简化处理，减少模型的面数和顶点数，降低 GPU 的渲染负担。可以使用 3D 建模软件（如 Blender）或专业的模型简化工具进行处理。
    • 对于地理要素的几何数据，采用适当的简化算法（如 Douglas - Peucker 算法）进行简化，在保证数据精度的前提下，减少数据量。
  • 视锥体剔除
    • 视锥体剔除是一种常见的渲染优化技术，通过判断物体是否在相机的视锥体范围内，只渲染位于视锥体内的物体，避免对不可见物体进行不必要的渲染计算。
    • Cesium 会自动进行视锥体剔除，但在某些复杂场景下，可能需要手动调整相关参数以提高剔除效率。
  • 减少渲染状态切换
    • 渲染状态切换（如材质、纹理、着色器等的切换）会增加 GPU 的开销，尽量减少渲染状态的切换次数。可以将具有相同渲染状态的物体进行分组渲染，提高渲染效率。

相机与场景管理

  • 相机控制优化
    • 合理设置相机的移动速度和缩放范围，避免相机快速移动或缩放时导致大量数据的频繁加载和渲染。
    • 实现平滑的相机过渡效果，减少用户视觉上的卡顿感。
  • 场景分层与隐藏
    • 将场景中的元素进行分层管理，根据用户的需求和操作，动态显示或隐藏某些图层，减少不必要的渲染。
    • 例如，在进行大范围浏览时，可以隐藏一些细节图层，只显示主要的地理要素。

代码优化

  • 减少不必要的计算
    • 在代码中避免进行不必要的重复计算，特别是在循环中。可以将一些常量和不变的计算结果提前计算并缓存起来，避免每次都进行重复计算。
  • 优化事件处理
    • 合理管理事件监听器，避免在事件处理函数中进行复杂的计算和操作，防止事件处理函数执行时间过长导致页面卡顿。
    • 对于频繁触发的事件（如鼠标移动事件），可以采用节流（throttle）或防抖（debounce）技术进行优化。

服务器端优化

  • 分布式服务器架构
    • 采用分布式服务器架构，将地理数据存储和处理分布在多个服务器节点上，提高数据的并发处理能力和响应速度。
  • CDN 加速
    • 使用内容分发网络（CDN）来分发地理数据和静态资源，CDN 节点分布在全球各地，能够将数据更快速地传输给用户，减少网络延迟。

通过以上多个方面的优化，可以显著提升 Cesium 应用的性能，为用户提供更加流畅和高效的使用体验。

案例分享

下面为你提供一些基于前面提到的性能优化方法的具体 Cesium 案例应用代码及解释。

1. 数据分块与按需加载

代码示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><title>Cesium Data Loading Optimization</title><script src="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Cesium.js"></script><link href="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Widgets/widgets.css" rel="stylesheet"><style>html,body,#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}</style>
</head><body><div id="cesiumContainer"></div><script>// 初始化 Cesium Viewerconst viewer = new Cesium.Viewer('cesiumContainer');// 添加影像图层，Cesium 会自动处理分块加载const imageryProvider = new Cesium.UrlTemplateImageryProvider({url: 'https://your - tile - server-url/{z}/{x}/{y}.png'});viewer.imageryLayers.addImageryProvider(imageryProvider);</script>
</body></html>
代码解释

此代码借助 UrlTemplateImageryProvider 添加影像图层，Cesium 会依据用户视野范围自动处理分块加载，仅加载当前可见区域的影像瓦片，从而减少数据加载量。

2. 视锥体剔除

代码示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><title>Cesium Frustum Culling</title><script src="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Cesium.js"></script><link href="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Widgets/widgets.css" rel="stylesheet"><style>html,body,#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}</style>
</head><body><div id="cesiumContainer"></div><script>const viewer = new Cesium.Viewer('cesiumContainer');// 添加多个实体for (let i = 0; i < 100; i++) {const longitude = Cesium.Math.toRadians(-100 + i);const latitude = Cesium.Math.toRadians(30);const position = Cesium.Cartesian3.fromRadians(longitude, latitude);viewer.entities.add({position: position,point: {pixelSize: 10,color: Cesium.Color.RED}});}</script>
</body></html>
代码解释

代码中添加了多个点实体，Cesium 会自动进行视锥体剔除，仅渲染位于相机视锥体内的实体，避免对不可见实体进行渲染计算。

3. 优化事件处理（节流）

代码示例
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"><title>Cesium Event Throttle</title><script src="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Cesium.js"></script><link href="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Widgets/widgets.css" rel="stylesheet"><style>html,body,#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}</style>
</head><body><div id="cesiumContainer"></div><script>const viewer = new Cesium.Viewer('cesiumContainer');// 节流函数function throttle(func, delay) {let timer = null;return function () {if (!timer) {func.apply(this, arguments);timer = setTimeout(() => {timer = null;}, delay);}};}const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);const throttledMouseMove = throttle(function (movement) {const ray = viewer.camera.getPickRay(movement.endPosition);const cartesian = viewer.scene.globe.pick(ray, viewer.scene);if (cartesian) {const cartographic = Cesium.Cartographic.fromCartesian(cartesian);const longitude = Cesium.Math.toDegrees(cartographic.longitude);const latitude = Cesium.Math.toDegrees(cartographic.latitude);console.log(`Mouse moved to longitude: ${longitude}, latitude: ${latitude}`);}}, 200);handler.setInputAction(throttledMouseMove, Cesium.ScreenSpaceEventType.MOUSE_MOVE);</script>
</body></html>
代码解释

该代码定义了一个节流函数 throttle，用于处理鼠标移动事件。通过节流，避免了鼠标移动事件过于频繁触发处理函数，减少了不必要的计算，提升了性能。

版权声明:

本网仅为发布的内容提供存储空间，不对发表、转载的内容提供任何形式的保证。凡本网注明“来源：XXX网络”的作品，均转载自其它媒体，著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处。

我们尊重并感谢每一位作者，均已注明文章来源和作者。如因作品内容、版权或其它问题，请及时与我们联系，联系邮箱：809451989@qq.com，投稿邮箱：809451989@qq.com

最新新闻

热搜词

图集图片的骨骼编辑 Day0032 生病d5 wsl安装开发环境 Kong网关部署研究 儿子的画 基于PX4和Ardupilot固件下自定义MAVLink消息测试（QGroundControl和Mission Planner）

声明：本站所有新闻及新闻图片来源于其他网站，如有侵权，请及时联系我们！

客户服务 | 关于我们 | 版权声明

版权所有：

Copyright 2024 尧图网 All Rights Reserved.QQ:809451989