Skip to content

C
Cesium
Commit b645883b by lyc
Options

init

parent f33e66ff
Showing with 1266 additions and 0 deletions
.gitignore 0 → 100644
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
.vscode
index.html 0 → 100644
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
package.json 0 → 100644
{
"name": "vue-cesium",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"cesium": "1.99",
"element-plus": "^2.7.6",
"vite-plugin-cesium": "^1.2.22",
"vue": "^3.4.29"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.5",
"vite": "^5.3.1"
}
}
public/vite.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
src/App.vue 0 → 100644
<template>
<!-- <draw/> -->
<!-- <demo/> -->
<!-- <qq/> -->
<!-- <ellipse_demo/> -->
<!-- <getpoint/> -->
<sector/>
</template>
<script lang="ts">
import draw from './components/draw.vue'
import demo from './components/demo.vue'
import qq from './components/qq.vue'
import ellipse_demo from './components/ellipse_demo.vue'
import getpoint from './components/getpoint.vue'
import sector from './components/sector.vue'
export default {
name: 'app',
components:{qq,draw,ellipse_demo,getpoint,sector}
}
</script>
<style scoped>
</style>
src/assets/vue.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
\ No newline at end of file
src/components/angle.js 0 → 100644
/**
* 计算夹角类
*/
import * as Cesium from "cesium";
class computerAngle {
/**
* 计算两个点坐标之间的直线与正北方向之间的夹角
* @param {Array} [p] -两个坐标经纬度高程坐标数组
* @return {Array} -返回两个数组元素，1.两个点坐标之间的直线与正北方向之间的夹角；2.两个坐标之间的直线距离
*/
angle(p) {
let A = Cesium.Cartesian3.fromDegrees(p[0], p[1]);
let B = Cesium.Cartesian3.fromDegrees(p[3], p[4]);
let ab = Cesium.Cartesian3.distance(A, B);
//以a点为原点建立局部坐标系（东方向为x轴,北方向为y轴,垂直于地面为z轴），得到一个局部坐标到世界坐标转换的变换矩阵
const localToWorld = Cesium.Transforms.eastNorthUpToFixedFrame(
new Cesium.Cartesian3.fromDegrees(p[0], p[1])
);
//求世界坐标到局部坐标的变换矩阵
const worldToLocal = Cesium.Matrix4.inverse(
localToWorld,
new Cesium.Matrix4()
);
//A点在局部坐标的位置，其实就是局部坐标原点
const localPosition_A = Cesium.Matrix4.multiplyByPoint(
worldToLocal,
new Cesium.Cartesian3.fromDegrees(p[0], p[1]),
new Cesium.Cartesian3()
);
//B点在以A点为原点的局部的坐标位置
const localPosition_B = Cesium.Matrix4.multiplyByPoint(
worldToLocal,
new Cesium.Cartesian3.fromDegrees(p[3], p[4]),
new Cesium.Cartesian3()
);
//弧度
const angle = Math.atan2(
localPosition_B.x - localPosition_A.x,
localPosition_B.y - localPosition_A.y
);
//角度
let theta = angle * (180 / Math.PI);
if (theta < 0) {
theta = theta + 360;
}
return [theta, ab];
}
}
export default computerAngle;
src/components/demo.vue 0 → 100644
<template>
<!-- <style>
/* @import url(../templates/bucket.css); */
</style> -->
<div id="cesiumContainer" class="all"></div>
<button>ss</button>
</template>
<script setup>
import { onMounted } from 'vue'
import * as Cesium from 'Cesium'
import Viewer from 'cesium/Source/Widgets/Viewer/Viewer';
// import draw from './draw.js'
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
const viewer = new Cesium.Viewer("cesiumContainer", {
// timeline: false, //时间轴
// animation: false, //动画控件
// geocoder: false, //搜索按钮
// homeButton: false, //主页按钮
// sceneModePicker: false, //投影方式
// baseLayerPicker: false, //图层选择
// navigationHelpButton: false, //帮助按钮
// fullscreenButton: false, //全屏
})
//标注
// const billboard = viewer.entities.add({
// position: Cesium.Cartesian3.fromDegrees(116, 40, 10),
// billboard: {
// image: '/src/assets/坐标.png',
// scale: 0.1,
// }
// })
// const label = viewer.entities.add({
// position: Cesium.Cartesian3.fromDegrees(120, 30),
// label: {
// text: 'waibibabo',
// fillColor: Cesium.Color.RED,
// showBackground: true,
// backgroundColor:new Cesium.Color(120,120,120)
// }
// })
// viewer.zoomTo(label)
// //坐标转换
// const cartesian= Cesium.Cartesian3.fromDegrees(110,20,20) //经度 维度 高度
// console.log(cartesian)
// let Cartographic=Cesium.Cartographic.fromCartesian(cartesian)
// console.log(Cartographic)
// let lon = Cesium.Math.toDegrees(Cartographic.longitude)
// let lat = Cesium.Math.toDegrees(Cartographic.latitude)
// // let lon = 180 / Math.PI * Cartographic.longitude
// // let lat = 180 / Math.PI * Cartographic.latitude
// console.log(lon,lat)
//相机
// const position = Cesium.Cartesian3.fromDegrees(100, 20, 20000)
// //setview通过定义相机目的地，直接调转到目的地
// viewer.camera.setView({
// destination: position,
// orientation: {
// heading: Cesium.Math.toRadians(180),
// pitch: Cesium.Math.toRadians(-20),
// roll: Cesium.Math.toRadians(100),
// }
// })
// //flyTo飞行动画
// viewer.camera.flyTo({
// destination: position,
// duration: 3,//单位s
// orientation: {
// heading: Cesium.Math.toRadians(180),
// pitch: Cesium.Math.toRadians(-20),
// roll: Cesium.Math.toRadians(100),
// }
// })
// //lookAT
// const position2 = Cesium.Cartesian3.fromDegrees(110, 20)
// viewer.camera.lookAt(
// position2,
// new Cesium.HeadingPitchRange(
// Cesium.Math.toRadians(0),
// Cesium.Math.toRadians(-90),
// 20000
// )
// )
//实体dian
// const point = viewer.entities.add({
// id: 'point',
// position: Cesium.Cartesian3.fromDegrees(121, 30),
// point: {
// pixelSize: 20,
// color:Cesium.Color.BLUE
// }
// })
// const polyline = viewer.entities.add({
// id: 'polyline',
// polyline: {
// positions: Cesium.Cartesian3.fromDegreesArray([120, 20, 121, 20, 121, 20.5, 122, 22, 120, 20]),
// width:10,
// material:Cesium.Color.YELLOW
// }
// })
// const polygon = viewer.entities.add({
// polygon: {
// hierarchy: {
// positions: Cesium.Cartesian3.fromDegreesArray([122, 18, 123, 18, 123, 20]),
// },
// height: 200000,
// extrudedHeight: 20000,
// fill: false,
// outline: true,
// outlineColor:Cesium.Color.RED
// }
// })
// viewer.zoomTo(polygon)
})
</script>
<style>
.all {
display: block;
position: absolute;
top: 0;
left: 0;
border: none;
width: 100%;
height: 100%
}
.cesium-viewer-bottom {
display: none;
}
button{
position:absolute;
top:50px;
left:50px;
z-index: 88;
}
</style>
src/components/draw.js 0 → 100644
const viewer = new Cesium.Viewer("cesiumContainer", {
selectionIndicator: false,
infoBox: false,
terrain: Cesium.Terrain.fromWorldTerrain(),
});
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
);
function createPoint(worldPosition) {
const point = viewer.entities.add({
position: worldPosition,
point: {
color: Cesium.Color.WHITE,
pixelSize: 5,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
});
return point;
}
let drawingMode = "line";
function drawShape(positionData) {
let shape;
if (drawingMode === "line") {
shape = viewer.entities.add({
polyline: {
positions: positionData,
clampToGround: true,
width: 3,
},
});
} else if (drawingMode === "polygon") {
shape = viewer.entities.add({
polygon: {
hierarchy: positionData,
material: new Cesium.ColorMaterialProperty(
Cesium.Color.WHITE.withAlpha(0.7)
),
},
});
}
return shape;
}
let activeShapePoints = [];
let activeShape;
let floatingPoint;
const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function (event) {
// We use `viewer.scene.globe.pick here instead of `viewer.camera.pickEllipsoid` so that
// we get the correct point when mousing over terrain.
const ray = viewer.camera.getPickRay(event.position);
const earthPosition = viewer.scene.globe.pick(ray, viewer.scene);
// `earthPosition` will be undefined if our mouse is not over the globe.
if (Cesium.defined(earthPosition)) {
if (activeShapePoints.length === 0) {
floatingPoint = createPoint(earthPosition);
activeShapePoints.push(earthPosition);
const dynamicPositions = new Cesium.CallbackProperty(function () {
if (drawingMode === "polygon") {
return new Cesium.PolygonHierarchy(activeShapePoints);
}
return activeShapePoints;
}, false);
activeShape = drawShape(dynamicPositions);
}
activeShapePoints.push(earthPosition);
createPoint(earthPosition);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction(function (event) {
if (Cesium.defined(floatingPoint)) {
const ray = viewer.camera.getPickRay(event.endPosition);
const newPosition = viewer.scene.globe.pick(ray, viewer.scene);
if (Cesium.defined(newPosition)) {
floatingPoint.position.setValue(newPosition);
activeShapePoints.pop();
activeShapePoints.push(newPosition);
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// Redraw the shape so it's not dynamic and remove the dynamic shape.
function terminateShape() {
activeShapePoints.pop();
drawShape(activeShapePoints);
viewer.entities.remove(floatingPoint);
viewer.entities.remove(activeShape);
floatingPoint = undefined;
activeShape = undefined;
activeShapePoints = [];
}
handler.setInputAction(function (event) {
terminateShape();
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
const options = [
{
text: "Draw Lines",
onselect: function () {
if (!Cesium.Entity.supportsPolylinesOnTerrain(viewer.scene)) {
window.alert(
"This browser does not support polylines on terrain."
);
}
terminateShape();
drawingMode = "line";
},
},
{
text: "Draw Polygons",
onselect: function () {
terminateShape();
drawingMode = "polygon";
},
},
];
Sandcastle.addToolbarMenu(options);
// Zoom in to an area with mountains
viewer.camera.lookAt(
Cesium.Cartesian3.fromDegrees(-122.2058, 46.1955, 1000.0),
new Cesium.Cartesian3(5000.0, 5000.0, 5000.0)
);
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
src/components/draw.vue 0 → 100644
<template>
<!-- <style>
/* @import url(../templates/bucket.css); */
</style> -->
<!-- <qq class="qq"/> -->
<div id="cesiumContainer" class="all">
<div id="toolbar"></div>
</div>
<div class="qq">
<el-select v-model="value" transfer="false" placeholder="line"
style="width: 120px" @change="change" filterable="true" allow-create="true">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import * as Cesium from 'Cesium'
import Viewer from 'cesium/Source/Widgets/Viewer/Viewer';
import { ref } from 'vue'
let drawingMode = 'line';
const change = () => {
drawingMode=value.value
}
const value = ref('')
const options = [
{
value: 'line',
label: 'line',
},
{
value: 'polygon',
label: 'polygon',
}
]
// import draw from './draw.js'
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
const viewer = new Cesium.Viewer("cesiumContainer", {
selectionIndicator: false,
infoBox: false,
// terrain: Cesium.Terrain.fromWorldTerrain(),
terrainProvider:Cesium.createWorldTerrain(),
});
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
);
function createPoint(worldPosition) {
const point = viewer.entities.add({
position: worldPosition,
point: {
color: Cesium.Color.WHITE,
pixelSize: 5,
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
});
return point;
}
drawingMode = "line";
function drawShape(positionData) {
let shape;
if (drawingMode === "line") {
shape = viewer.entities.add({
polyline: {
positions: positionData,
clampToGround: true,
width: 3,
},
});
} else if (drawingMode === "polygon") {
shape = viewer.entities.add({
polygon: {
hierarchy: positionData,
material: new Cesium.ColorMaterialProperty(
Cesium.Color.WHITE.withAlpha(0.7)
),
},
});
}
return shape;
}
let activeShapePoints = [];
let activeShape;
let floatingPoint;
const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function (event) {
// We use `viewer.scene.globe.pick here instead of `viewer.camera.pickEllipsoid` so that
// we get the correct point when mousing over terrain.
const ray = viewer.camera.getPickRay(event.position);
const earthPosition = viewer.scene.globe.pick(ray, viewer.scene);
// `earthPosition` will be undefined if our mouse is not over the globe.
if (Cesium.defined(earthPosition)) {
if (activeShapePoints.length === 0) {
floatingPoint = createPoint(earthPosition);
activeShapePoints.push(earthPosition);
const dynamicPositions = new Cesium.CallbackProperty(function () {
if (drawingMode === "polygon") {
return new Cesium.PolygonHierarchy(activeShapePoints);
}
return activeShapePoints;
}, false);
activeShape = drawShape(dynamicPositions);
}
activeShapePoints.push(earthPosition);
createPoint(earthPosition);
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
handler.setInputAction(function (event) {
if (Cesium.defined(floatingPoint)) {
const ray = viewer.camera.getPickRay(event.endPosition);
const newPosition = viewer.scene.globe.pick(ray, viewer.scene);
if (Cesium.defined(newPosition)) {
floatingPoint.position.setValue(newPosition);
activeShapePoints.pop();
activeShapePoints.push(newPosition);
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
// Redraw the shape so it's not dynamic and remove the dynamic shape.
function terminateShape() {
activeShapePoints.pop();
drawShape(activeShapePoints);
viewer.entities.remove(floatingPoint);
viewer.entities.remove(activeShape);
floatingPoint = undefined;
activeShape = undefined;
activeShapePoints = [];
}
handler.setInputAction(function (event) {
terminateShape();
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
// Zoom in to an area with mountains
viewer.camera.lookAt(
Cesium.Cartesian3.fromDegrees(-122.2058, 46.1955, 1000.0),
new Cesium.Cartesian3(5000.0, 5000.0, 5000.0)
);
viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
})
</script>
<style >
.all {
display: block;
position: absolute;
top: 0;
left: 0;
border: none;
width: 100%;
height: 100%
}
.cesium-viewer-bottom{
display: none;
}
.qq{
position: absolute;
top: 50px;
left: 50px;
z-index: 99999999;
}
</style>
src/components/draw_sector.js 0 → 100644
import * as Cesium from "cesium";
import computerAngle from "./angle";
let myAngle = new computerAngle();
let sectorNum = 0;
// 存储高程数组
let height = [];
// 地图容器对象
let v;
/**
* 扇形实体
*/
draw(parameter) {
let xy = parameter.clickPointH;
v = parameter.viewer;
for (let i = 2; i < xy.length; i = i + 3) {
height.push(xy[i]);
}
// 计算扇形起始线和正北的夹角
let AB = xy.slice(0, 6);
let Pab = myAngle.angle(AB);
// 计算扇形终点线和正北的夹角
let AC = [...xy.slice(0, 3), ...xy.slice(6, 9)];
let Pac = myAngle.angle(AC);
// 如果C点是往北边画的，则置换两个角度，方便计算
Pab[0] > Pac[0] ? ([Pab[0], Pac[0]] = [Pac[0], Pab[0]]) : [];
if (
// 当B点在A点西部，且C点在A点东北部的时候||当B点在A点东部，且C点在A点西北部的时候
(xy[3] > xy[0] && xy[7] > xy[1] && xy[6] < xy[0]) ||
(xy[3] < xy[0] && xy[7] > xy[1] && xy[6] > xy[0])
) {
[Pab[0], Pac[0]] = [Pac[0], 360 + Pab[0]];
}
return this.drawNow(xy[0], xy[1], Pab[0], Pac[0], Pab[1], parameter);
}
drawNow(x, y, Pab, Pac, ac, p) {
let id = "扇形" + (sectorNum == 0 ? "" : sectorNum);
let points = [];
// 地球两极稍扁，赤道略鼓
// 计算椭球体中心到圆心的距离（纬度越接近极点，则使用短半径，否则使用长半径）
let oa = 6378137 - ((6378137 - 6356752) * y) / 90;
// 计算圆心在赤道面的垂足投影长度（米）
let oh = oa * Math.cos((y * Math.PI) / 180);
for (let i = Pab, j = 0; i <= Pac; i += 0.03, j++) {
// 计算距离坐标点ac米，方位角为i处的坐标点到圆心的X，Y轴距离（米）
let clon = ac * Math.sin((i * Math.PI) / 180);
let clat = ac * Math.cos((i * Math.PI) / 180);
// 在圆心坐标上叠加X，Y轴弧度（弧度=周长/半径）后的新坐标
let jlon = ((clon / oh + (x * Math.PI) / 180) * 180) / Math.PI;
let jlat = ((clat / oa + (y * Math.PI) / 180) * 180) / Math.PI;
j > 2 ? (j = 2) : "";
points.push(jlon, jlat, height[j]);
}
points.push(x, y, height[0]);
var sector = new Cesium.Entity({
id,
polygon: {
show: true,
hierarchy: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(points),
},
height: 2000,
extrudedHeight: 10,
material: Cesium.Color.fromCssColorString(p.entityColor || "#007acc"),
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
});
sectorNum++;
// 添加实体时新增，视图缩放至实体
v.entities.add(sector);
v.zoomTo(sector);
return sector;
}
const Sector = new SectorGraphics();
export function drawSector(a) {
let entity = Sector.draw(a);
return entity;
}
\ No newline at end of file
src/components/ellipse_demo.vue 0 → 100644
<template>
<div id="cesiumContainer" class="all">
<div id="toolbar"></div>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import * as Cesium from 'Cesium'
import Viewer from 'cesium/Source/Widgets/Viewer/Viewer';
import { ref } from 'vue'
import PositionProperty from 'cesium/Source/DataSources/PositionProperty';
import { BlendFunction } from 'cesium';
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
const viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: Cesium.createWorldTerrain(),
});
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
);
let drawingMode = "ellipse";
function drowellipse(positionData, oldpoint, newpoint) {
let old = Cesium.Cartographic.fromCartesian(oldpoint)
let newp = Cesium.Cartographic.fromCartesian(newpoint)
let old_lon = Cesium.Math.toDegrees(old.longitude)
let old_lat= Cesium.Math.toDegrees(old.latitude)
let new_lon = Cesium.Math.toDegrees(newp.longitude)
let new_lat = Cesium.Math.toDegrees(newp.latitude)
let chang = Math.abs(old_lat - new_lat)
let kuang = Math.abs(old_lon - new_lon)
let r=Math.sqrt(chang*chang+kuang*kuang)
console.log(r)
const shape = viewer.entities.add({
position: positionData,
ellipse: {
semiMajorAxis: r*100000,
semiMinorAxis: r*100000,
material: Cesium.Color.WHITE,
fill: true,
outline: false,
height: 20000,
outerWidth: 10000,
extrudedHeight: 200000.0,
rotation: 0.78539,
},
});
return shape;
}
let activeShapePoints = [];
let activeShape;
let floatingPoint;
let oldpoint;
let newpoint;
let flog = false;
let count = 0
const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(
function (event) {
count++;
const ray = viewer.camera.getPickRay(event.position);
const earthPosition = viewer.scene.globe.pick(ray, viewer.scene);
if (flog) {
if (Cesium.defined(earthPosition)) {
if (activeShapePoints.length === 0) {
activeShapePoints.push(earthPosition),
newpoint = earthPosition;
drowellipse(earthPosition,oldpoint,newpoint)
}
}
}
else {
oldpoint = earthPosition;
}
activeShapePoints = []
if (count >= 2) {
oldpoint = []
newpoint = []
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK
);
handler.setInputAction(function (event) {
flog=!flog
},Cesium.ScreenSpaceEventType.RIGHT_CLICK)
})
</script>
<style>
.all {
display: block;
position: absolute;
top: 0;
left: 0;
border: none;
width: 100%;
height: 100%
}
.cesium-viewer-bottom {
display: none;
}
.qq {
position: absolute;
top: 50px;
left: 50px;
z-index: 99999999;
}
</style>
src/components/getpoint.vue 0 → 100644
<template>
<div id="cesiumContainer" class="all">
<div id="toolbar"></div>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import * as Cesium from 'Cesium'
import Viewer from 'cesium/Source/Widgets/Viewer/Viewer';
import { ref } from 'vue'
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
const viewer = new Cesium.Viewer("cesiumContainer", {
selectionIndicator: false,
infoBox: false,
});
const scene = viewer.scene;
// if (!scene.pickPositionSupported) {
// window.alert("This browser does not support pickPosition.");
// }
let handler;
const entity = viewer.entities.add({
label: {
show: false,
showBackground: true,
font: "14px monospace",
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
verticalOrigin: Cesium.VerticalOrigin.TOP,
pixelOffset: new Cesium.Cartesian2(15, 0),
},
});
// Mouse over the globe to see the cartographic position
handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
const cartesian = viewer.camera.pickEllipsoid(
movement.endPosition,
scene.globe.ellipsoid
);
if (cartesian) {
const cartographic = Cesium.Cartographic.fromCartesian(
cartesian
);
const longitudeString = Cesium.Math.toDegrees(
cartographic.longitude
).toFixed(2);
const latitudeString = Cesium.Math.toDegrees(
cartographic.latitude
).toFixed(2);
entity.position = cartesian;
entity.label.show = true;
entity.label.text =
`Lon: ${` ${longitudeString}`.slice(-7)}\u00B0` +
`\nLat: ${` ${latitudeString}`.slice(-7)}\u00B0`;
} else {
entity.label.show = false;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
})
</script>
<style>
.all {
display: block;
position: absolute;
top: 0;
left: 0;
border: none;
width: 100%;
height: 100%
}
.cesium-viewer-bottom {
display: none;
}
.qq {
position: absolute;
top: 50px;
left: 50px;
z-index: 99999999;
}
</style>
src/components/qq.vue 0 → 100644
<template>
<div class="qq">
<el-select v-model="value" placeholder="line" style="width: 240px" @change="change">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
</template>
<script lang="ts" setup>
import { ArrowDown } from '@element-plus/icons-vue'
import {ref} from 'vue'
let drawingMode = ref('line');
const change = () => {
let drawingMode = value;
console.log(drawingMode);
}
const value = ref('')
const options = [
{
value: 'line',
label: 'line',
},
{
value: 'polygon',
label: 'polygon',
change(line) { drawingMode = 'polygon'},
}
]
</script>
<style scoped>
.example-showcase .el-dropdown-link {
cursor: pointer;
color: var(--el-color-primary);
display: flex;
align-items: center;
}
</style>
src/components/sector.vue 0 → 100644
<template>
<div id="cesiumContainer" class="all">
<div id="toolbar"></div>
</div>
</template>
<script setup lang="ts">
import { onMounted } from 'vue'
import * as Cesium from 'Cesium'
import Viewer from 'cesium/Source/Widgets/Viewer/Viewer';
import { ref } from 'vue'
import computerAngle from "./angle";
import { drawSector } from './draw_sector'
onMounted(() => {
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyYTI3MDQxMS1hYzgxLTRlYTQtODExZS00YzdmYjM0YTg3OTAiLCJpZCI6MjI0NzQzLCJpYXQiOjE3MTkzOTcxMDF9._VD-W1rEy7jSUtPmcVytEYbZIZ00_IeHCZm59Kua5aE'
const viewer = new Cesium.Viewer("cesiumContainer", {
selectionIndicator: false,
infoBox: false,
});
// const position = Cesium.Cartographic.fromCartesian(120, 20,2000)
// const triangle =[]
// triangle.push(position)
// const sector = viewer.entities.add({
// position:position,
// polygon: {
// hierarchy: new Cesium.PolygonHierarchy(arrow),
// show: true,
// fill: true,
// clampToGround: true,
// material: Cesium.Color.AQUA.withAlpha(0.9)
// }
// });
let myAngle = new computerAngle();
let sectorNum = 0;
// 存储高程数组
let height = [];
// 地图容器对象
let v;
draw(parameter) {
let xy = parameter.clickPointH;
v = parameter.viewer;
for (let i = 2; i < xy.length; i = i + 3) {
height.push(xy[i]);
}
// 计算扇形起始线和正北的夹角
let AB = xy.slice(0, 6);
let Pab = myAngle.angle(AB);
// 计算扇形终点线和正北的夹角
let AC = [...xy.slice(0, 3), ...xy.slice(6, 9)];
let Pac = myAngle.angle(AC);
// 如果C点是往北边画的，则置换两个角度，方便计算
Pab[0] > Pac[0] ? ([Pab[0], Pac[0]] = [Pac[0], Pab[0]]) : [];
if (
// 当B点在A点西部，且C点在A点东北部的时候||当B点在A点东部，且C点在A点西北部的时候
(xy[3] > xy[0] && xy[7] > xy[1] && xy[6] < xy[0]) ||
(xy[3] < xy[0] && xy[7] > xy[1] && xy[6] > xy[0])
) {
[Pab[0], Pac[0]] = [Pac[0], 360 + Pab[0]];
}
return this.drawNow(xy[0], xy[1], Pab[0], Pac[0], Pab[1], parameter);
}
drawNow(x, y, Pab, Pac, ac, p) {
let id = "扇形" + (sectorNum == 0 ? "" : sectorNum);
let points = [];
// 地球两极稍扁，赤道略鼓
// 计算椭球体中心到圆心的距离（纬度越接近极点，则使用短半径，否则使用长半径）
let oa = 6378137 - ((6378137 - 6356752) * y) / 90;
// 计算圆心在赤道面的垂足投影长度（米）
let oh = oa * Math.cos((y * Math.PI) / 180);
for (let i = Pab, j = 0; i <= Pac; i += 0.03, j++) {
// 计算距离坐标点ac米，方位角为i处的坐标点到圆心的X，Y轴距离（米）
let clon = ac * Math.sin((i * Math.PI) / 180);
let clat = ac * Math.cos((i * Math.PI) / 180);
// 在圆心坐标上叠加X，Y轴弧度（弧度=周长/半径）后的新坐标
let jlon = ((clon / oh + (x * Math.PI) / 180) * 180) / Math.PI;
let jlat = ((clat / oa + (y * Math.PI) / 180) * 180) / Math.PI;
j > 2 ? (j = 2) : "";
points.push(jlon, jlat, height[j]);
}
points.push(x, y, height[0]);
var sector = new Cesium.Entity({
id,
polygon: {
show: true,
hierarchy: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(points),
},
height: 2000,
extrudedHeight: 10,
material: Cesium.Color.fromCssColorString(p.entityColor || "#007acc"),
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
},
});
sectorNum++;
// 添加实体时新增，视图缩放至实体
v.entities.add(sector);
v.zoomTo(sector);
return sector;
}
})
</script>
<style>
.all {
display: block;
position: absolute;
top: 0;
left: 0;
border: none;
width: 100%;
height: 100%
}
.cesium-viewer-bottom {
display: none;
}
.qq {
position: absolute;
top: 50px;
left: 50px;
z-index: 99999999;
}
</style>
src/main.js 0 → 100644
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
\ No newline at end of file
src/style.css 0 → 100644
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
.card {
padding: 2em;
}
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}
vite.config.js 0 → 100644
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue(),cesium()],
})
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