Cesium 坐标拾取Pick（1）

已于 2024-03-28 21:12:33 修改
阅读量1.1k 收藏 24
点赞数 17
分类专栏： Cesium GIS WebGL 文章标签： 前端 Cesium
于 2024-02-22 14:32:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014556081/article/details/136233087
版权
Cesium 同时被 3 个专栏收录
48 篇文章 44 订阅
订阅专栏
GIS
20 篇文章 1 订阅
订阅专栏
WebGL
20 篇文章 7 订阅
订阅专栏

一、简介

        在Cesium中坐标的拾取非常重要，比如在标绘、测量等功能中需要获取地球表面、地形、三维模型、实体元素等物体表面的经纬度和高程，这样绘制的图形才能准确，拿到的坐标才可以使用。

        与拾取相关的API比较多，不同的API适用的场景不同。比较常用的有scene.pickPosition、scene.pickPositionSupported、scene.pickTranslucentDepth、scene.pick、scene.drillPick、scene.camera.pickEllipsoid、scene.camera.getPickRay、scene.globe.pick等。另外还有一些私有类或者方法有时候也会用到，包括scene.picking、scene.pickFromRay、scene.drillPickFromRay等。

        下面根据我自己在产品封装和项目中实际经验先大致说一下。【不涉及原理细节，拾取原理请等待第2篇文章】

1） scene.pick [拾取到实体对象]

        该API签名为pick(windowPosition, width, height) → Object

        返回一个具有“primitive”属性的对象，该对象包含特定窗口坐标处场景中的第一个（顶部）基元，如果该位置没有任何内容，则返回未定义的对象。可以根据基元的类型潜在地设置其他属性，并且可以用于进一步识别拾取的对象。

        拾取3dtiles后，拾取将返回Cesium3DTileFeature对象。

2)scene.drillPick [拾取到实体对象]

        该API签名为drillPick(windowPosition, limit, width, height) → Array.<*>

        穿透拾取到多个对象。

3）scene.globe.pick[拾取到坐标]

        该API签名为pick(ray, scene, result) → Cartesian3|undefined

        返回射线和地球Globe交点的坐标，Globe包括地形图层、影像图层等，因此拾取到与地形交点的坐标。

4）scene.pickPosition[拾取到坐标]

        该API签名为pickPosition(windowPosition, result) → Cartesian3

        返回从深度缓冲区和窗口位置重建的笛卡尔位置。

5）scene.camera.pickEllipsoid[拾取到坐标]

        该API签名为pickEllipsoid(windowPosition, ellipsoid, result) → Cartesian3|undefined

        拾取椭球体表面的坐标。

        通常拾取坐标的时候要做一些判断，先用scene.pick判断拾取到的对象类型，如果是三维模型（gltf、3dtiles等）或者Entity、primitive等，则调用scene.pickPosition；然后再判断是否加载了地形图层，如果有地形（不是默认地形），则调用scene.globe.pick，否则调用scene.camera.pickEllipsoid。

        也可以调用私有方法scene.drillPickFromRay，这个也是准确的，可以穿透拾取，可以排除掉不想拾取的对象，该API有一些特殊的优势，后续再介绍。

        另外在做绘制功能的时候有时候还需要直接采用拾取到的点对象的坐标作为拾取到的最终坐标。

        在调用scene.drillpick再调用scene.pickPosition会导致坐标不准，参考资料：Result of `pickPosition` changes after call to `drillPick` - CesiumJS - Cesium Community

        其他与拾取相关的博文请参考Cesium的拾取问题总结 - 知乎，Cesium——PICK不同使用场景_cesium pick-CSDN博客

        其他参考资料Graphics Tech in Cesium - Renderer Architecture – Cesium

        How to get the object (ID) of every pixel? - CesiumJS - Cesium Community

        https://github.com/CesiumGS/cesium/blob/1.95/Source/Scene/Scene.js#L154

二、效果

三、代码

<!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>标绘</title>
    <script src="./js/config.js"></script>
    <script src="./scripts/vue.min.js"></script>
    <script type="text/javascript" src="./scripts/element.index.js"></script>
    <link rel="stylesheet" href="./scripts/element.index.css">
    <link rel="stylesheet" href="./css/common.css">
    <script type="text/javascript" src="../anov-gis-sdk/index.js"></script>
    <link rel="stylesheet" href="../anov-gis-sdk/index.css">
    <style>
        .draw-panel {
            height: 70px;
            line-height: 70px;
            padding-left: 20px;
            padding-right: 20px;
        }
    </style>
</head>

<body>
    <div id="global">

    </div>
    <script>
        let g_polylineMeasurement;
        let g_pointMeasurement;
        let g_polygonMeasurement;
        let g_rectMeasurement;
        let g_CirgleMeasurement;
        let g_triangleMeasurement;
        new Vue({
            el: '#global',
            template: `
          <div id="cesiumContainer">
            <div class="draw-click draw-panel">
                <el-row>
                    <el-button type="primary" @click="pointMeasurement">点</el-button>
                    <el-button type="primary" @click="distanceMeasurement">折线</el-button>
                    <el-button type="primary" @click="areaMeasurement">多边形</el-button>
                    <el-button type="primary" @click="areaMeasurement_rect">矩形</el-button>
                    <el-button type="primary    " @click="areaMeasurement_circle">圆</el-button>
                    <el-button type="primary    " @click="addTerrain">地形</el-button> 
                    <el-checkbox style="display:inline-block" @change="depthTest">深度测试</el-checkbox>                                     
                    <el-button type="danger" @click="clearMeasurementResults">清除</el-button>
                </el-row>                
            </div>
          </div>`,
            data() {
                return {
                    tool: "",
                    inited: false
                };
            },
            mounted() {
                this.init3D();
                this.initMeasure();
            },
            methods: {
                init3D() {
                    window.viewer = new ANOVGIS.Viewer("cesiumContainer", {
                        contextOptions: {
                            id: "cesiumCanvas", 
                            webgl: {
                                preserveDrawingBuffer: true, 
                            },
                            showRenderLoopErrors: false,
                        },
                        geocoderType: ANOVGIS.GeocoderType.TIANDITU,
                        vrButton: false,
                        baseLayerPicker: true,
                        fullscreenButton: true,
                        homeButton: true,
                        sceneModePicker: true,
                        navigationHelpButton: true,
                        copyRight: false,
                        showMapInfo: true,
                        drillPick: false
                    });
                    //viewer.scene.debugShowFramesPerSecond = true;

                    const baselayer = ANOVGIS.ImageryLayerFactory.createImageryLayer(
                        ANOVGIS.ImageryType.TDT,
                        {
                            style: "img",
                            key: globalConfig.tdtKey
                        }
                    );
                    viewer.imageryLayers.addImageryProvider(baselayer);
                    this.initMouseEvent();
                    this.add3dtiles();
                    this.addBoxGraphic();
                    this.addModelGraphic();
                },
                initMouseEvent() {
                    viewer.addEventListener(ANOVGIS.MouseEventType.CLICK, (e) => {
                        console.log(e);
                    })
                },
                add3dtiles() {
                    let layer = new ANOVGIS.TilesetLayer();
                    viewer.addLayer(layer);
                    let tileset = new ANOVGIS.Tileset({
                        url: 'http://localhost/gis-share/shanghaiafter/tileset.json'
                    })
                    // tileset.clampToGround();
                    layer.addGraphic(tileset);
                },
                addBoxGraphic() {
                    const redBox = viewer.entities.add({
                        name: "Red box with black outline",
                        position: Cesium.Cartesian3.fromDegrees(121.44, 31.1434, 500.0),
                        box: {
                            dimensions: new Cesium.Cartesian3(400.0, 300.0, 500.0),
                            material: Cesium.Color.RED.withAlpha(0.8),
                            outline: true,
                            outlineColor: Cesium.Color.BLACK,
                        },
                    });
                },
                addModelGraphic() {
                    viewer.entities.add({
                        name: 'modeltest',
                        position: Cesium.Cartesian3.fromDegrees(121.64, 31.6434, 0.0),
                        model: {
                            scale: 1000,
                            uri: 'http://localhost/gis-share/other/CesiumMilkTruck.glb',
                        },
                    });
                },
                addTerrain() {
                    if (window.viewer.terrainProvider instanceof Cesium.EllipsoidTerrainProvider) {
                        const CesiumTerrian = Cesium.createWorldTerrain();
                        viewer.terrainProvider = CesiumTerrian;
                    } else {
                        viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider();
                    }
                },
                depthTest(t) {
                    viewer.scene.globe.depthTestAgainstTerrain = t;
                },                
                initMeasure() {
                    if (!this.inited) {
                        this.inited = true;
                    }
                    this.clear();
                    g_pointMeasurement = new ANOVGIS.DrawPoint(viewer, {
                        justDraw: false,
                        pointSize: 12,
                        pointColor: Cesium.Color.YELLOW,
                        tempPoint_show: true,
                        showToolTip: false,
                        tempPoint_color: Cesium.Color.YELLOW,
                        onCompleted(positions) {
                            console.log(positions);
                        }
                    });
                    g_polylineMeasurement = new ANOVGIS.DrawPolyLine(viewer, {
                        lineColor: Cesium.Color.YELLOW,
                        justDraw: false,
                        onCompleted(positions) {
                            console.log(positions);
                        }
                    });
                    g_polygonMeasurement = new ANOVGIS.DrawPolygon(viewer, {
                        justDraw: false,

                        fillColor: Cesium.Color.YELLOW.withAlpha(0.5),
                        onCompleted(positions) {
                            console.log(positions);
                        }
                    });
                    g_rectMeasurement = new ANOVGIS.DrawRectangle(viewer, {
                        justDraw: false,
                        onCompleted(positions) {
                            console.log(positions);
                        }
                    });
                    g_CirgleMeasurement = new ANOVGIS.DrawCircle(viewer, {
                        justDraw: false,
                        fill: false,
                        outline: true,
                        outlineWidth: 4,
                        outlineColor: ANOVGIS.Color.YELLOW,
                        clampToGround: true,
                        onCompleted(positions) {
                            console.log(positions);
                        }
                    });
                },
                clear() {
                    if (g_polylineMeasurement) {
                        g_polylineMeasurement.clear();
                    }
                    if (g_polygonMeasurement) {
                        g_polygonMeasurement.clear();
                    }
                    if (g_pointMeasurement) {
                        g_pointMeasurement.clear();
                    }
                    if (g_rectMeasurement) {
                        g_rectMeasurement.clear();
                    }
                    if (g_CirgleMeasurement) {
                        g_CirgleMeasurement.clear();
                    }
                },
                end() {
                    if (g_polylineMeasurement) {
                        g_polylineMeasurement.end();
                    }
                    if (g_polygonMeasurement) {
                        g_polygonMeasurement.end();
                    }
                    if (g_pointMeasurement) {
                        g_pointMeasurement.end();
                    }
                    if (g_rectMeasurement) {
                        g_rectMeasurement.end();
                    }
                    if (g_CirgleMeasurement) {
                        g_CirgleMeasurement.end();
                    }
                },
                pointMeasurement: function () {
                    this.end();
                    g_pointMeasurement.startDraw();
                    this.tool = "point";
                },
                distanceMeasurement: function () {
                    this.end();
                    g_polylineMeasurement.startDraw();
                    this.tool = "distance";
                },
                triangleMeasurement: function () {
                    this.end();
                    g_triangleMeasurement.startDraw();
                    this.tool = "triangle";
                },
                areaMeasurement: function () {
                    this.end();
                    g_polygonMeasurement.startDraw();
                    this.tool = "area";
                },
                areaMeasurement_rect: function () {
                    this.end();
                    g_rectMeasurement.startDraw();
                    this.tool = "area_rect";
                },
                areaMeasurement_circle: function () {
                    this.end();
                    g_CirgleMeasurement.startDraw();
                    this.tool = "area_circle";
                },
                clearMeasurementResults: function () {
                    this.clear();
                    this.tool = "";
                }
            }
        });
    </script>
</body>

</html>

苹果园dog
关注
  • 17
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Cesium 坐标转换,cesium坐标系
09-11
1. WGS84到Web Mercator：当你需要在Cesium中展示来自Web地图服务的数据时，需要将WGS84坐标转换为Web Mercator坐标。Cesium提供了`Cartographic`和`WebMercatorUtility`类来实现这个转换。 2. Web Mercator到WGS84...
Cesium——PICK不同使用场景
等花开一起压花路
03-02 1253
拾取有多个方法，下面比较pick的不同使用场景pick方法参数场景ps鼠标位置拾取EntityPrimitive3D-Tiles对象只能获取一个对象，并且获取的是最顶部的对象鼠标位置拾取点击模型表面的Cartesian3坐标一定要开启深度检测鼠标位置获取所有对象的对象列表entity集合），列表按其在场景中的视觉顺序（从前到后）排序drillPick可以设置limit参数，限制获取的对象个数射线找到射线与渲染的地球表面之间的交点。
Cesium 点击获取/拾取（PICK）的不同用法
qq_17627195的博客
01-11 6531
可以理解为穿透拾取，是从当前拾取位置获取所有对象的对象列表（entity的集合），列表按其在场景中的视觉顺序（从前到后）排序（通过for循环可以获取当前坐标下的所有entity）。），否则在没有3dTile模型的情况下，会出现空间坐标不准的问题，如果不开启深度检测，只能在3dTile模型上获取准确的空间坐标。在加载地形的情况下有误差，地形凹凸程度越大，误差越大，所以不要用来获取有地形的坐标。只能获取一个对象，并且获取的是最顶部的对象。主要是用于拾取对应位置的世界坐标，例如：拾取点击模型表面的坐标。
cesium入门学习3-影像图层ImageryLayer
最新发布
this__valve的博客
05-29 232
cesium
cesium 射线 碰撞检测 拾取 ray drillPickFromRay
AllBluefm的专栏
04-26 591
cesium 射线 碰撞检测 拾取 ray drillPickFromRay
Cesium的pickEllipsoid和pickPosition的区别
wgf1997的博客
07-16 4233
最近实现Cesium手动绘制图形的功能，需要鼠标点击及移动时获取当前的空间坐标。实现的过程中发现了下面两种获取空间坐标的方式： viewer.camera.pickEllipsoid viewer.scene.pickPosition 在Cesium Sandcastle给出的绘制示例中，采用了pickPosition的方式获取空间坐标，并给出如下注释： Csium绘制示例 大致可理解为viewer.camera.pickEllipsoid 在加载地形的场景上获取的坐标有误差，用viewer.
cesium中pick整理
leo的博客
03-31 190
cesium中pick整理。
Cesium从入门到放弃5：屏幕坐标转世界坐标的方法对比
不去想结果，一直在路上
12-31 1685
Cesium从屏幕坐标(pixel）获得世界坐标(cartesian)的方法大概有三种。 1.camera.getPickRay(pixel) 2.camera.pickEllipsoid(pixel) 3.scene.pickPosition(pixel) 它们的区别如下： 1.pickEllipsoid获得的是二维坐标，即高永远为0，当视高较大时（经测试，这个值大约为80万m），不严格为0，是...
cesium坐标系转换
02-27
在cesium中，遇到坐标系不统一的问题，本文可以提供火星坐标、百度坐标、WGS84坐标转换实现方法，纯代码
Cesium-1.114
02-19
【Cesium-1.114】是Cesium的一个特定版本，Cesium是一个开源的JavaScript库，主要用于创建交互式的3D地球浏览器。这个版本（1.114）提供了丰富的功能，包括地理空间数据可视化、地形渲染、卫星图像集成、3D模型加载...
Cesium 坐标转换,cesium坐标系源码.zip
10-15
1. **坐标系统基础** - **WGS84**：全球定位系统（GPS）使用的标准坐标系，基于地球椭球模型，提供全球一致的三维坐标（经度、纬度、海拔）。 - **Web Mercator**：也称为Google Maps坐标系，适用于Web地图服务，...
76.（cesium篇）cesium笛卡尔坐标（世界坐标）与屏幕坐标转换.zip
04-27
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“76.（cesium篇）cesium笛卡尔坐标（世界坐标）与屏幕坐标转换”。如下载有问题，可联系博主。
73.（cesium篇）cesium笛卡尔坐标（世界坐标）与经纬度坐标转换.zip
04-24
该资源包的执行效果查看地址：https://blog.csdn.net/m0_60387551/article/details/123184049 “地图之家”专栏中的“73.（cesium篇）cesium笛卡尔坐标（世界坐标）与经纬度坐标转换”。如下载有问题，可联系博主。
Cesium-1.63.1
11-12
这个“Cesium-1.63.1”压缩包包含了2019年11月6日官方发布的最新版本，为开发者提供了一系列增强的特性、优化和修复。 1. **Cesium版本1.63.1详解**： - 版本迭代：每个版本的更新都旨在提升性能，增加新功能和...
64.（cesium篇）cesium根据坐标位置获取地形高度.zip
12-06
1. **Cesium的地形模型**：Cesium支持多种地形提供者，如USGS的地形数据（STK Terrain）、Digital Elevation Model (DEM) 等。这些数据被抽象成地形提供者对象，它们负责加载和解析地形数据，提供地形表面的高度信息...
cesium 最新版本8月1
08-25
在"cesium 最新版本8月1"中，我们可以关注以下几个关键知识点： 1. **版本更新**：最新版本8月1可能包含了对旧版的改进和优化，比如性能提升、新功能添加或已知问题的修复。通常，开发者会在`CHANGES.md`文件中记录...
Cesium 同时拾取多个对象与 1024*1024 个坐标
总要开始写的博客
10-24 1836
如果直接使用 Cesium 定义的方式实现同时拾取 m 个点，就需要额外增加 m 个渲染批次，如果 m 为上百万，那计算损耗是非常大的。但是，如果我们可以定义 pick 的视锥，并规定深度图的大小为 n*n，通过一次离屏的深度测试后，再将深度图上的点全部转化为世界坐标，就可以实现仅通过增加一趟额外的渲染，就能够拾取到一定范围内的 n*n 个坐标点。
cesium常见操作：鼠标点击获取对象
happy81997的博客
02-27 3595
在 Cesium 的场景组织中，有那么几个容器构成了三维世界：Scene：包括了 Globe，除了 Globe 的元素外，还加上了 Primitive、Entity、DataSource 等三维物件Globe：包括了 Ellipsoid，还包括了所有的影像图层、地形瓦片，可以算是椭球体上面的皮肤Ellipsoid：一个数学公式所定义的旋转椭球体，代表一个纯粹的地球椭球形状。
cesium拾取pick系列（拾取坐标和对象）
挣钱花388的博客
10-18 3126
1window.viewer.scene拾取 1.1 window.viewer.scene.pick 1.2 window.viewer.scene.pickPosition 1.3 window.viewer.scene.drillPick 2window.viewer.scene.camera拾取 3window.viewer.scene.globe拾取 4window.viewer.imageryLayers.pickImageryLayerFeatures 拾取
cesium坐标拾取
10-13
Cesium提供了多种方式进行坐标拾取，其中一种常用的方式是使用Scene.pickPosition方法。该方法可以返回相机位置到鼠标点击位置的射线与地球表面的交点坐标。 示例代码如下： ``` var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); handler.setInputAction(function(movement) { var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, viewer.scene.globe.ellipsoid); if (cartesian) { var cartographic = Cesium.Cartographic.fromCartesian(cartesian); console.log(Cesium.Math.toDegrees(cartographic.longitude), Cesium.Math.toDegrees(cartographic.latitude)); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

苹果园dog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值