cesium-水平测距
cesium测量两点间的距离
量测
水平距离
画线
清除
{{ tip.text }}
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