Cesium 视频贴图

原创

已于 2024-03-01 09:29:46 修改 · 1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2024-02-29 17:49:41 首次发布

本文介绍了在Cesium中如何实现视频或图像在圆形和矩形中的显示，包括不使用entity模式而是用Primitive进行渲染，并详细阐述了创建圆和矩形、创建纹理、创建渲染的步骤，最终展示了圆形图像和矩形视频播放的效果。

一、创作灵感

a、在cesium中视频或者图像在矩形或者圆形中显示

b、在不使用entity模式下，使用Primitive进行视频或者图像渲染

c、在使用Primitive的前提下，需要进行视频或者图像贴地

d、不贴地，请跳转到我的另外一份日志纹理贴图

二、创建步骤

1、创建圆形或者矩形

创建圆

1、传入圆心的世界坐标和半径创建

2、将圆心的坐标转换为经纬度坐标

3、转换完成后，利用Turf的circle函数生产圆的点位

/**
 * 将世界坐标系转换为球面坐标系
 * @param {Cartesian3} position
 * @return {
  
  {alt: number, lon: number, lat: number}}
 */
export const Cartesian3ToWgs84 = (position) => {
  let cartographic = ellipsoid.cartesianToCartographic(position);
  let lon = CesiumMath.toDegrees(cartographic.longitude);
  let lat = CesiumMath.toDegrees(cartographic.latitude);
  let alt = cartographic.height;
  return {
    lon,
    lat,
    alt,
  };
};
/**
 * 根据半径和中心点，获取圆形
 * @param center
 * @param radius
 * @return {Cartesian3[]}
 */
export const getCircle = (center, radius) => {
  let center84 = Cartesian3ToWgs84(center);
  let centerP = [center84.lon, center84.lat];
  let circleInfo = circle(centerP, radius / 1000.0, options);
  return circleInfo.geometry.coordinates[0].map((item) => {
    return Cartesian3.fromDegrees(item[0], item[1]);
  });
};

创建矩形

1、模式1，将坐标转换为经纬度坐标，然后利用turf的envelope函数计算出5个顶点，转换顶点坐标为世界坐标