cesium点位加载+坐标转化+场景应用+动态更新+高亮显示

最新推荐文章于 2025-03-17 13:03:20 发布

放逐者-保持本心，方可放逐

最新推荐文章于 2025-03-17 13:03:20 发布

阅读量1.8k

点赞数 53

分类专栏： webgl 文章标签：前端 javascript html cesium 点位加载高亮显示动态更新

本文链接：https://blog.youkuaiyun.com/m0_51244077/article/details/144751682

版权

文章目录

cesium 点位应用

以下是一个使用Cesium实现点位加载、点位高亮以及坐标转换的示例代码。假设你已经引入了Cesium库。

1. 点位加载与高亮

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cesium Points Example</title>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.101/Build/Cesium/Cesium.js"></script>
    <link href="https://cesium.com/downloads/cesiumjs/releases/1.101/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
    <style>
        html,
        body,
        #cesiumContainer {
     
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="cesiumContainer"></div>
    <script>
        // 初始化Cesium Viewer
        var viewer = new Cesium.Viewer('cesiumContainer');

        // 定义点数据
        var points = [
            {
      longitude: -75.59777, latitude: 40.03883, height: 1000, name: 'Point 1' },
            {
      longitude: -75.60777, latitude: 40.04883, height: 1500, name: 'Point 2' }
        ];

        // 创建点实体并添加到场景
        var pointEntities = [];
        points.forEach(function (point) {
     
            var entity = viewer.entities.add({
     
                position: Cesium.Cartesian3.fromDegrees(point.longitude, point.latitude, point.height),
                point: {
     
                    pixelSize: 10,
                    color: Cesium.Color.RED,
                    outlineColor: Cesium.Color.WHITE,
                    outlineWidth: 2
                },
                label: {
     
                    text: point.name,
                    font: '14px sans-serif',
                    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                    fillColor: Cesium.Color.WHITE,
                    outlineColor: Cesium.Color.BLACK,
                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER
                }
            });
            pointEntities.push(entity);
        });

        // 鼠标悬停高亮效果
        viewer.scene.preRender.addEventListener(function () {
     
            var picked = viewer.scene.pick(viewer.camera.getPickRay(viewer.canvas.getBoundingClientRect()));
            if (Cesium.defined(picked) && picked.id instanceof Cesium.Entity) {
     
                picked.id.point.color = Cesium.Color.YELLOW;
            } else {
     
                pointEntities.forEach(function (entity) {
     
                    entity.point.color = Cesium.Color.RED;
                });
            }
        });
    </script>
</body>

</html>

2. 坐标转换

Cesium提供了多种坐标系统之间的转换方法，常见的有经纬度（地理坐标）与笛卡尔坐标之间的转换。以下是一个简单的示例：

// 经纬度转笛卡尔坐标
var longitude = -75.59777;
var latitude = 40.03883;
var height = 1000;
var cartesian = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);

// 笛卡尔坐标转经纬度
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
var newLongitude = Cesium.Math.toDegrees(cartographic.longitude);
var newLatitude = Cesium.Math.toDegrees(cartographic.latitude);
var newHeight = cartographic.height;

console.log('经纬度转笛卡尔坐标:', cartesian);
console.log('笛卡尔坐标转经纬度:', newLongitude, newLatitude, newHeight);

在上述代码中：

点位加载：通过viewer.entities.add方法创建点实体，并设置其位置、样式和标签。
点位高亮：利用viewer.scene.preRender事件监听鼠标悬停，判断是否选中点实体并改变其颜色。
坐标转换：使用Cesium.Cartesian3.fromDegrees将经纬度和高度转换为笛卡尔坐标，使用Cesium.Cartographic.fromCartesian将笛卡尔坐标转换为经纬度。

请根据你的实际需求调整代码。

cesium 经纬度转屏幕坐标以及屏幕坐标应用

经纬度坐标转屏幕坐标：
在Cesium中，可以使用viewer.scene.globe.project方法将经纬度坐标（Cartographic）转换为屏幕坐标（Cartesian2）。以下是一个示例代码，展示如何将经纬度坐标转换为屏幕坐标：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"</

最低0.47元/天解锁文章