自己学习Cesium的笔记简介

Cesium的入门笔记

第一个程序

    DOCTYPE html>
    <html lang="en">
    
    <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">
        <title>studyCesiumtitle>
        <link href="https://cesium.com/downloads/cesiumjs/releases/1.65/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
        <script src="https://cesium.com/downloads/cesiumjs/releases/1.65/Build/Cesium/Cesium.js">script>
        <body>
            <div id="cesiumContainer" style="height:100%;">div>
            <script>
                 var geeMetadata = new Cesium.GoogleEarthEnterpriseMetadata('http://www.earthenterprise.org/3d');
                 var gee = new Cesium.GoogleEarthEnterpriseImageryProvider({
                     metadata: geeMetadata
                 });
    
                var viewer = new Cesium.Viewer('cesiumContainer', {
                    baseLayerPicker: false, // 控制相机是否显示
                    imageProvider: gee, // 加载的映像
                    terrainProvider: Cesium.createWorldTerrain(), // 是否存在山地起伏
                });
            script>
        body>
    
    html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Cesium常用的属性

Cesium.Viewer(‘id’，option的参数)

    var container = new Cesium.Viewer('id', {
                //需要进行可视化的数据源的集合
                animation: false, //是否显示动画控件
                shouldAnimate : true,
        		terrainProvider: Cesium.createWorldTerrain(), // 是否显示山地
                homeButton: false, //是否显示Home按钮
                fullscreenButton: false, //是否显示全屏按钮
                baseLayerPicker: false, //是否显示图层选择控件
                geocoder: false, //是否显示地名查找控件
                timeline: false, //是否显示时间线控件
                sceneModePicker: true, //是否显示投影方式控件
                navigationHelpButton: false, //是否显示帮助信息控件
                infoBox: false, //是否显示点击要素之后显示的信息
                requestRenderMode: true, //启用请求渲染模式
                scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
                sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
                fullscreenElement: document.body, //全屏时渲染的HTML元素 暂时没发现用处
                //天地图是官方开元的地图，不需要密钥
                imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
                    url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles",
                    layer: "img",
                    style: "default",
                    format: "tiles",
                    tileMatrixSetID: "w",
                    credit: new Cesium.Credit('天地图全球影像服务'),
                    subdomains: ['t0', "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
                    maximumLevel: 18,
                    show: false
                })
    
            });

UrlTemplateImageryProvider加载映像

    // 谷歌映像
    imageryProvider:new Cesium.UrlTemplateImageryProvider({
        url:"http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali"
    })
    // arcGS映像
    imageryProvider:new Cesium.ArcGisMapServerImageryProvider({
       url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
    });

camera.setView({})属性

 destination: Cesium.Cartesian3.fromDegrees(坐标值1，坐标值2，观看的高度)

    viewer.camera.setView({
        // 具体位置，目的地
        destination: Cesium.Cartesian3.fromDegrees(113.318977,23.114155，1500), // 这个坐标是广州塔
        // 设置方向和仰角
        orientation:{
             // 角度：Cesium.Math.toRadians 通过数学的角度去参考旋转的角度
          heading: Cesium.Math.toRadians(0),
             // 仰角的度数
          pitch: Cesium.Math.toRadians(-90)
        }
      })

scene.primitives.add(new Cesium.Cesium3DTileset())创建3Dtouch的数据

    // 加载纽约的3D映像图
    var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url:Cesium.IonResource.fromAssetId(3839)}))
    
    // 3DStyle的样式设置
    var transparentStyle = new Cesium.Cesium3DTileStyle({
        color: "color('white',0.3)",
        show: true,
      })
    
    city.style = transparentStyle.style
    
    // 定义高度不通的样式
      var heightStyle = new Cesium.Cesium3DTileStyle({
        color:{
          // 条件判断
          conditions:[
            ['${height} >= 300','rgba(45,0,75,0.5)'],
            ['${height} >= 200','rgba(102,71,151)'],
            ['${height} >= 100','rgba(45,0,75,0.5)'],
            ['${height} >= 50','rgba(45,0,75,0.5)'],
            ['${height} >= 25','rgba(45,0,75,0.5)'],
            ['${height} >= 10','rgba(45,0,75,0.5)'],
            ['${height} >= 5','rgba(45,0,75,0.5)'],
            ['true','rgb(127,59,8)']
          ]
        } 
      })
      city.style = heightStyle
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

完整代码

学完了以后就可以去看一下DC-SDK的文档进行快速入门，为什么需要先了解一些Cesium，因为DC是Cesium封装的，如果不明白文章的内容也可以直接访问这个B站的地址==>Cesium官方入门教程

相关阅读:
数据之道读书笔记-05面向“联接共享”的数据底座建设
 pytorch的自动微分、计算图 | 代码解析
 PHP和GOLANG开发的法律+互联网行业系统平台解决方案开源代码
 从头训练一个数学编程大模型
 java基于Springboot+vue的健身房课程预约平台 element
python基础学习（7）
音视频中文件的复用和解复用
 大学生WEB前端静态网页——旅游介绍35页响应式,
Java设计模式之备忘录模式
 赛码系统——根据文件生成时间先后顺序对文件进行排序
原文地址：https://blog.csdn.net/weixin_47024018/article/details/125889097