模仿火星科技 基于cesium+角度测量+高度测量+可编辑

1. 创建提示窗:

启动Cesium应用,地图场景将打开,欢迎您进入编辑模式。
在屏幕的一角,一个友好的提示窗将呈现,随着您的操作,它会为您提供有用的信息和指导。
2. 绘制面积:

轻轻点击鼠标左键,地图上会出现一个闪烁的点,它标记了您绘制多边形的起点。
随着鼠标的移动,绘制线条会自动连接起点与当前位置,创造出您所希望的形状。
3. 删除不完美:

如果您绘制错了,不用担心!只需轻击鼠标右键,Cesium会神奇地删除您刚刚绘制的最后一段线条,让您得以纠正错误。
4. 完美结束:

当您满意您绘制的多边形时,双击鼠标左键,绘制过程将结束。
地图上的多边形将成为您创造的一件艺术品,展现您的创作才华。
5. 鼠标提示窗:

您的创作过程仍然在继续,提示窗将为您展示下一步操作,为您提供方向和鼓励。
6. 拖拽编辑不规则面:

通过轻触鼠标,您可以点击并拖动多边形的各个顶点,随心所欲地调整形状。
多边形将变得与您的期望相符,如同一张能随意变幻的画布。
效果图如下:

 角度测量:https://download.csdn.net/download/weixin_42539678/88189910​​​​​​

高度测量:https://download.csdn.net/download/weixin_42539678/88189924

体验地址:47.94.102.38:1463/dist/#/

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
在 Vue2 中使用 Cesium 测量面积可以按照以下步骤进行: 1. 首先,在您的 Vue 项目中安装 Cesium 库。您可以使用 npm 或 yarn 进行安装: ```shell npm install cesium --save ``` 或 ```shell yarn add cesium ``` 2. 在您的 Vue 组件中,导入 Cesium 并创建一个地图容器: ```javascript import * as Cesium from 'cesium/Cesium'; export default { mounted() { this.viewer = new Cesium.Viewer(this.$refs.mapContainer, { animation: false, timeline: false, }); }, destroyed() { this.viewer.destroy(); }, ... } ``` 3. 添加一个按钮或其他触发测量的元素,并在点击事件中执行测量操作: ```javascript methods: { measureArea() { const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.canvas); const positions = []; handler.setInputAction((click) => { const cartesian = this.viewer.camera.pickEllipsoid( click.position, this.viewer.scene.globe.ellipsoid ); positions.push(cartesian); }, Cesium.ScreenSpaceEventType.LEFT_CLICK); handler.setInputAction(() => { handler.destroy(); const area = Cesium.Cartographic.fromCartesian( Cesium.PolygonGeometryLibrary.computeArea2D(positions) ).area; alert('Measured area: ' + area + ' square meters'); }, Cesium.ScreenSpaceEventType.RIGHT_CLICK); }, ... } ``` 上述代码创建了一个点击事件,每次左键点击时,会获取点击位置的笛卡尔坐标并将其存储在 `positions` 数组中。当右键点击时,测量结束,并且计算出多边形的面积。 注意:这里的面积单位是平方米,您可以根据需要进行单位转换。 4. 在模板中添加一个地图容器元素: ```html <div ref="mapContainer" class="map-container"></div> ``` 这里使用了一个带有 `ref` 属性的 `div` 元素来作为地图的容器。 5. 根据需要,您可以通过 CSS 来设置地图容器的样式,使其具有所需的大小和位置。 这样,您就可以在 Vue2 中使用 Cesium 测量面积了。请注意,以上代码只是一个基本示例,您可以根据实际需求进行调整和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

小白学过的代码

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

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

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

打赏作者

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

抵扣说明:

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

余额充值