Cesium空间量算——生成点位坐标
- 互联网
- 2025-08-19 00:33:02
文章目录 需求分析1. 点击坐标点实现2. 输入坐标实现 需求
用 Cesium 生成点位坐标，并明显标识
分析以下是我的两种实现方式 第一种是坐标点击实现 第二种是输入坐标实现
1. 点击坐标点实现 //点位坐标 getLocation() { this.hoverIndex = 0; let that = this; this.viewer.screenSpaceEventHandler.setInputAction(function(movement) { var position = viewer.scene.pickPosition(movement.position); var cartographicPos = Cesium.Cartographic.fromCartesian(position); var lonDegree = Cesium.Math.toDegrees(cartographicPos.longitude); var latDegree = Cesium.Math.toDegrees(cartographicPos.latitude); var text = "经度：" + lonDegree.toFixed(6); text += "\n纬度："; text += latDegree.toFixed(6); text += "\n高度："; text += cartographicPos.height.toFixed(2); text += "米"; var labelEntity = viewer.entities.add({ position: Cesium.Cartesian3.clone(position), billboard: { position: Cesium.Cartesian3.clone(position), verticalOrigin: Cesium.VerticalOrigin.BOTTOM, image: "/static/images/spaceComputed/menu_icon_lv1_1_trenddraw.png", }, label: { text: text, font: "18px sans-serif", horizontalOrigin: Cesium.HorizontalOrigin.LEFT, verticalOrigin: Cesium.VerticalOrigin.BASELINE, style: Cesium.LabelStyle.FILL_AND_OUTLINE, fillColor: Cesium.Color.WHITE, outlineColor: Cesium.Color.RED, outlineWidth: 1.0, heightReference: Cesium.HeightReference.NONE, pixelOffset: new Cesium.Cartesian2(18.0, -18) }, }); that.pointLocationLabels.push(labelEntity); }, Cesium.ScreenSpaceEventType.LEFT_CLICK); }, 2. 输入坐标实现以下是一个简单的 Cesium 输入生成点位坐标的demo，包含了一个用于输入经纬度和高度的表单和一个用于显示地图的div容器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Cesium Demo</title> <script src=" cesium /downloads/cesiumjs/releases/1.82/Build/Cesium/Cesium.js"></script> <link href=" cesium /downloads/cesiumjs/releases/1.82/Build/Cesium/Widgets/widgets.css" rel="stylesheet"> <style> #cesiumContainer { width: 800px; height: 500px; margin: 10px auto; } form { width: 800px; margin: 10px auto; text-align: center; } input[type="text"], input[type="number"] { width: 100px; margin-right: 10px; } input[type="submit"] { padding: 5px 10px; background-color: #4CAF50; color: #fff; border: none; cursor: pointer; } </style> </head> <body> <div id="cesiumContainer"></div> <form method="post"> 经度：<input type="text" name="lon" id="lon"> 纬度：<input type="text" name="lat" id="lat"> 高度：<input type="number" name="height" id="height"> <input type="submit" value="生成点位"> </form> <script> var viewer = new Cesium.Viewer('cesiumContainer'); var entity; function addPoint(lon, lat, height) { if (entity) { viewer.entities.remove(entity); } entity = viewer.entities.add({ name: 'Point', position: Cesium.Cartesian3.fromDegrees(lon, lat, height), point: { pixelSize: 10, color: Cesium.Color.YELLOW } }); viewer.zoomTo(entity); } document.querySelector('form').addEventListener('submit', function (event) { event.preventDefault(); var lon = parseFloat(document.querySelector('#lon').value); var lat = parseFloat(document.querySelector('#lat').value); var height = parseFloat(document.querySelector('#height').value) || 0; addPoint(lon, lat, height); }); </script> </body> </html>在上述代码中，我们创建了一个用于输入经纬度和高度的表单和一个用于显示地图的div容器，通过Cesium.Viewer对象实现了创建地图的功能。当用户填写表单并提交时，我们调用addPoint函数生成点位坐标，并将地图缩放到包含点位的视野范围内。
Cesium空间量算——生成点位坐标由讯客互联互联网栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“Cesium空间量算——生成点位坐标”
