本文介绍: cesium测量两点间的距离。

cesium测量两点间的距离

<template>
	<div id="cesiumContainer" style="height: 100vh;"></div>
	<div id="toolbar" style="position: fixed;top:20px;left:220px;">
		<el-breadcrumb>
			<el-breadcrumb-item>量测</el-breadcrumb-item>
			<el-breadcrumb-item>水平距离</el-breadcrumb-item>
		</el-breadcrumb>
		<el-row class="mb-4" style="margin-top: 15px">
			<el-button type="primary" @click="handleDrawPolyline">画线</el-button>
			<el-button type="primary" @click="handleDrawPolylineCancel">清除</el-button>
		</el-row>
	</div>
	<s-mousetip v-if="tip.visible">{{ tip.text }}</s-mousetip>
</template>
<script setup>
import {onMounted, ref} from "vue";
import * as Cesium from "cesium";
import InitCesium from "../js/InitCesiumHide.js";
import DrawStraightLineDistance from "@/assets/utils/measure/DrawStraightLineDistance.js";
import SMousetip from '@/view/cesiumDemo/components/s-mousetip.vue'

let viewer = null;
let drawStraightLine = null;
let tip = ref({
	text: '',
	visible: false
})

onMounted(() => {
	let initCesium = new InitCesium('cesiumContainer')
	viewer = initCesium.initViewer({});
	flyToRight2();
})

const handleDrawPolyline = () => {
	tip.value.text = '左键点击确定起点,再次点击确定终点并结束';
	tip.value.visible = true;
	drawStraightLine = new DrawStraightLineDistance({Cesium: Cesium, viewer: viewer, callback: handleDrawPolylineEnd});
	drawStraightLine.startCreate();
}

const handleDrawPolylineEnd = (polylineData) => {
	tip.value.text = '';
	tip.value.visible = false;
}

const handleDrawPolylineCancel = () => {
	drawStraightLine.clear();
}

const flyToRight2 = () => {
	let camera = viewer.scene.camera;
	camera.flyTo({
		destination: Cesium.Cartesian3.fromDegrees(115.2766, 36.5522, 1500.34),
	});
}
</script>
<style scoped>
#cesiumContainer {
	overflow: hidden;
}
</style>
<style>
.el-breadcrumb__inner {
	color: #ffffff !important;
}
</style>
DrawStraightLineDistance.js
/* 绘制直线  水平距离 */
class DrawStraightLineDistance {
	constructor(arg) {
		this.viewer = arg.viewer;
		this.Cesium = arg.Cesium;
		this.callback = arg.callback;
		this._polyline = null; //活动线
		this._polylineLast = null; //最后一条线
		this._positions = [];  //活动点
		this._entities_point = [];  //脏数据
		this._entities_md_point = [];  //脏数据
		this._entities_md1_point = [];  //脏数据
		this._entities_line = [];  //脏数据
		this._polylineData = null; //用于构造线数据
	}

	//返回最后活动线
	get line() {
		return this._polylineLast;
	}

	//返回线数据用于加载线
	getData() {
		return this._polylineData;
	}

	//加载线
	loadPolyline(data) {
		let that = this;
		let polyline = that.viewer.entities.add({
			polyline: {
				positions: data,
				show: true,
				material: that.Cesium.Color.RED,
				width: 3,
				clampToGround: true
			}
		});
		return polyline;
	}

	//开始创建
	startCreate() {
		let that = this;
		that.handler = new that.Cesium.ScreenSpaceEventHandler(that.viewer.scene.canvas);
		that.handler.setInputAction(function (evt) { //单击开始绘制
			//屏幕坐标转地形上坐标
			let cartesian = that.getCatesian3FromPX(evt.position);
			if (that._positions.length === 0) {
				that._positions.push(cartesian.clone());
			}
			that._positions.push(cartesian);
			that.createPoint(cartesian);// 绘制点
			if (that._positions.length > 2) {
				if (!that._polyline) {
					return;
				}
				that._positions.pop();
				// that._positions.push(cartesian);
				that.createPoint(cartesian);// 绘制点
				that._polylineData = that._positions.concat();
				that.viewer.entities.remove(that._polyline); //移除
				that._polyline = null;
				that._positions = [];
				let line = that.loadPolyline(that._polylineData); //加载线
				that._entities_line.push(line);
				that._polylineLast = line;
				if (typeof that.callback == "function") {
					that.callback(that._polylineData);
				}
				for (let i = 0; i < that._entities_md1_point.length; i++) {
					that.viewer.entities.remove(that._entities_md1_point[i]);
				}
				let distance = that.Cesium.Cartesian3.distance(that._polylineData[0], that._polylineData[1]).toFixed(2);

				// let midPoint = that.Cesium.Cartesian3.midpoint(that._polylineData[0], that._polylineData[1]);
				let midPoint = that.Cesium.BoundingSphere.fromPoints(that._polylineData).center
				that.createMdPoint(midPoint, distance);
				that.handler.destroy();
				that.handler = null;
			}
		}, that.Cesium.ScreenSpaceEventType.LEFT_CLICK);
		this.handler.setInputAction(function (evt) { //移动时绘制线
			if (that._positions.length < 1) return;
			let cartesian = that.getCatesian3FromPX(evt.endPosition);
			if (!that.Cesium.defined(that._polyline)) {
				that._polyline = that.createPolyline();
			}
			if (that._polyline) {
				that._positions.pop();
				that._positions.push(cartesian);
			}
			let distance = that.Cesium.Cartesian3.distance(that._positions[0], that._positions[1]).toFixed(2);

			// let midPoint = that.Cesium.Cartesian3.midpoint(that._polylineData[0], that._polylineData[1]);
			let midPoint = that.Cesium.BoundingSphere.fromPoints(that._positions).center
			that.createMdPoint11(midPoint, distance);
		}, that.Cesium.ScreenSpaceEventType.MOUSE_MOVE);
	}

	//创建点
	createPoint(cartesian) {
		let that = this;
		let point = this.viewer.entities.add({
			position: cartesian,
			point: {
				pixelSize: 10,
				color: that.Cesium.Color.YELLOW,
			}
		});
		that._entities_point.push(point);
		return point;
	}

	//创建点
	createMdPoint(cartesian, distance) {
		let that = this;
		let point = this.viewer.entities.add({
			position: cartesian,
			point: {
				pixelSize: 1,
				color: that.Cesium.Color.YELLOW,
			},
			label: {
				text: '水平距离:' + distance + '米',    //描述内容
				font: '14px Sans-Serif',   //字体大小 类型
				fillColor: that.Cesium.Color.fromCssColorString('#ffffff'),  //颜色
				outlineColor: that.Cesium.Color.GOLD,
				//设置背景颜色透明
				backgroundColor: new that.Cesium.Color(0, 0, 0, 0.7),
				//打开背景  打开背景 (不会被线段覆盖)
				showBackground: true,
				// scaleByDistance: new that.Cesium.NearFarScalar(1000, 1.0, 2000, 0.01),
				// disableDepthTestDistance: Number.POSITIVE_INFINITY
			}
		});
		that._entities_md_point.push(point);
		return point;
	}

	//创建点
	createMdPoint11(cartesian, distance) {
		let that = this;
		for (let i = 0; i < that._entities_md1_point.length; i++) {
			that.viewer.entities.remove(that._entities_md1_point[i]);
		}
		let point = this.viewer.entities.add({
			position: cartesian,
			point: {
				pixelSize: 1,
				color: that.Cesium.Color.YELLOW,
			},
			label: {
				text: '水平距离:' + distance + '米',    //描述内容
				font: '14px Sans-Serif',   //字体大小 类型
				fillColor: that.Cesium.Color.fromCssColorString('#ffffff'),  //颜色
				outlineColor: that.Cesium.Color.GOLD,
				//设置背景颜色透明
				backgroundColor: new that.Cesium.Color(0, 0, 0, 0.7),
				//打开背景  打开背景 (不会被线段覆盖)
				showBackground: true,
				// scaleByDistance: new that.Cesium.NearFarScalar(1000, 1.0, 2000, 0.01),
				// disableDepthTestDistance: Number.POSITIVE_INFINITY
			}
		});
		that._entities_md1_point.push(point);
		return point;
	}

	//创建线
	createPolyline() {
		let that = this;
		let polyline = this.viewer.entities.add({
			polyline: {
				//使用cesium的peoperty
				positions: new that.Cesium.CallbackProperty(function () {
					return that._positions
				}, false),
				show: true,
				material: that.Cesium.Color.RED,
				width: 3,
				clampToGround: true
			}
		});
		that._entities_line.push(polyline);
		return polyline;
	}

	//销毁
	destroy() {
		if (this.handler) {
			this.handler.destroy();
			this.handler = null;
		}
	}

	//清空实体对象
	clear() {
		for (let i = 0; i < this._entities_point.length; i++) {
			this.viewer.entities.remove(this._entities_point[i]);
		}
		for (let i = 0; i < this._entities_md_point.length; i++) {
			this.viewer.entities.remove(this._entities_md_point[i]);
		}
		for (let i = 0; i < this._entities_md1_point.length; i++) {
			this.viewer.entities.remove(this._entities_md1_point[i]);
		}
		for (let i = 0; i < this._entities_line.length; i++) {
			this.viewer.entities.remove(this._entities_line[i]);
		}
		this._polyline = null;
		this._positions = [];
		this._entities_point = [];  //脏数据
		this._entities_md_point = [];  //脏数据
		this._entities_md1_point = [];  //脏数据
		this._entities_line = [];  //脏数据
		this._polylineData = null; //用于构造线数据
		this._polylineLast = null;
		this.destroy();
	}

	getCatesian3FromPX(px) {
		let cartesian;
		let ray = this.viewer.camera.getPickRay(px);
		if (!ray) return null;
		cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);
		return cartesian;
	}
}

export default DrawStraightLineDistance

效果图 

InitCesiumHide.js

import * as Cesium from "cesium";

class InitCesiumHide {

	constructor(cesiumContainer, options) {
		this.cesiumContainer = cesiumContainer;
	}

	initViewer(options) {
		Cesium.Ion.defaultAccessToken = 'token';
		// 西南东北,默认显示中国
		Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(90, -20, 110, 90);
		return new Cesium.Viewer(this.cesiumContainer, {
			animation: false, // 隐藏动画控件
			baseLayerPicker: false, // 隐藏图层选择控件
			fullscreenButton: false, // 隐藏全屏按钮
			vrButton: false, // 隐藏VR按钮,默认false
			geocoder: false, // 隐藏地名查找控件  地理编码
			homeButton: false, // 隐藏Home按钮
			infoBox: false, // 隐藏点击要素之后显示的信息窗口
			sceneModePicker: false, // 隐藏场景模式选择控件
			selectionIndicator: false, // 显示实体对象选择框,默认true
			timeline: false, // 隐藏时间线控件
			navigationHelpButton: false, // 隐藏帮助按钮
			scene3DOnly: true, // 每个几何实例将只在3D中呈现,以节省GPU内存
			shouldAnimate: true, // 开启动画自动播放
			sceneMode: 3, // 初始场景模式 1:2D 2:2D循环 3:3D,默认3
			requestRenderMode: true, // 减少Cesium渲染新帧总时间并减少Cesium在应用程序中总体CPU使用率
			...options
		});
	}
}

export default InitCesiumHide

 

原文地址:https://blog.csdn.net/zslsh44/article/details/136004084

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。

如若转载,请注明出处:http://www.7code.cn/show_65951.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注