青理工大work总结知识点 2

混沌凡人

已于 2022-10-13 13:50:20 修改

阅读量290

点赞数 1

分类专栏：青理大工作总结文章标签：前端 javascript 开发语言

于 2022-09-05 15:33:36 首次发布

本文链接：https://blog.csdn.net/PinPinAnan/article/details/126695571

版权

青理大工作总结专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、cesium的认识

Cesium是一个跨平台、跨浏览器的展示三维地球和地图的Javas库。

Cesium使用WebGL来进行硬件加速图形，使用时不需要任何插件支持，但是浏览器必须支持WebGL；

Cesium是基于Apache2.0许可的开源程序。它可以免费的用于商业和非商业用途。

Cesium Sandcastle

Cesium中文api文档 | Index - Cesium Documentation

cesium能做什么

支持2D、2.5D、3D形式的地图展示
可以绘制各种几何图形、高亮区域、支持导入图片、甚至3D模型等多种数据可视化展示
可用于动态数据可视化并提供良好的触摸支持，支持绝大多数的浏览器和mobile（移动端）
Cesium还支持基于时间轴的动态数据展示

二、Vue2脚手架+webpack+cesium的项目创建

1、首先通过 vue create demo 创建一个vue脚手架项目

2、下载cesium 包可以通过官网下载js文件导入 or 运行 npm i cesium 下载cesium资源

Downloads – Cesium

下载好包之后我们会发现在

中找到

然后将Cesium文件复制粘贴到public文件下

之后在我们的index.html文件下面导入我们复制出来的Cesium中的js和css文件

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="./Cesium/Widgets/widgets.css">

    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script src="./Cesium/Cesium.js"></script>
  </body>
</html>

最后在我们的Page.json 文件中

新添加此条配置信息

到此我们的环境配置完成

三、cesium的细化知识点

通过new创建新的三维容器 cesiumContainer 就是div的id值

不过通过 new Cesium创建容器的方式不只是VIewer这一种还有

两者的区别就是 Viewer创建的容器会携带一些其他控件而CesiumWidget则没有

clock用来记录时间，毕竟三维场景需要进行动态展示，需要通过时间来确定某一帧的绘制内容。 container则是构造函数的参数，也就是传入的div，这里记录一下。 canvas则是在container上构建的Canvas类的对象，可以据此获取WebGL绘制的画笔。 screenSpaceEventHandler则是对Canvas对象上各种鼠标的交互事件的封装，方便传递给三维场景。三维场景干之后可以据此改变相机姿态等。 scene则承载着整个三维场景中的对象。

Scene中装载了所有的三维对象

Scene中有一些内置的图元对象：地球（globe）、skyBox（天空盒）、sun（太阳）、moon（月亮）等等；另外还有两个用来由用户自行控制存放对象的数组：primitives和groundPrimitives。

图元类对应一个三维渲染对象

图元是Cesium用来绘制三维对象的一个独立的结构。图元类有：Globe、Model、Primitive、BillboardCollection、ViewportQuad等。

Globe绘制的是全球地形，它需要两个东西，一个是地形高程信息，另外一个是影像图层，也就是地球的表皮。影像图层可以叠加多个，但是地形高程只能有一个。整个地形的绘制也是渐进式的，即视线看到的地方才会去调度相关的地形高程信息，找到对应位置的地形影像贴上。然而Globe只是一个图元。由此可见一个图元可以相当复杂。

需要注意的地方： 1 图元没有基类，但是所有的图元都会有update函数； 2 Primitive类直译过来是图元的意思，但是它不是基类，只是图元的一种，起作用是用来绘制各种几何体。 3 图元是一类对象绘制的集合，可以包含多个WebGL的drawcall。

Model 是存放外部导入模型的对象传参方式为 url

Billboards 是图片 labels是文字是三维中的文字（容易模糊） points是一个点（）

ViewportQuad 画一个平面不会被其他三维对象遮挡（div）

Primitive （图源）只是图源的一种

总结

Cesium通过CesiumWidget类管理窗口div；
通过Scene来管理所有的三维场景对象；
三维场景对象的构建则是通过图元来创建；

整个CesiumWidget的结构如下所示：

组件显隐

通过js代码控制

    var viewer = new Cesium.Viewer("cesiumContainer", {
      animation: false, // 动画小组件
      baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
      fullscreenButton: false, // 全屏组件
      vrButton: false, // VR模式
      geocoder: false, // 地理编码（搜索）组件
      homeButton: false, // 首页，点击之后将视图跳转到默认视角
      infoBox: false, // 信息框
      sceneModePicker: false, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
      selectionIndicator: false, //是否显示选取指示器组件
      timeline: false, // 时间轴
      navigationHelpButton: false, // 帮助提示，如何操作数字地球。
      // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
      navigationInstructionsInitiallyVisible: false,
    });

    // 隐藏logo
    viewer._cesiumWidget._creditContainer.style.display = "none";

通过css代码控制

Viewer类属性

imageryLayers 影像数据
terrainProvider 地形数据
dataSources 矢量数据
entities 几何实体集合（用于空间数据可视化）
Widgets 组件，即Viewer初始化界面上的组件
Camera 相机
Event 事件，鼠标事件、实体选中事件等

Scene类属性

primitives 图元集合（几何体和外观）
postProcessStages 场景后期处理
环境对象，大气圈、天空盒、太阳、月亮等
Event事件，更新、渲染事件等
Camera类属性
位置、方位角、俯仰角、翻滚角

空间计算

三维矩阵、四元数、四维矩阵、转换等

1.屏幕坐标（像素）

即二维笛卡尔平面坐标，我们通过鼠标点击直接获取的坐标就是屏幕坐标了，单位是像素值，也可以通过new Cesium.Cartesian2(x, y)创建。

2.笛卡尔空间直角坐标

笛卡尔空间直角坐标又称为世界坐标，Cesium中用Cartesian3变量表示，可通过new Cesium.Cartesian3(x, y, z)创建，主要是用来做空间位置的变化如平移、旋转和缩放等等，它的坐标原点在椭球的中心，如下图所示：

3.地理坐标（弧度）

Cesium中的地理坐标单位默认是弧度制，用Cartographic变量表示，可通过new Cesium.Cartographic(longitude, latitude, height)创建，其中这里的参数是用弧度表示的经纬度，即经度和纬度。弧度即角度对应弧长是半径的倍数。
角度转弧度 π/180×角度
弧度变角度 180/π×弧度

4.经纬度坐标

即测绘中的地理经纬度坐标，默认是WGS84坐标系，坐标原点在椭球的质心。

经度：参考椭球面上某点的大地子午面与本初子午面间的两面角，东正西负。
纬度：参考椭球面上某点的法线与赤道平面的夹角，北正南负。
Cesuim中没有具体的经纬度对象，要得到经纬度首先需要计算为弧度，再进行转换。Cesium提供了如下对应的转换方法：

// 经纬度转弧度 
Cesium.Math.toRadians(degrees) 
// 弧度转经纬度
Cesium.Math.toDegrees(radians)

Cesium中常用的坐标变换

1.经纬度坐标转世界坐标

Cesium提供了两种方式将经纬度坐标转成世界坐标。

// 方法1：直接转换 
// var cartesian3 = Cesium.Cartesian3.fromDegrees(lng, lat, height); 
// 方法2：借助ellipsoid对象，先转换成弧度再转换 
var cartographic = Cesium.Cartographic.fromDegrees(lng, lat, height); //单位：度，度，米 
var cartesian3 = ellipsoid.cartographicToCartesian(cartographic);

2.世界坐标转经纬度

// 3.笛卡尔空间直角坐标系转为地理坐标（弧度制） 
// var cartographic = Cesium.Cartographic.fromCartesian(cartesian3); 
// 方法1 
// var cartographic = ellipsoid.cartesianToCartographic(cartesian3); 
// 方法2 
// 4.地理坐标（弧度制）转为经纬度坐标
var lat = Cesium.Math.toDegrees(cartographic.latitude);
var lng = Cesium.Math.toDegrees(cartographic.longitude); 
var height = cartographic.height;

3.弧度和经纬度互转

经纬度转弧度：

Cesium.Math.toRadians(degrees)

弧度转经纬度：

Cesium.Math.toDegrees(radians)

4.屏幕坐标和世界坐标互转

屏幕转世界坐标：

// 2.二维屏幕坐标转为三维笛卡尔空间直角坐标（世界坐标） 
var cartesian3 = scene.globe.pick(    viewer.camera.getPickRay(windowPostion),    scene );

注意这里屏幕坐标一定要在球上，否则生成出的cartesian对象是undefined。

世界坐标转屏幕坐标：

// 三维笛卡尔空间直角坐标（世界坐标）转为二维屏幕坐标 
// 结果是Cartesian2对象，取出X,Y即为屏幕坐标。  
windowPostion = Cesium.SceneTransforms.wgs84ToWindowCoordinates(scene, cartesian3);

坐标变换工具

只有转换到笛卡尔坐标系后才能运用计算机图形学中的仿射变换知识进行空间位置变换如平移旋转缩放。Cesium为我们提供了如下几种很有用的变换工具类：

Cesium.Cartesian3（相当于Point3D）
Cesium.Matrix3（3x3矩阵，用于描述旋转变换）
Cesium.Matrix4（4x4矩阵，用于描述旋转加平移变换）
Cesium.Quaternion（四元数，用于描述围绕某个向量旋转一定角度的变换）
Cesium.Transforms(包含将位置转换为各种参考系的功能)

Cesium的增删改查

增加

//方法一
var entity = new Entity({
    id : 'uniqueId'
});
viewer.entities.add(entity);

//方法一 简写
viewer.entities.add({
    id : 'uniqueId'
});

//方法二
var entity = viewer.entities.getOrCreateEntity('uniqueId');

   var redBox = viewer.entities.add({
        name: "redBox",
        position: Cesium.Cartesian3.fromDegrees(-115.0, 40.0, 100000.0),
        box: {
          dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
          // material:Cesium.Color.RED.withAlpha(0.5),
          outline: true,
          outlineColor: Cesium.Color.BLACK,
        },
      });

查找

var entity = viewer.entities.getById('uniqueId');

删除

//方法一，先查后删
var entity = viewer.entities.getById('uniqueId');
viewer.entities.remove(entity) 
//方法二，直接删除
viewer.entities.removeById('uniqueId')
//方法三，删除所有
viewer.entities.removeAll()

改：

 model: {
        show: true,
        uri: url,
        scale: 1.0,
        minimumPixelSize: 128, // 模型的最小最小像素大小，而不考虑缩放
        maximumScale: 20000, // 模型的最大比例尺大小。 minimumPixelSize的上限
        incrementallyLoadTextures: true, // 确定在加载模型后纹理是否可以继续流入
        runAnimations: true, // 是否应启动模型中指定的glTF动画
        clampAnimations: true, // glTF动画是否应在没有关键帧的持续时间内保持最后一个姿势
        shadows: Cesium.ShadowMode.DISABLED,
        heightReference: Cesium.HeightReference.NONE,
        silhouetteColor: Cesium.Color.RED, // 轮廓的颜色
        silhouetteSize: 0.0, // 轮廓的宽度
        color: Cesium.Color.WHITE, // 模型的颜色

        // 目标颜色和图元的源颜色之间混合的不同模式
        // HIGHLIGHT 将源颜色乘以目标颜色;REPLACE 将源颜色替换为目标颜色;MIX 将源颜色和目标颜色混合在一起
        colorBlendMode: Cesium.ColorBlendMode.HIGHLIGHT,
        // 用于指定 colorBlendMode 为 MIX 时的颜色强度。值0.0会产生模型的着色，而值1.0会导致纯色，介于两者之间的任何值都会导致两者混合
        colorBlendAmount: 0.5,
        imageBasedLightingFactor: new Cesium.Cartesian2(1.0, 1.0), // 指定基于漫反射和镜面反射的图像照明的贡献
        lightColor: undefined, // 为模型着色时指定浅色的属性。如果 undefined ，则使用场景的浅色。
        // distanceDisplayCondition: new Cesium.DistanceDisplayCondition(
        //   1.0e3,
        //   2.0e3
        // ),
      },

如果想要给实例添加描述信息，那么只需要更改description属性即可

混沌凡人

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
青理工大work总结知识点 2

Globe绘制的是全球地形，它需要两个东西，一个是地形高程信息，另外一个是影像图层，也就是地球的表皮。整个地形的绘制也是渐进式的，即视线看到的地方才会去调度相关的地形高程信息，找到对应位置的地形影像贴上。Cesium中的地理坐标单位默认是弧度制，用Cartographic变量表示，可通过new Cesium.Cartographic(longitude, latitude, height)创建，其中这里的参数是用弧度表示的经纬度，即经度和纬度。图元是Cesium用来绘制三维对象的一个独立的结构。
复制链接

扫一扫