当前位置： 首页 > article >正文

cesium入门学习一

article 2024/12/27 4:54:50

 1.学习目的  

        作为网页显示，我只要实现了cesium网页显示，就可以到时候通过qt的webview显示html界面，来显示地图，js对于学过c++的人而言，没啥难度，不过是换一种语法，而且cesium的教程相对于osgearth多了太多太多，学过qt的人都知道，页面都是通过底层opengl渲染的，只不过一个显示在网页，一个显示在桌面端，原理都大差不差。

        本着有最新的技术就学习最新的技术的理念，我开始了学习cesium之旅。

         ps:实在是osgearth我找不到学习资料。

         都是一个团队开发的东西，能学最新的就学最新的。

  2.基本配置       

        在配置好了node.js环境，从github上面下载并编译好了cesium文件，搭建好了nginx服务器，端口改为了127.0.0.1:8881,

在网页打开显示

文件目录：

Cesium是编译好的js文件，scripts存放js文件，styles存放css文件，index.html是主界面的显示。

index.html的内容为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./styles/index.css">
    <style>
        @import url(./Cesium/Widgets/widgets.css);
    </style>
    <title>Cesium三维地球可视化</title>
    <script src="./Cesium/Cesium.js"></script>
</head>
<body>
    <div id="cesiumContainer"></div>
</body>
<script src="./scripts/index.js"></script>
</html>

取的都是相对路径。

index.js

var viewer = new Cesium.Viewer("cesiumContainer");

index.css

html, body, #cesiumContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

配置好这些，就可以在网页显示一个球。

注意：修改

3.cesium的一些基本操作

      通过修改index.js的代码，                                                                                                            

3.1   影藏界面中一些基本的组件

效果如下图所示：

修改index代码：

点击ctrl+f5执行跟新：

Cesium.Ion.defaultAccessToken = '你的密钥';

//var viewer = new Cesium.Viewer("cesiumContainer");

var viewer = new Cesium.Viewer('cesiumContainer', {
        homeButton: false,
        sceneModePicker: false,
        baseLayerPicker: false, // 影像切换
        animation: false, // 是否显示动画控件
        timeline: false, // 是否显示时间线控件，和animation是一组
        infoBox: false, // 是否显示点击要素之后显示的信息
        selectionIndicator: false, // 要素选中框
        geocoder: false, // 是否显示地名查找控件
        fullscreenButton: false,
        shouldAnimate: false,
        navigationHelpButton: false, // 是否显示帮助信息控件
      });

viewer.scene.debugShowFramesPerSecond = true;

3.2 绘制矩形

3.2.1 绘制矩形的第一种方式

效果

js代码：

//绘制矩形
//绘制矩形的第一种方式

var viewer = new Cesium.Viewer('cesiumContainer');
var redBox = viewer.entities.add({
  name : 'Red box with black outline',
  position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.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
  }
});

viewer.zoomTo(viewer.entities);

3.2.2 绘制矩形的第二种方式

效果：

js代码：

//绘制矩形的第二种方式
var czml = [{
  "id" : "document",
  "name" : "box",
  "version" : "1.0"
},{
  "id" : "shape2",
  "name" : "Red box with black outline",
  "position" : {
      "cartographicDegrees" : [-107.0, 40.0, 3000.0]
  },
  "box" : {
      "dimensions" : {
          "cartesian": [400000.0, 300000.0, 500000.0]
      },
      "material" : {
          "solidColor" : {
              "color" : {
                  "rgba" : [220, 0, 250, 127]
              }
          }
      },
      "outline" : true,
      "outlineColor" : {
          "rgba" : [0, 0, 0, 255]
      }
  }
}];

var viewer = new Cesium.Viewer('cesiumContainer');
var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);

3.3  绘制轨迹线

效果：

js代码：

//轨迹线
var viewer = new Cesium.Viewer('cesiumContainer');

// 定义轨迹点的位置（经度、纬度、高度）
var positions = [
    -107.0, 40.0, 3000.0,
    -106.8, 40.2, 3500.0,
    -106.6, 40.6, 3200.0,
    -106.5, 40.9, 4000.0,
    -106.2, 41.1, 3800.0,
    -105.8, 41.3, 4200.0,
    -105.4, 41.7, 3900.0,
    -105.0, 42.0, 4500.0
];

// 添加轨迹线
viewer.entities.add({
    name: 'Trajectory Line',
    polyline: {
        positions: Cesium.Cartesian3.fromDegreesArrayHeights(positions),
        width: 3, // 线宽
        material: Cesium.Color.YELLOW // 线颜色
    }
});

// 在每个点添加一个红色的标记
for (let i = 0; i < positions.length; i += 3) {
    viewer.entities.add({
        name: 'Point Marker',
        position: Cesium.Cartesian3.fromDegrees(positions[i], positions[i + 1], positions[i + 2]),
        point: {
            pixelSize: 10, // 标记点的大小
            color: Cesium.Color.RED, // 标记点的颜色
            outlineColor: Cesium.Color.BLACK, // 外边框颜色
            outlineWidth: 2 // 外边框宽度
        }
    });
}

// 将视图调整到包含所有实体的范围
viewer.zoomTo(viewer.entities);

3.4 绘制多边形

效果：

js代码：

//绘制多边形
var viewer = new Cesium.Viewer('cesiumContainer');

// 定义多边形的点（经度、纬度、高度）
var positions = [
    Cesium.Cartesian3.fromDegrees(-107.0, 40.0),
    Cesium.Cartesian3.fromDegrees(-108.0, 40.0),
    Cesium.Cartesian3.fromDegrees(-108.5, 39.5), // 新增点
    Cesium.Cartesian3.fromDegrees(-108.0, 39.0),
    Cesium.Cartesian3.fromDegrees(-107.0, 39.0),
    Cesium.Cartesian3.fromDegrees(-106.5, 39.5)  // 新增点
];

// 添加一个多边形实体
var polygon = viewer.entities.add({
    name: 'Polygon with multiple points',
    polygon: {
        hierarchy: new Cesium.PolygonHierarchy(positions), // 多边形的点
        material: Cesium.Color.BLUE.withAlpha(0.5), // 半透明蓝色
        outline: true, // 是否显示边界
        outlineColor: Cesium.Color.BLACK // 边界颜色
    }
});

viewer.zoomTo(viewer.entities);

3.5  绘制轨迹点以及轨迹点标签

效果：

js代码：

// 创建 Cesium Viewer
var viewer = new Cesium.Viewer('cesiumContainer');

// 添加一个轨迹点，带有标签
var pointWithLabel = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0), // 点的经纬度
    point: {
        pixelSize: 10, // 点的大小（像素）
        color: Cesium.Color.RED, // 点的颜色
        outlineColor: Cesium.Color.WHITE, // 外边框颜色
        outlineWidth: 2 // 外边框宽度
    },
    label: {
        text: "轨迹点 1", // 标签文本
        font: "14pt sans-serif", // 字体样式
        fillColor: Cesium.Color.YELLOW, // 字体颜色
        outlineColor: Cesium.Color.BLACK, // 字体外边框颜色
        outlineWidth: 2, // 字体外边框宽度
        style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 标签样式
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平对齐方式
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直对齐方式
        pixelOffset: new Cesium.Cartesian2(0, -15) // 标签的偏移
    }
});

// 将视角缩放到轨迹点
viewer.zoomTo(viewer.entities);

3.6  绘制圆锥

效果：

js代码：

// 创建 Cesium Viewer
var viewer = new Cesium.Viewer('cesiumContainer');

// 定义圆锥的位置
var position = Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0); // 经度, 纬度, 高度

// 添加一个圆锥实体
var cone = viewer.entities.add({
    name: "Cone",
    position: position,
    cylinder: {
        length: 500000.0, // 圆锥的高度
        topRadius: 0.0, // 圆锥的顶部半径
        bottomRadius: 100000.0, // 圆锥的底部半径
        material: Cesium.Color.RED.withAlpha(0.5), // 圆锥的颜色和透明度
        outline: true, // 是否显示边框
        outlineColor: Cesium.Color.BLACK // 边框颜色
    }
});

// 将视角缩放到圆锥

4.学习目录总结


http://www.kler.cn/a/453099.html

相关文章：

  • elasticsearch中使用fuzzy查询
  • 对gPTP上PTP安全控制的评估
  • 音视频入门知识（二）、图像篇
  • IBatis和MyBatis在细节上的不同有哪些
  • mac_录屏
  • 关于埃斯顿机器人文件导出或者系统日志导出
  • 江苏计算机专转本 技能Mysql知识点总结（一）
  • BiTCN-BiGRU基于双向时间卷积网络结合双向门控循环单元的数据多特征分类预测（多输入单输出）
  • 【Stable Diffusion】SD Stable Diffusion 最新版本 4.10 安装包
  • K8s 不同层次的进程间通信实现
  • Linux高级--2.1.2 select poll epoll reactor
  • 中科岩创边坡自动化监测解决方案
  • 34.正则表达式
  • 打包springBoot程序为exe（案例教程）
  • 每天40分玩转Django：实操在线商城
  • Spring Task的使用
  • 小程序canvas画环形百分比进度图
  • uni-app：监听页面返回，禁用返回操作
  • 【数据库初阶】数据库基础知识
  • 无人零售及开源 AI 智能名片 S2B2C 商城小程序的深度剖析
  • 怎么学习数据结构与算法？
  • 【前端实现pdf导出】
  • GESP202309 二级【小杨的 X 字矩阵】题解（AC）
  • 【大语言模型】ACL2024论文-35 WAV2GLOSS：从语音生成插值注解文本
  • Android使用辅助服务AccessibilityService实现自动化任务
  • 力扣11. 盛最多水的容器