Skip to content

V
vue-cesium-lyc
Commit a81e611b by lyc
Options

21

parent cc0b55de
Showing with 573 additions and 49 deletions
src/App.vue
......@@ -18,38 +18,46 @@ import xyz from './components/xyz.vue'
import shiye from './components/shiye.vue'
//封装
import point from './encapsulation/point.vue'
import lineq from './encapsulation/line.vue'
import polygonq from './encapsulation/polygon.vue'
// import station from './encapsulation/station.vue'
import sensor from './encapsulation/sensor.vue'
export default {
name: 'app',
components: {
boom, demo, draw, moon, fire, selt, sun, camera, dail, baozha, kedupan, raotaiyang, qq, setl, xyz, shiye,
point
point, lineq,polygonq,sensor
}
}
</script>
<template>
<!-- <fire/> -->
<!-- <demo/> -->
<!-- <kedupan/> -->
<!-- <boom></boom> -->
<!-- <baozha/> -->
<!-- <moon></moon> -->
<!-- <sun/> -->
<!-- <selt/> -->
<!-- <draw/> -->
<!-- <camera/> -->
<!-- <dail/> -->
<!-- <raotaiyang/> -->
<!-- <qq/> -->
<!-- <xyz/> -->
<!-- <setl/> -->
<!-- <shiye/> -->
<point/>
<!-- <demo/> -->
<!-- <kedupan/> -->
<!-- <boom></boom> -->
<!-- <baozha/> -->
<!-- <moon></moon> -->
<!-- <sun/> -->
<!-- <selt/> -->
<!-- <draw/> -->
<!-- <camera/> -->
<!-- <dail/> -->
<!-- <raotaiyang/> -->
<!-- <qq/> -->
<!-- <xyz/> -->
<!-- <setl/> -->
<!-- <shiye/> -->
<!-- <lineq/> -->
<!-- <point/> -->
<!-- <polygonq/> -->
<!-- <station/> -->
<sensor/>
</template>
......
src/components/demo.vue
......@@ -14,9 +14,60 @@ let viewer
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: Cesium.createWorldTerrain(),
})
const positions = new Cesium.SampledPositionProperty();
const startTime = Cesium.JulianDate.now();
var stop = Cesium.JulianDate.addSeconds(startTime, 360, new Cesium.JulianDate());
viewer.clock.startTime = startTime.clone();
viewer.clock.stopTime = stop.clone();
const times = [
Cesium.JulianDate.addSeconds(startTime, 0, new Cesium.JulianDate()),
Cesium.JulianDate.addSeconds(startTime, 1, new Cesium.JulianDate()),
Cesium.JulianDate.addSeconds(startTime, 2, new Cesium.JulianDate())
];
const positionsArray = [
Cesium.Cartesian3.fromDegrees(-75.10, 39.57),
Cesium.Cartesian3.fromDegrees(-80.12, 25.46),
Cesium.Cartesian3.fromDegrees(-70.56, 30.12)
];
for (let i = 0; i < times.length; i++) {
positions.addSample(times[i], positionsArray[i]);
}
const polyline = viewer.entities.add({
polyline: {
positions: new Cesium.CallbackProperty(() => {
// 获取当前位置的动态数据
return positions.getValue(viewer.clock.currentTime) ;
}, false),
// positions:positions,
width: 5,
material: new Cesium.PolylineGlowMaterialProperty({
glowPower: 0.2,
color: Cesium.Color.YELLOW
})
}
});
console.log(polyline.positions)
viewer.zoomTo(polyline);
let glowPower = 0.2;
let increasing = true;
viewer.scene.preRender.addEventListener(() => {
glowPower += increasing ? 0.01 : -0.01;
if (glowPower >= 0.5 || glowPower <= 0.2) {
increasing = !increasing;
}
polyline.polyline.material = new Cesium.PolylineGlowMaterialProperty({
glowPower: glowPower,
color: Cesium.Color.YELLOW
});
});
// // 添加太阳
// const sun = new Cesium.Sun();
// viewer.scene.sun = sun;
......@@ -248,27 +299,27 @@ onMounted(() => {
// material:Cesium.Color.YELLOW
// }
// })
let point0 = Cesium.Cartesian3.fromDegrees(120, 10);
let point1 = Cesium.Cartesian3.fromDegrees(120, 20);
let point2 = Cesium.Cartesian3.fromDegrees(121, 30);
let localToWorldMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(point0);
let worldToLocalMatrix = Cesium.Matrix4.inverse(localToWorldMatrix, new Cesium.Matrix4());
// console.log(localToWorldMatrix, point1, worldToLocalMatrix)
// 计算 localVector
let worldVector = Cesium.Cartesian3.subtract(point1, point0, new Cesium.Cartesian3());
let localVector = Cesium.Matrix4.multiplyByPointAsVector(worldToLocalMatrix, worldVector, new Cesium.Cartesian3());
// console.log(point0, point1, point2)
// console.log(worldVector, localVector)
// localVector 向量归一化
let direction = Cesium.Cartesian3.normalize(localVector, new Cesium.Cartesian3());
// console.log(direction)
let angleToX = Math.atan2(direction.y, direction.x);
let heading = Cesium.Math.toDegrees(angleToX);
console.log(heading)
if (heading > 0) { }
else heading = 360 + heading
console.log(heading)
// let point0 = Cesium.Cartesian3.fromDegrees(120, 10, 10);
// let point1 = Cesium.Cartesian3.fromDegrees(120, 20, 20);
// let point2 = Cesium.Cartesian3.fromDegrees(121, 30, 0);
// let localToWorldMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(point0);
// let worldToLocalMatrix = Cesium.Matrix4.inverse(localToWorldMatrix, new Cesium.Matrix4());
// // console.log(localToWorldMatrix, point1, worldToLocalMatrix)
// // 计算 localVector
// let worldVector = Cesium.Cartesian3.subtract(point1, point0, new Cesium.Cartesian3());
// let localVector = Cesium.Matrix4.multiplyByPointAsVector(worldToLocalMatrix, worldVector, new Cesium.Cartesian3());
// // console.log(point0, point1, point2)
// // console.log(worldVector, localVector)
// // localVector 向量归一化
// let direction = Cesium.Cartesian3.normalize(localVector, new Cesium.Cartesian3());
// // console.log(direction)
// let angleToX = Math.atan2(direction.y, direction.x);
// let heading = Cesium.Math.toDegrees(angleToX);
// console.log(heading)
// if (heading > 0) { }
// else heading = 360 + heading
// console.log(heading)
// const polygon = viewer.entities.add({
// polygon: {
......
src/encapsulation/line.vue 0 → 100644
<template>
<div id="cesiumContainer" class="all"></div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
const viewer = new Cesium.Viewer("cesiumContainer", {
})
})
</script>
<style>
.all {
display: block;
position: absolute;
top: 0;
left: 0;
border: none;
width: 100%;
height: 100%
}
</style>
src/encapsulation/point.vue
<template>
<div id="cesiumContainer" class="all"></div>
<div class="absolute top-2000 left-20">
<div class="absolute top-200px left-20px">
<button @click="delete1">删除</button>
</div>
<button @click="update" class="absolute top-20 left-2">设置点的属性</button>
......@@ -77,10 +77,5 @@ function update() {
display: none;
}
button {
position: absolute;
top: 50px;
left: 50px;
z-index: 88;
}
</style>
src/encapsulation/polygon.vue 0 → 100644
<template>
<div id="cesiumContainer" class="all"></div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
let entity
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
const viewer = new Cesium.Viewer("cesiumContainer", {
})
})
</script>
<style>
.all {
display: block;
position: absolute;
top: 0;
left: 0;
border: none;
width: 100%;
height: 100%
}
.cesium-viewer-bottom {
display: none;
}
</style>
src/encapsulation/sensor.vue 0 → 100644
<template>
<div id="cesiumContainer" class="all"></div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
// import Sensor from '/src/js/Sensor.js'
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
const viewer = new Cesium.Viewer("cesiumContainer", {
})
// var start = new Cesium.JulianDate.fromDate(new Date());
// start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate());
// let entity = {
// id: 'station',
// position: Cesium.Cartesian3.fromDegrees(-70, 30, 100)
// }
// entity = new Sensor(viewer, entity)
})
</script>
<style>
.all {
display: block;
position: absolute;
top: 0;
left: 0;
border: none;
width: 100%;
height: 100%
}
.cesium-viewer-bottom {
display: none;
}
</style>
src/encapsulation/station.vue 0 → 100644
<template>
<div id="cesiumContainer" class="all"></div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'cesium'
import Station from '/src/js/station.js'
let entity
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
const viewer = new Cesium.Viewer("cesiumContainer", {
})
var start = new Cesium.JulianDate.fromDate(new Date());
start = Cesium.JulianDate.addHours(start, 8, new Cesium.JulianDate());
let entity = {
id: 'station',
position: Cesium.Cartesian3.fromDegrees(-70,30,100)
}
entity = new Station(viewer, entity)
})
</script>
<style>
.all {
display: block;
position: absolute;
top: 0;
left: 0;
border: none;
width: 100%;
height: 100%
}
.cesium-viewer-bottom {
display: none;
}
</style>
src/js/polygon.js
import * as Cesium from 'cesium'
/**
* @class 平面区域类
* @classdesc 基于Entity.Polygon封装的区域
*/
class polygon {
/**
* 区域的构造函数
* @param {Object} map - Viewer对象
* @param {String} [id] - 区域的对象ID
* @param {Array<Array>} [positions] - 区域范围
* @param {Boolean} [visible=true] - 区域的显隐性
* @param {String} [color='rgb(255,0,0)'] - 区域的颜色
* @param {Number} [alpha=1.0] - 区域的不透明度
* @param {String} [name='polygon'] - 区域的名称
* @param {Boolean} [nameVisible=true] - 区域名称的可见性
* @param {Number} [nameSize=14] - 区域名称的大小
* @param {Array} [nameOffset=[10,0]] - 区域名称的偏移
* @param {Boolean} [lineVisible] - 线的可见性
* @param {String} [lineStyle='solid'] - 线的样式
* @param {Number} [lineWidth=1] - 线的宽度
* @param {Boolean} [pointVisible] - 中心点可见性
* @param {Number} [pointSize] - 中心点尺寸
* @param {Array} [centerPosition] - 中心点位置
* @param {Number} [extrudedHeight] -
* @param {Number} [extrudedAlpha] -
* @param {Number} [extrudedOutlineColor] -
* @param {Number} [extrudedOutlineVisible] -
*/
constructor() {
const POLYGON = {
id: 'pplygon',
positions: null,
visible: true,
color: Cesium.Color(255, 0, 0),
alpha: 1.0,
name: 'polygon',
nameVisible: true,
nameSize: 14,
nameOffset: [10, 0],
lineVisible: false,
lineStyle: solid,
lineWidth: 1,
}
}
/**
* 设置点位的回调函数
*/
_setCallback() {}
/**
* 获取点，拾取模型（效果未知）
*/
getKeyPoint() {}
/**
* 从场景中移除区域
*/
removeFromScene() {}
}
src/js/sensor.js 0 → 100644
import * as Cesium from "cesium";
import JulianDate from "cesium/Source/Core/JulianDate";
/**
* @class 传感器类
* @classdesc 该类用于在Cesium场景中创建传感器
*/
class Sensor {
/**
* 传感器构造函数
* @param {Object} viewer - viewer对象
* @param {String} parentId - 绑定对象ID
* @param {String} [id] - 传感器ID
* @param {String} [sensorType='simpleConic'] - 传感器类型 simpleConic-简单锥体;rectangular-矩形视场;halfPower-半功率;complexConic-复杂锥体
* @param {Number} [radius=40000000] - 传感器距离
* @param {Boolean} [visible=true] - 传感器显隐性
* @param {Number} [coneHalfAngle=30] - 简单锥体传感器半角大小
* @param {Number} [xHalfAngle=30] - 矩形视场传感器水平半角大小
* @param {Number} [yHalfAngle=45] - 矩形视场传感器垂直半角大小
* @param {Number} [innerHalfAngle=10] - 复杂锥体传感器内部半角
* @param {Number} [outerHalfAngle=45] - 复杂锥体传感器外部半角
* @param {Number} [minClockAngle=0] - 复杂锥体传感器竖直最小时钟角
* @param {Number} [maxClockAngle=360] - 复杂锥体传感器竖直最大时钟角
* @param {String} [color='rgb(255,0,0)'] - 传感器颜色
* @param {Number} [alpha=1] - 传感器透明度
* @param {String} [lineColor='rgb(255,0,0)'] - 线颜色
* @param {Number} [lineAlpha=1] - 线不透明度
* @param {Number} [lineWidth] - 线宽度
* @param {Number} [heading=0] - 方位角
* @param {Number} [pitch=90] - 俯仰角
* @param {Number} [roll=0] - 滚动角
* @param {Boolean} [showPause=false] - 脉冲显隐性
* @param {Number} [speed=1] - 脉冲速度
* @param {Number} [waveSpreadDistance=10000] - 脉冲宽度
* @param {Boolean} [waveDirection=true] - 脉冲方向
* @param {Number} [maxAlpha=0.5] - 脉冲间隙最大透明度
* @param {Number} [minAlpha=0.5] - 脉冲间隙最小透明度
* @param {Boolean} [gridVisible] - 传感器网格显隐性
* @param {Number} [gridAlpha] - 传感器网格透明度
*/
constructor(viewer,options={}) {
const viewer = map
this.entityCollection = viewer.entities;
const SENSOR = {
parentId: null,
id: null,
sensorType: 'simpleConic',
radius: 40000000,
visible: true,
coneHalfAngle: 30,
xHalfAngle:30,
yHalfAngle: 45,
innerHalfAngle: 10,
outerHalfAngle: 45,
minClockAngle: 0,
maxClockAngle: 360,
color: 'rgb(255,0,0)',
lineAlpha: 1,
lineWidth: 5,
heading: 0,
pitch: 90,
roll: 0,
showPause: false,
speed: 1,
waveSpreadDistance: 10000,
waveDirection: true,
maxAlpha : 0.5,
minAlpha: 0.5,
gridVisible:null,
gridAlpha:null,
};
const finalOptions = { ...SENSOR, ...options };
const { position, id, ...sensorOptions } = finalOptions;
this.entity = viewer.entities.add({
id: id,
position: position,
ellipsoid: {
radii:sensorOptions.radius,
innerRadii: [1,1,1],
minimumClock: ,
maximumClock: ,
minimumCone: ,
maximumCone: ,
material: {
color:
},
outline: ,
outlineColor: ,
outlineWidth: ,
stackPartitions: ,
slicePartitions: ,
subdivisions: ,
distanceDisplayCondition: ,
}
})
}
/**
* 绑定设备
* @param {String} id - 传感器所属设备
*/
bindObject(id) {}
/**
* 查询某一时间下的传感器位置
* @param {JulianDate} time - 查询时间
*/
getPosition(time) {}
/**
* 获取传感器显隐性
* @returns {Boolean} true-显示;false-隐藏
*/
getVisible() {}
/**
* 设置传感器的属性
*/
setProperty() {}
/**
* 设置传感器在指定时段内的显隐性
* @param {Array} times - 时间区间
*/
setVisibleTimes(times) {}
/**
* 从场景中移除该传感器
*/
removeFromScene() {}
}
export default Sensor;
\ No newline at end of file
src/js/station.js 0 → 100644
import * as Cesium from "cesium";
/**
* @class 站点类
* @classdesc 创建有一个站点
*/
class station {
/**
* 构造函数
* @param {Object} map - viewer对象
* @param {String} [id] - 站点ID
* @param {Cesium.Cartesian3} [viewForm] - 追踪相机位置
* @param {Array} [position] - 点位
* @param {Boolean} [visible=true] - 显隐性
* @param {String} [color='rgb(255,0,0)'] - 站点颜色
* @param {Number} [alpha=1.0] - 站点透明度
* @param {Number} [heading=0] - 方位角
* @param {Number} [pitch=0] - 俯仰角
* @param {Number} [roll=0] - 滚动角
* @param {String} [name='station'] - 站点名称
* @param {Number} [nameSize=14] - 站点名称尺寸
* @param {Boolean} [nameVisible=true] - 站点名称可见性
* @param {Array} [nameOffset=[10,0]] - 站点名称偏移
* @param {String} [modelUrl] 站点模型地址
* @param {Number} [modelScale=1] 站点模型缩放比例
* @param {Boolean} [modelVisible=true] 站点模型可见性
* @param {Array} [modelDistance=[0,500000]] 站点模型可见范围
* @param {String} [markUrl] 站点标记图案地址
* @param {Number} [markSize=10] 站点标记尺寸
* @param {Boolean} [markVisible=true] 站点标记可见性
* @param {Array} [markDistance=[500000,300000000]] 站点标记可见范围
*/
constructor(map, options = {}) {
const viewer = map
this.entityCollection = viewer.entities;
const STATION = {
id: null,
viewForm: null,
position: null,
visible: true,
color: Cesium.Color.fromBytes(255,0,0),
alpha: 1.0,
heading: 0,
pitch: 0,
roll: 0,
name: 'station',
nameSize: 14,
nameVisible: true,
nameOffset: [10, 0],
modelUrl: '',
modelScale: 1,
modelVisible: false,
modelDistance:[0,500000],
markUrl: '',
markScale: 10,
markVisible: false,
markDistance: [500000,300000000]
};
const finalOptions = { ...STATION, ...options };
const { position, id, ...stationOptions } = finalOptions;
this.entity = viewer.entities.add({
id: id,
position: position,
elliposd: stationOptions.visible ? {
radii:
color: Cesium.Color.clone(stationOptions.color).withAlpha(stationOptions.alpha)
}: undefined,
// label: pointOptions.nameVisible ? {
// text: pointOptions.name,
// font: `${pointOptions.nameSize}px sans-serif`,
// fillColor: Cesium.Color.WHITE,
// pixelOffset: new Cesium.Cartesian2(...pointOptions.nameOffset),
// } : undefined,
// model: pointOptions.modelVisible ? {
// uri: pointOptions.modelUrl,
// scale: pointOptions.modelScale,
// minimumPixelSize: 640,
// maximumScale: 20000,
// modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(
// position,
// new Cesium.HeadingPitchRoll(
// Cesium.Math.toRadians(pointOptions.heading),
// Cesium.Math.toRadians(pointOptions.pitch),
// Cesium.Math.toRadians(pointOptions.roll)
// )
// ),
// } : undefined,
// billboard: pointOptions.markVisible ? {
// image: pointOptions.markUrl,
// scale: pointOptions.markScale
// } : undefined
});
}
/**
* 获取某一时刻下的站点位置
* @param {Cesium.JulianDate} time 查询时刻
*/
getPosition(time) {}
/**
* 在场景中移除该站点
*/
removeFromScene(){}
/**
* 设置站点属性
*/
setProperty(){}
}
export default Point;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment