自己学习Cesium的笔记简介

最新推荐文章于 2024-04-17 11:44:03 发布

三杯温开水

最新推荐文章于 2024-04-17 11:44:03 发布

阅读量272

点赞数

分类专栏：知识总结文章标签：学习前端 javascript Cesium

本文链接：https://blog.csdn.net/weixin_47024018/article/details/125889097

版权

知识总结专栏收录该内容

37 篇文章 4 订阅

订阅专栏

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>studyCesium</title>
        <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>

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

完整代码

    <template>
      <div id="cesiumContainer"></div>
    </template>
    <script setup>
    import * as Cesium from 'cesium';
    import { onMounted } from 'vue';
    onMounted(()=>{
      // const viewer = new Cesium.Viewer('cesiumContainer');
      var custom = new Cesium.ArcGisMapServerImageryProvider({
        url:'//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
      })
    
      var viewer = new Cesium.Viewer('cesiumContainer',{
        // 不创建baseLayerPicker小部件
        baseLayerPicker:false,
        // 设置图像提供的程序
        imageryProvider:custom,
        // 设置cesium世界地形
        terrainProvider:Cesium.createWorldTerrain({
          requestWaterMask:true,
          requestVertexNormals:true,
        })
      })
    
      // viewer.camera.setView({
      //   destination:Cesium.Cartesian3.fromDegrees(113.318977,23.114155,2000),
      //   // 方向、俯视和仰视的视角
      //   orientation:{
      //     heading:Cesium.Math.toRadians(90),
      //     pitch:Cesium.Math.toRadians(-90)
      //   }
      // })
      viewer.camera.setView({
        destination:new Cesium.Cartesian3(1332761,-4662399,4137888),
        orientation:{
          heading:0.60,
          pitch:-0.66
        }
    
        
      })
    
      var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url:Cesium.IonResource.fromAssetId(3839)}));
      
      // 定义3d样式
      var heightStyle = new Cesium.Cesium3DTileStyle({
        color:{
          // 条件判断具体的颜色
          conditions:[
            ['${height} >= 300','rgba(45,0,75,0.5)'],
            ['${height} >= 200','rgb(102,71,151)'],
            ['${height} >= 100','rgba(170,162,204,0.5)'],
            ['${height} >= 50','rgba(224,226,238,0.5)'],
            ['${height} >= 25','rgba(252,230,200,0.5)'],
            ['${height} >= 10','rgba(248,176,87,0.5)'],
            ['${height} >= 5','rgba(198,106,11,0.5)'],
            ["true","rgb(127,59,8)"]
          ]
        }
      })
    
      city.style = heightStyle;
      var geojsonOptions = {
            clampToGround : true
        };
        // 从 GeoJson 文件加载邻域边界
        // Data from : https://data.cityofnewyork.us/City-Government/Neighborhood-Tabulation-Areas/cpf4-rkhq
        var neighborhoodsPromise = Cesium.GeoJsonDataSource.load('./assets/SampleData/sampleNeighborhoods.geojson', geojsonOptions);
        // GeoJSON是一种对各种地理数据结构进行编码的格式，基于Javascript对象表示法
        // (JavaScript Object Notation, 简称JSON)的地理空间信息数据交换格式。
        // GeoJSON对象可以表示几何、特征或者特征集合。
        // GeoJSON支持下面几何类型：点、线、面、多点、多线、多面和几何集合
        // 保存邻域数据的新实体集合
        var neighborhoods;
        neighborhoodsPromise.then(function(dataSource) {
            // 将新数据作为实体添加到查看器
            viewer.dataSources.add(dataSource);
            neighborhoods = dataSource.entities;
    
            // Get the array of entities
            var neighborhoodEntities = dataSource.entities.values;
            for (var i = 0; i < neighborhoodEntities.length; i++) {
                var entity = neighborhoodEntities[i];
    
                if (Cesium.defined(entity.polygon)) {
                    // Use kml neighborhood value as entity name
                    entity.name = entity.properties.neighborhood;
                    // Set the polygon material to a random, translucent color
                    entity.polygon.material = Cesium.Color.fromRandom({
                      // 下面的值是0--1之间的随机值
                        red : 0.1,
                        maximumGreen : 0.5,
                        minimumBlue : 0.5,
                        alpha : 0.6
                    });
                    // 告诉多边形为地形着色。 ClassificationType.CESIUM_3D_TILE 将为 3D 图块集着色，而 ClassificationType.BOTH 将为 3d 图块和地形着色（BOTH 是默认值）
                    // Tells the polygon to color the terrain. ClassificationType.CESIUM_3D_TILE will color the 3D tileset, and ClassificationType.BOTH will color both the 3d tiles and terrain (BOTH is the default)
                    entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;
                    // 生成多边形中心
                    var polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
                    // 边界球
                    var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
                    // 椭球体
                    polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
                    entity.position = polyCenter;
                    // 生成标签
                    entity.label = {
                        text : entity.name,
                        showBackground : true,
                        scale : 0.6,
                        horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
                        verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
                        distanceDisplayCondition : new Cesium.DistanceDisplayCondition(10.0, 8000.0),
                        disableDepthTestDistance : 100.0
                    };
                }
            }
        });
    
      var kmlOptions = {
            camera : viewer.scene.camera,
            canvas : viewer.scene.canvas,
            // 如果我们想要将几何特征（多边形、线串和线性环）固定在地面上，则为 true。
            clampToGround : true
        };
        //KML文件是谷歌公司创建的一种地标性文件。
        //用于记录某一地点、或连续地点的时间、经度、纬度、海拔等地理信息数据，供GE等有关软件使用。
        // Load geocache points of interest from a KML file
        // Data from : http://catalog.opendata.city/dataset/pediacities-nyc-neighborhoods/resource/91778048-3c58-449c-a3f9-365ed203e914
        // 可以通过百度或者B站视频提供的信息去获取
        var geocachePromise = Cesium.KmlDataSource.load('./assets/SampleData/sampleGeocacheLocations.kml', kmlOptions);
    
        // 将 geocache 广告牌实体添加到场景中并为其设置样式
        geocachePromise.then(function(dataSource) {
            // 将新数据作为实体添加到查看器
            viewer.dataSources.add(dataSource);
    
            // 获取实体数组
            var geocacheEntities = dataSource.entities.values;
    
            for (var i = 0; i < geocacheEntities.length; i++) {
                var entity = geocacheEntities[i];
                if (Cesium.defined(entity.billboard)) {
                    // 调整垂直原点，使图钉位于地形上
                    entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
                    entity.billboard.image = '/assets/tagpark.png'
                    // 禁用标签以减少混乱
                    entity.label = undefined;
                    // 添加距离显示条件
                    entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 20000.0);
                    // 以度为单位计算纬度和经度
                    var cartographicPosition = Cesium.Cartographic.fromCartesian(entity.position.getValue(Cesium.JulianDate.now()));
                    var latitude = Cesium.Math.toDegrees(cartographicPosition.latitude);
                    var longitude = Cesium.Math.toDegrees(cartographicPosition.longitude);
                    // 修改描述
                    var description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>' +
                        '<tr><th>' + "Longitude" + '</th><td>' + longitude.toFixed(5) + '</td></tr>' +
                        '<tr><th>' + "Latitude" + '</th><td>' + latitude.toFixed(5) + '</td></tr>' +
                        '<tr><th>' + "实时人流" + '</th><td>' + Math.floor(Math.random()*20000)  + '</td></tr>' +
                        '<tr><th>' + "安全等级" + '</th><td>' + Math.floor(Math.random()*5)  + '</td></tr>' +
                        '</tbody></table>';
                    entity.description = description;
                }
            }
        });
      
      // 从czml文件加载飞行路径(可以去百度找资源)
      var dronePromise = Cesium.CzmlDataSource.load('./assets/SampleData/sampleFlight.czml');
    
      // 无人机实体
      var drone;
      dronePromise.then(function(dataSource){
        viewer.dataSources.add(dataSource);
        drone = dataSource.entities.getById('Aircraft/Aircraft1');
        drone.model = {
          // uri:'./assets/SampleData/Models/CesiumDrone.gltf',
          uri:'./assets/SampleData/Models/ferrari2.gltf',
          minimumPixelSize:128,
          maximumScale:1000,
          silhouetteColor:Cesium.Color.WHITE,
          silhouetteSize:2
        }
    
        drone.orientation = new Cesium.VelocityOrientationProperty(drone.position);
        drone.viewFrom = new Cesium.Cartesian3(0,-30,30)
        viewer.clock.shouldAnimate = true; // 进入即可执行
      })
    
    })
    </script>
    
    <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
    }
    html,body,#cesiumContainer{
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    </style>

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