初学Cesium

最新推荐文章于 2024-03-14 08:48:02 发布

爱学习爱生活_yeah

最新推荐文章于 2024-03-14 08:48:02 发布

阅读量174

点赞数

分类专栏： WEB

本文链接：https://blog.csdn.net/m0_47473615/article/details/115287554

版权

WEB 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文是初学者学习Cesium的入门教程，通过安装http-server创建服务，建立第一个Cesium App，利用Cesium官方文档学习，并展示了加载影像、地形、视角设置及3dtiles数据加载的代码示例。

摘要由CSDN通过智能技术生成

初学Cesium

编辑器：VSCode

服务：node.js http-server

CesiumJS: Cesium-1.71.zip

下载链接：https://pan.baidu.com/s/1XXEcnKKk4D3Woeq3Lz6r6g
提取码：xipn

一、安装http-server

npm install -g http-server

cd Cesium App 文件

http-server -p 8081

出现网址即可点击进入

二、第一个cesuim App

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>cesuim App</title>
    <script src="./scripts/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="./scripts/Cesium/Widgets/widgets.css">
    <style>
        html,body{
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
</head>
<body>
    <div id="cesiumContainer" style="width: 100%;"></div>
    <script>
        var viewer=new Cesium.Viewer("cesiumContainer");
    </script>
</body>
</html>

三、使用Cesium文档

进入Cesium-1.71\Build\Documentation

hs-p 8082

点击网址进入

输入你想要了解的，比如Viewer

四、一些代码

加载影像

  <script>
        var geeMetadata = new Cesium.GoogleEarthEnterpriseMetadata('http://www.earthenterprise.org/3d');
        var gee = new Cesium.GoogleEarthEnterpriseImageryProvider({
            metadata: geeMetadata
        });
        //加载谷歌中国卫星影像，谷歌地球商业版，需要翻墙，报跨域资源请求错误
        var url = "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali";
        var Google = new Cesium.UrlTemplateImageryProvider({ url: url })

        var viewer = new Cesium.Viewer("cesiumContainer", {
            baseLayerPicker: false,
            imageryProvider: Google
        });
    </script>

加载地形

<script>
        var geeMetadata = new Cesium.GoogleEarthEnterpriseMetadata('http://www.earthenterprise.org/3d');
        var gee = new Cesium.GoogleEarthEnterpriseImageryProvider({
            metadata: geeMetadata
        });
        //加载谷歌中国卫星影像，谷歌地球商业版，需要翻墙，报跨域资源请求错误
        var url = "http://mt1.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali";
        var Google = new Cesium.UrlTemplateImageryProvider({ url: url })

        var viewer = new Cesium.Viewer("cesiumContainer", {
            baseLayerPicker: false,
            imageryProvider: Google,
            terrainProvider: new Cesium.CesiumTerrainProvider({
                url: Cesium.IonResource.fromAssetId(3956),
                requestVertexNormals: true
            })
        });
    </script>

设置视角

Example


// 1. Set position with a top-down view
viewer.camera.setView({
    destination : Cesium.Cartesian3.fromDegrees(-117.16, 32.71, 15000.0)
});

// 2 Set view with heading, pitch and roll
viewer.camera.setView({
    destination : cartesianPosition,
    orientation: {
        heading : Cesium.Math.toRadians(90.0), // east, default value is 0.0 (north)  90，0 朝东，0，0朝北
        pitch : Cesium.Math.toRadians(-90),    // default value (looking down)
        roll : 0.0                             // default value
    }
});

// 3. Change heading, pitch and roll with the camera position remaining the same.
viewer.camera.setView({
    orientation: {
        heading : Cesium.Math.toRadians(90.0), // east, default value is 0.0 (north)
        pitch : Cesium.Math.toRadians(-90),    // default value (looking down)
        roll : 0.0                             // default value
    }
});

//切换到北京
viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(116.39 ,39.9, 15000.0)//北京经纬度
        });

//切换到纽约视角
  viewer.camera.setView({
            destination: new Cesium.Cartesian3( 1335144.2933654222, -4667770.203241686, 4139454.9604954286),
            orientation: {
                heading: 0.12194900205375525, 
                pitch: - 0.9450041528301258,    
                roll: 0.0                          
            }
        });

加载3dtiles数据--纽约数据

 var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(3839) }));

var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(3839) }));
//按高度设置颜色
        var heightStyle = new Cesium.Cesium3DTileStyle({
            color: {
                conditions: [
                    ["${height}>=300", "rgba(45,0,75,0.5)"],
                    ["${height}>=200", "rgb(102,71,151)"],
                    ["${height}>=100", "rgb(170,162,204)"],
                    ["${height}>=50", "rgb(224,226,238)"],
                    ["${height}>=25", "rgb(252,230,200)"],
                    ["${height}>=10", "rgb(248,176,87)"],
                    ["${height}>=5", "rgb(198,106,11)"],
                    ["true", "rgb(127,59,8)"]
                ]

            }
        });
        city.style = heightStyle;

效果图