Cesium学习笔记9——鼠标交互绘制

WALL*E

发布时间 2023.12.09阅读数 874 评论数 0

html代码

<!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, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <meta name="description" content="Draw point on terrain with mouse clicks.">
    <meta name="cesium-sandcastle-labels" content="Showcases">
    <title>Draw point</title>
    <script type="text/javascript" src="Sandcastle-header.js"></script>
      <script type="module" src="load-cesium-es6.js"></script>
    <script src="./Build/CesiumUnminified/Cesium.js"></script>
    <script>window.CESIUM_BASE_URL = "./Build/CesiumUnminified/";</script>
  </head>
  <body
    class="sandcastle-loading"
    data-sandcastle-bucket="bucket-requirejs.html"
  >
<style>
    @import url(bucket.css);
        html,
      body,
      #cesiumContainer {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    </style>
    <div id="cesiumContainer" class="fullSize"></div>
    <div id="loadingOverlay"><h1>Loading...</h1></div>
    <div id="toolbar">
      <table class="infoPanel">
        <tbody>
          <tr>
            <td>左键单击绘制点，右击结束线面绘制。</td>
          </tr>
        </tbody>
      </table>
    </div>
    <script src="./code.js"> </script>
</body>
</html>

code.js代码

Cesium.Ion.defaultAccessToken='你的Token';
window.startup = async function (Cesium) {
    'use strict';
    //增加视图区
    const viewer = new Cesium.Viewer("cesiumContainer", {
    selectionIndicator: false,
    infoBox: false,
    terrainProvider: Cesium.createWorldTerrain(),
    imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
                url: "http://t0.tianditu.gov.cn/vec_w/wmts?tk=你的Token" ,
                layer: "vec",
                style: "default",
                tileMatrixSetID: "w",
                format: "tiles",
                maximumLevel: 18,
            }),
    });

    viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
    Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
    );
    function createPoint(worldPosition) {
        const point = viewer.entities.add({
            position: worldPosition,
            point: {
            color: Cesium.Color.RED,
            pixelSize: 5,
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            },
        });
        return point;
    }
    let drawingMode = "line";
    function drawShape(positionData) {
        let shape;
        if (drawingMode === "line") {
            shape = viewer.entities.add({
            polyline: {
                positions: positionData,
                clampToGround: true,
                material: Cesium.Color.RED,
                width: 3,
            },
            });
        } else if (drawingMode === "polygon") {
            shape = viewer.entities.add({
            polygon: {
                hierarchy: positionData,
                material: new Cesium.ColorMaterialProperty(
                Cesium.Color.RED.withAlpha(0.7)
                ),
            },
            });
        }
        return shape;
    }
    let activeShapePoints = [];
    let activeShape;
    let floatingPoint;
    //窗口事件句柄
    const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
    handler.setInputAction(function (event) {
    const ray = viewer.camera.getPickRay(event.position);//根据鼠标点击坐标和相机坐标构建射线
    const earthPosition = viewer.scene.globe.pick(ray, viewer.scene);//射线与球面求交，在地面的交点
    // `earthPosition` will be undefined if our mouse is not over the globe.
    if (Cesium.defined(earthPosition)) //鼠标点击在地球范围内
    {
        if(drawingMode === "point"){
            createPoint(earthPosition);
        }
        else{
        if (activeShapePoints.length === 0) {
        floatingPoint = createPoint(earthPosition);
        activeShapePoints.push(earthPosition);
        const dynamicPositions = new Cesium.CallbackProperty(function () {
            if (drawingMode === "polygon") {
                return new Cesium.PolygonHierarchy(activeShapePoints);
            }
            return activeShapePoints;
        }, false);//回调函数
        activeShape = drawShape(dynamicPositions);
        }
        activeShapePoints.push(earthPosition);
        createPoint(earthPosition);
    }
    }
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);//鼠标左键

    handler.setInputAction(function (event) {
    if (Cesium.defined(floatingPoint)) {
        const ray = viewer.camera.getPickRay(event.endPosition);
        const newPosition = viewer.scene.globe.pick(ray, viewer.scene);
        if (Cesium.defined(newPosition)) {
        floatingPoint.position.setValue(newPosition);
        activeShapePoints.pop();
        activeShapePoints.push(newPosition);
        }
    }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);//鼠标移动
    //移除临时绘制图像.
    function terminateShape() {
        activeShapePoints.pop();
        drawShape(activeShapePoints);
        viewer.entities.remove(floatingPoint);
        viewer.entities.remove(activeShape);
        floatingPoint = undefined;
        activeShape = undefined;
        activeShapePoints = [];
    }
    handler.setInputAction(function (event) {
        terminateShape();
    }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);//鼠标右键

    const options = [
    {
        text: "绘制线",
        onselect: function () {
        if (!Cesium.Entity.supportsPolylinesOnTerrain(viewer.scene)) {
            window.alert(
            "This browser does not support polylines on terrain."
            );
        }

        terminateShape();
        drawingMode = "line";
        },
    },
    {
        text: "绘制面",
        onselect: function () {
        terminateShape();
        drawingMode = "polygon";
        },
    },
    {
        text: "绘制点",
        onselect: function () {
        terminateShape();
        drawingMode = "point";
        },
    },
    ];

    Sandcastle.addToolbarMenu(options);
    //缩放至点
    viewer.camera.lookAt(
        Cesium.Cartesian3.fromDegrees(-122.2058, 46.1955, 1000.0),
        new Cesium.Cartesian3(5000.0, 5000.0, 5000.0)
    );
    viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
    //Sandcastle_End
    Sandcastle.finishedLoading();
};
if (typeof Cesium !== 'undefined') {
    window.startupCalled = true;
    window.startup(Cesium).catch((error) => {
      "use strict";
      console.error(error);
    });
}

效果：

代码 Cesium 虚拟数字地球交互绘制

转载原出处：https://www.cnblogs.com/yhlx125/p/17669949.html

打赏 0

上一篇：Cesium学习笔记8——加载城市建筑物火柴盒模型

下一篇：Cesium学习笔记10——通过WFS服务实现交互式属性查询

Cesium学习笔记9——鼠标交互绘制

WALL*E

为你推荐

Ubuntu 18.04/20.04 CV环境配置（上）：CUDA11.1 + cudnn安装配置

小白开机：旭日x3派和 jetson nano

从曲线图中提取坐标数据

图片加密置乱的评价指标—用matlab对图像进行直方图统计与熵值计算

提升代码开发效率的VSCode插件

Jetson Nano安装Xubuntu 20.04

关于作者

WALL*E

15

0

0

2

Cesium学习笔记9——鼠标交互绘制

精选Cesium学习笔记1——安装配置

OriginBot-起源-机器人

相关推荐

精选linux内核源码分析之物理内存

精选C++实现websocket服务端客户端(基于boost，亲测可行！)

分割常用的评价指标

ROS答疑（六）——如何系统性的进行PID调参

基于旭日X3派的人机共驾控制器行车风险场计算

【git入门教程--基于gitee】

热门泡泡

30积分失眠，聊聊自己搞ROS的心得体会吧

ros学习路线

30积分 TF_REPEATED_DATA ignoring data错误

各位大佬，有什么ROS定位算法推荐吗

5积分想买能用ROS2的开发套件。或者开发板

5积分 ros中启动gazebo时报错

给作者打赏

Cesium学习笔记9——鼠标交互绘制

WALL*E

为你推荐

Ubuntu 18.04/20.04 CV环境配置（上）：CUDA11.1 + cudnn安装配置

小白开机：旭日x3派和 jetson nano

从曲线图中提取坐标数据

图片加密置乱的评价指标—用matlab对图像进行直方图统计与熵值计算

提升代码开发效率的VSCode插件

Jetson Nano安装Xubuntu 20.04

评论（0）

关于作者

WALL*E

15

0

0

2

Cesium学习笔记9——鼠标交互绘制

精选Cesium学习笔记1——安装配置

OriginBot-起源-机器人

相关推荐

精选linux内核源码分析之物理内存

精选C++实现websocket服务端客户端(基于boost，亲测可行！)

分割常用的评价指标

ROS答疑（六）——如何系统性的进行PID调参

基于旭日X3派的人机共驾控制器行车风险场计算

【git入门教程--基于gitee】

热门泡泡

30积分 失眠，聊聊自己搞ROS的心得体会吧

ros学习路线

30积分 TF_REPEATED_DATA ignoring data错误

各位大佬，有什么ROS定位算法推荐吗

5积分 想买能用ROS2的开发套件。或者开发板

5积分 ros中启动gazebo时报错

给作者打赏

忘记密码

修改头像

添加你感兴趣的标签

举报类型（必选）

举报详情（选填）

30积分失眠，聊聊自己搞ROS的心得体会吧

5积分想买能用ROS2的开发套件。或者开发板