中国空间站组合体,wordpress 试题,最专业的礼品网站案例参考,网站升级建设文章目录 需求分析1. 点击坐标点实现2. 输入坐标实现 需求 用 Cesium 生成点位坐标#xff0c;并明显标识 分析 以下是我的两种实现方式 第一种是坐标点击实现 第二种是输入坐标实现 1. 点击坐标点实现 //点位坐标getLocation() {this.hoverIndex 0;let that this;this.view… 文章目录 需求分析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 langen
headmeta charsetUTF-8titleCesium Demo/titlescript srchttps://cesium.com/downloads/cesiumjs/releases/1.82/Build/Cesium/Cesium.js/scriptlink hrefhttps://cesium.com/downloads/cesiumjs/releases/1.82/Build/Cesium/Widgets/widgets.css relstylesheetstyle#cesiumContainer {width: 800px;height: 500px;margin: 10px auto;}form {width: 800px;margin: 10px auto;text-align: center;}input[typetext], input[typenumber] {width: 100px;margin-right: 10px;}input[typesubmit] {padding: 5px 10px;background-color: #4CAF50;color: #fff;border: none;cursor: pointer;}/style
/head
bodydiv idcesiumContainer/divform methodpost经度input typetext namelon idlon纬度input typetext namelat idlat高度input typenumber nameheight idheightinput typesubmit value生成点位/formscriptvar 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函数生成点位坐标并将地图缩放到包含点位的视野范围内。
