【Cesium入门教程】第二课：基础操作与地图控制

最新推荐文章于 2024-08-28 15:52:25 发布

GIS前端嘉欣

最新推荐文章于 2024-08-28 15:52:25 发布

阅读量729

点赞数 9

分类专栏： webgis 文章标签： webgis cesium 三维GIS GIS开发 GIS 地理信息系统

本文链接：https://blog.csdn.net/jdjxbsus/article/details/138108608

版权

webgis 专栏收录该内容

139 篇文章 17 订阅

订阅专栏

Cesium基础操作与地图控制

地图加载与初始化

在Cesium中，地图的加载和初始化是通过创建一个Viewer对象来完成的。这个对象包含了场景（scene）、相机（camera）和其他一些默认的控件。

下面是一个初始化Cesium Viewer的基本示例：

import * as Cesium from 'cesium';

const viewer = new Cesium.Viewer('cesiumContainer', {
    terrainProvider: Cesium.createWorldTerrain({
        requestWaterMask: true,
        requestVertexNormals: true,
    }),

上述代码中，'cesiumContainer'是HTML中一个元素的ID，它将作为Cesium Viewer的容器。terrainProvider属性用于指定地形数据的提供者，这里使用了Cesium提供的全球地形数据。

相机控制

Cesium中的相机控制是实现动态地图查看的关键部分。以下是几种基本的相机控制方法：

setView

setView方法可以立即将相机定位到指定的位置，没有动画过渡。例如：

const position = Cesium.Cartesian3.fromDegrees(116.40, 39.90, 1000);
viewer.camera.setView({
    destination: position,
    orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-90),
        roll: Cesium.Math.toRadians(0),
    },
});

上述代码将相机移动到北京的上空，并朝向地面。

flyTo

与setView不同，flyTo方法可以让相机平滑地飞向指定位置，提供了动画效果。例如：

viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(120.0, 30.0, 2000000),
    duration: 3.0,
    orientation: {
        heading: Cesium.Math.toRadians(20),
        pitch: Cesium.Math.toRadians(-15),
        roll: 0.0,
    },
});

这段代码将相机飞向杭州上空，并在3秒内完成飞行，同时设置了相机的朝向。

lookAt

lookAt方法用于将相机指向一个特定的目标点，而不会改变当前的相机位置。例如：

const target = Cesium.Cartesian3.fromDegrees(120.0, 30.0);
viewer.camera.lookAt(target, new Cesium.HeadingPitchRange(0, -
Cesium.Math.PI_OVER_TWO, 5000000));

上述代码将相机朝向杭州，但相机的位置保持不变。

坐标转换

在Cesium中，坐标转换是频繁用到的操作，尤其是将地理坐标（经纬度）转换为笛卡尔坐标系。Cesium提供了以下方法来进行坐标转换：

经纬度转笛卡尔

const cartesian3 =Cesium.Cartesian3.fromDegrees(114.0, 30.0, 500000);

上述代码将经纬度（114.0°E, 30.0°N）转换为笛卡尔坐标系中的点，并设置了高程500000米。

笛卡尔转经纬度

const cartographic =Cesium.Cartographic.fromCartesian(cartesian3);const longitude =Cesium.Math.toDegrees(cartographic.longitude);const latitude =Cesium.Math.toDegrees(cartographic.latitude);

这段代码将笛卡尔坐标转换为地理坐标，并计算出其经度和纬度。