first commit
This commit is contained in:
user
commit
8ed92a3e84
|
|
@ -0,0 +1,24 @@
|
|||
# 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?
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"recommendations": ["Vue.volar"]
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
# Vue 3 + Vite
|
||||
|
||||
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
- [VS Code](https://code.visualstudio.com/) + [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously Volar) and disable Vetur
|
||||
|
|
@ -0,0 +1,174 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
||||
<title>填挖方分析</title>
|
||||
<script src="https://cesiumjs.org/releases/1.57/Build/Cesium/Cesium.js"></script>
|
||||
<link href="https://cesiumjs.org/releases/1.57/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
#cesiumContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
background-color: #000000;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="cesiumContainer">
|
||||
</div>
|
||||
<script>
|
||||
Cesium.Ion.defaultAccessToken = 'your access token';
|
||||
|
||||
var terrainProvider = Cesium.createWorldTerrain({
|
||||
requestWaterMask: true,
|
||||
requestVertexNormals: true
|
||||
});
|
||||
var viewer = new Cesium.Viewer('cesiumContainer', {
|
||||
imageryProvider: new Cesium.UrlTemplateImageryProvider({
|
||||
url: 'http://www.google.cn/maps/vt?lyrs=s@716&x={x}&y={y}&z={z}'
|
||||
}),
|
||||
terrainProvider: terrainProvider
|
||||
});
|
||||
|
||||
viewer.scene.globe.depthTestAgainstTerrain = true;
|
||||
|
||||
var excavateHeight = 2300; // 开挖高度
|
||||
var buryHeight = 6000; // 填埋高度
|
||||
|
||||
var scope = [
|
||||
Cesium.Cartesian3.fromDegrees(99, 29),
|
||||
Cesium.Cartesian3.fromDegrees(100, 29),
|
||||
Cesium.Cartesian3.fromDegrees(100, 30),
|
||||
Cesium.Cartesian3.fromDegrees(99, 30)
|
||||
];
|
||||
|
||||
// 显示施工区域
|
||||
var entity = viewer.entities.add({
|
||||
polygon: {
|
||||
hierarchy: scope,
|
||||
height: buryHeight,
|
||||
extrudedHeight: excavateHeight,
|
||||
material: Cesium.Color.RED.withAlpha(0.5),
|
||||
outline: true,
|
||||
closeTop: false
|
||||
}
|
||||
});
|
||||
|
||||
viewer.trackedEntity = entity;
|
||||
|
||||
function calc() {
|
||||
|
||||
//===============================计算 开挖/填埋 的 开挖量/填方量 的 核心思想就是 剖分 微积分==========================//
|
||||
|
||||
// 设置剖分最小单元 0.01°
|
||||
var subdivisionCell = 0.01;
|
||||
|
||||
// 所有的剖分矩形
|
||||
var subRectangles = [];
|
||||
|
||||
for (var i = 99; i <= 100; i = i + subdivisionCell) {
|
||||
for (var j = 29; j <= 30; j = j + subdivisionCell) {
|
||||
var subRectangle = new Cesium.Rectangle(
|
||||
Cesium.Math.toRadians(i),
|
||||
Cesium.Math.toRadians(j),
|
||||
Cesium.Math.toRadians(i + subdivisionCell),
|
||||
Cesium.Math.toRadians(j + subdivisionCell)
|
||||
);
|
||||
subRectangles.push(subRectangle);
|
||||
|
||||
// 可视化部分
|
||||
// viewer.entities.add({
|
||||
// rectangle: {
|
||||
// coordinates: subRectangle,
|
||||
// material: Cesium.Color.fromRandom().withAlpha(0.5),
|
||||
// height: 6000,
|
||||
// extrudedHeight: 2300,
|
||||
// }
|
||||
// });
|
||||
}
|
||||
}
|
||||
|
||||
// 计算每个矩形的中心点作为这个矩形的代表
|
||||
|
||||
var subRectanglesCenterPoints = [];
|
||||
subRectangles.forEach(subRectangle => {
|
||||
|
||||
var centerPoint = Cesium.Cartographic.fromRadians((subRectangle.west + subRectangle.east) / 2, (subRectangle
|
||||
.north +
|
||||
subRectangle.south) / 2);
|
||||
|
||||
subRectanglesCenterPoints.push(centerPoint);
|
||||
|
||||
// 可视化部分
|
||||
// var position = centerPoint.clone();
|
||||
// position.height = buryHeight;
|
||||
|
||||
// var position1 = centerPoint.clone();
|
||||
// position1.height = excavateHeight;
|
||||
|
||||
// viewer.entities.add({
|
||||
// polyline: {
|
||||
// positions: [Cesium.Cartographic.toCartesian(position), Cesium.Cartographic.toCartesian(position1)],
|
||||
// material: Cesium.Color.fromRandom().withAlpha(0.5),
|
||||
// width: 5
|
||||
// }
|
||||
// });
|
||||
});
|
||||
|
||||
// 计算每个中心点到达地表的高度
|
||||
// var promise = Cesium.sampleTerrainMostDetailed(terrainProvider, subRectanglesCenterPoints);
|
||||
var promise = Cesium.sampleTerrain(terrainProvider, 7, subRectanglesCenterPoints);
|
||||
Cesium.when(promise, function (updatedPositions) {
|
||||
|
||||
// 所有高度
|
||||
var heights = [];
|
||||
updatedPositions.forEach(point => {
|
||||
heights.push(point.height);
|
||||
});
|
||||
|
||||
|
||||
// 开始计算土方
|
||||
var excavateVolumes = 0; // 挖方
|
||||
var buryVolumes = 0; // 填埋
|
||||
|
||||
// 1.计算每个矩形的长、宽
|
||||
for (var i = 0; i < subRectangles.length; i++) {
|
||||
var subRectangle = subRectangles[i];
|
||||
var leftBottom = Cesium.Cartesian3.fromRadians(subRectangle.west, subRectangle.south);
|
||||
var leftTop = Cesium.Cartesian3.fromRadians(subRectangle.west, subRectangle.north);
|
||||
var rightBottom = Cesium.Cartesian3.fromRadians(subRectangle.east, subRectangle.south);
|
||||
var height = Cesium.Cartesian3.distance(leftBottom, leftTop); // 宽
|
||||
var width = Cesium.Cartesian3.distance(leftBottom, rightBottom); // 长
|
||||
|
||||
// 挖方
|
||||
if (heights[i] > excavateHeight) { // 如果地形高度大于开挖高度才需要开挖
|
||||
var excavateVolume = width * height * (heights[i] - excavateHeight);
|
||||
excavateVolumes += excavateVolume;
|
||||
}
|
||||
|
||||
// 填埋
|
||||
if (heights[i] < buryHeight) { // 如果地形高度小于填埋高度才需要填埋
|
||||
var buryVolume = width * height * (buryHeight - heights[i]);
|
||||
buryVolumes += buryVolume;
|
||||
}
|
||||
}
|
||||
|
||||
console.log("挖方：" + excavateVolumes + "立方米(m³)");
|
||||
console.log("填埋：" + buryVolumes + "立方米(m³)");
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"name": "cut-fill-viewer",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"element-plus": "^2.7.1",
|
||||
"lodash": "^4.17.21",
|
||||
"turf": "^3.0.14",
|
||||
"vue": "^3.4.21"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.0.4",
|
||||
"cesium": "^1.116.0",
|
||||
"vite": "^5.2.10",
|
||||
"vite-plugin-cesium": "^1.2.22"
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"type": "FeatureCollection",
|
||||
"name": "bound",
|
||||
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
|
||||
"features": [
|
||||
{ "type": "Feature", "properties": { "id": 1, "name": "1" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 113.52896835361318, 23.654018962759377 ], [ 113.529270627066524, 23.654027766840539 ], [ 113.529270627066524, 23.654027766840539 ], [ 113.529294104616298, 23.653772448486752 ], [ 113.528977157694356, 23.653763644405586 ], [ 113.52896835361318, 23.654018962759377 ] ] ] ] } }
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<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>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -0,0 +1,17 @@
|
|||
<script setup>
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<HelloWorld />
|
||||
</template>
|
||||
|
||||
<style>
|
||||
html,body,#app{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1 @@
|
|||
<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>
|
||||
|
After Width: | Height: | Size: 496 B |
|
|
@ -0,0 +1,479 @@
|
|||
<script setup>
|
||||
import { ref ,onMounted} from 'vue'
|
||||
import * as Cesium from 'cesium';
|
||||
import _ from "lodash";
|
||||
import * as turf from 'turf';
|
||||
let viewer = null,
|
||||
tempEntities = [],
|
||||
isAddPoint = false;
|
||||
onMounted(()=>{
|
||||
initViewer();
|
||||
})
|
||||
function initViewer(){
|
||||
//天地图影像
|
||||
const TDT_tk = "ea3530e6803b44025cfa81500eaae01f";
|
||||
let TDT_IMG_C = "http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
|
||||
"&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
|
||||
"&style=default&format=tiles&tk=" + TDT_tk;
|
||||
|
||||
viewer = new Cesium.Viewer("cesiumContainer",{
|
||||
geocoder: false, //位置查找
|
||||
homeButton: false, //视图返回初始位置
|
||||
sceneModePicker: true, //视角选择器
|
||||
baseLayerPicker:false,//底图选择器
|
||||
navigationHelpButton: false, //导航帮助按钮
|
||||
animation: false, //动画控制器
|
||||
creditContainer:document.createElement("div"),//版权显示
|
||||
timeline: false, //时间线
|
||||
fullscreenButton: false, //全屏控件
|
||||
vrButton: false,
|
||||
infoBox:false,
|
||||
selectionIndicator:false,
|
||||
// scene3DOnly: true, // 每个几何实例将只能以3D渲染以节省GPU内存
|
||||
// sceneMode: 3, // 初始场景模式 1 2D模式 2 2D循环模式 3 3D模式 Cesium.SceneMode
|
||||
// imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
|
||||
// url: TDT_IMG_C,
|
||||
// layer: "tdtImg_c",
|
||||
// style: "default",
|
||||
// format: "tiles",
|
||||
// tileMatrixSetID: "c",
|
||||
// subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
|
||||
// tilingScheme: new Cesium.GeographicTilingScheme(),
|
||||
// tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
|
||||
// maximumLevel: 50,
|
||||
// show: false
|
||||
// })
|
||||
terrain: Cesium.Terrain.fromWorldTerrain({
|
||||
requestWaterMask: true,
|
||||
requestVertexNormals: true
|
||||
})
|
||||
})
|
||||
// 添加Cesium ion的地形
|
||||
// viewer.scene.setTerrain(
|
||||
// new Cesium.Terrain(
|
||||
// Cesium.CesiumTerrainProvider.fromIonAssetId(1),
|
||||
// ),
|
||||
// );
|
||||
viewer.scene.globe.depthTestAgainstTerrain = false; // 图标被遮挡
|
||||
viewer.scene.fxaa = false;
|
||||
// 设置后当相机高度达到设置的最大和最小高度时将不再放大和缩小
|
||||
viewer.scene.screenSpaceCameraController.minimumZoomDistance = 0; // 相机的高度的最小值
|
||||
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000000; // 相机高度的最大值
|
||||
|
||||
// 关闭双击事件
|
||||
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
|
||||
Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
|
||||
);
|
||||
// Fly the camera to San Francisco at the given longitude, latitude, and height.
|
||||
// viewer.camera.flyTo({
|
||||
// destination: Cesium.Cartesian3.fromDegrees(113.9641713, 23.3191755, 400),
|
||||
// orientation: {
|
||||
// heading: Cesium.Math.toRadians(0.0),
|
||||
// pitch: Cesium.Math.toRadians(-15.0)
|
||||
// }
|
||||
// })
|
||||
|
||||
addGeoJson();
|
||||
}
|
||||
|
||||
function draw(type) {
|
||||
//绘制点
|
||||
let position = [];
|
||||
let tempPoints = [];
|
||||
|
||||
// 开启深度检测
|
||||
viewer.scene.globe.depthTestAgainstTerrain = false;
|
||||
let handler = new Cesium.ScreenSpaceEventHandler(
|
||||
viewer.scene.canvas
|
||||
);
|
||||
document.getElementsByTagName("body").item(0).style.cursor = "crosshair";
|
||||
switch (type) {
|
||||
case "point":
|
||||
//鼠标移动事件
|
||||
handler.setInputAction(function (movement) {
|
||||
let tooltip = document.getElementById("tooltip");
|
||||
tooltip.style.display = "none";
|
||||
tooltip.style.left = movement.endPosition.x + 15 + "px";
|
||||
tooltip.style.top = movement.endPosition.y + 5 + "px";
|
||||
|
||||
if (window.pt) {
|
||||
let cartesian3 = viewer.scene.pickPosition(
|
||||
movement.endPosition
|
||||
);
|
||||
window.pt._position = new Cesium.CallbackProperty(
|
||||
function () {
|
||||
return cartesian3;
|
||||
},
|
||||
false
|
||||
);
|
||||
}
|
||||
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
||||
// 监听鼠标左键
|
||||
handler.setInputAction(function (movement) {
|
||||
// 从相机位置通过windowPosition 世界坐标中的像素创建一条射线。返回Cartesian3射线的位置和方向。
|
||||
let ray = viewer.camera.getPickRay(movement.position);
|
||||
// 查找射线与渲染的地球表面之间的交点。射线必须以世界坐标给出。返回Cartesian3对象
|
||||
position = viewer.scene.globe.pick(ray, viewer.scene);
|
||||
let point = drawPoint(position);
|
||||
window.pt = point;
|
||||
tempEntities.push(point);
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
|
||||
// 左键双击停止绘制
|
||||
handler.setInputAction(function () {
|
||||
handler.destroy(); //关闭事件句柄
|
||||
handler = null;
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
|
||||
// 右击单击停止绘制
|
||||
handler.setInputAction(function () {
|
||||
handler.destroy(); //关闭事件句柄
|
||||
handler = null;
|
||||
document.getElementsByTagName("body").item(0).style.cursor = "default";
|
||||
let tooltip = document.getElementById("tooltip");
|
||||
tooltip.style.display = "none";
|
||||
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
||||
break;
|
||||
case "polyline":
|
||||
//鼠标移动事件
|
||||
handler.setInputAction(function (movement) {
|
||||
let tooltip = document.getElementById("tooltip");
|
||||
tooltip.style.display = "block";
|
||||
tooltip.style.left = movement.endPosition.x + 15 + "px";
|
||||
tooltip.style.top = movement.endPosition.y + "px";
|
||||
let car3 = viewer.scene.pickPosition(movement.endPosition);
|
||||
//当鼠标在一些Entity上时，car3会是undefined
|
||||
if (tempPoints.length > 0 && Cesium.defined(car3)) {
|
||||
if (!window.lineEntity || isAddPoint) {
|
||||
window.lineEntity = drawPolyline([
|
||||
...tempPoints,
|
||||
car3,
|
||||
]);
|
||||
isAddPoint = false;
|
||||
}
|
||||
let positions = window.lineEntity.polyline.positions.getValue();
|
||||
|
||||
positions[positions.length - 1].x = car3.x;
|
||||
positions[positions.length - 1].y = car3.y;
|
||||
positions[positions.length - 1].z = car3.z;
|
||||
window.lineEntity.polyline.positions =
|
||||
new Cesium.CallbackProperty(function () {
|
||||
return positions;
|
||||
}, false);
|
||||
}
|
||||
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
||||
//左键点击操作
|
||||
handler.setInputAction(function (click) {
|
||||
isAddPoint = true;
|
||||
//调用获取位置信息的接口
|
||||
let ray = viewer.camera.getPickRay(click.position);
|
||||
position = viewer.scene.globe.pick(ray, viewer.scene);
|
||||
tempPoints.push(position);
|
||||
let tempLength = tempPoints.length;
|
||||
//调用绘制点的接口
|
||||
let point = drawPoint(tempPoints[tempPoints.length - 1]);
|
||||
tempEntities.push(point);
|
||||
if (tempLength > 1) {
|
||||
let pointline = drawPolyline([
|
||||
tempPoints[tempPoints.length - 2],
|
||||
tempPoints[tempPoints.length - 1],
|
||||
]);
|
||||
|
||||
tempEntities.push(pointline);
|
||||
} else {
|
||||
// tooltip.innerHTML = "请绘制下一个点，右键结束";
|
||||
}
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
//右键点击操作
|
||||
handler.setInputAction(function (click) {
|
||||
tempPoints = [];
|
||||
handler.destroy(); //关闭事件句柄
|
||||
handler = null;
|
||||
viewer.entities.remove(window.lineEntity);
|
||||
window.lineEntity = null;
|
||||
let tooltip = document.getElementById("tooltip");
|
||||
tooltip.style.display = "none";
|
||||
document.getElementsByTagName("body").item(0).style.cursor = "default";
|
||||
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
||||
break;
|
||||
case "polygon":
|
||||
//鼠标移动事件
|
||||
handler.setInputAction(function (movement) {},
|
||||
Cesium.ScreenSpaceEventType.MOUSE_MOVE);
|
||||
//左键点击操作
|
||||
handler.setInputAction(function (click) {
|
||||
//调用获取位置信息的接口
|
||||
let ray = viewer.camera.getPickRay(click.position);
|
||||
position = viewer.scene.globe.pick(ray, viewer.scene);
|
||||
tempPoints.push(position);
|
||||
let tempLength = tempPoints.length;
|
||||
//调用绘制点的接口
|
||||
let point = drawPoint(position);
|
||||
tempEntities.push(point);
|
||||
if (tempLength > 1) {
|
||||
let pointline = drawPolyline([
|
||||
tempPoints[tempPoints.length - 2],
|
||||
tempPoints[tempPoints.length - 1],
|
||||
]);
|
||||
tempEntities.push(pointline);
|
||||
} else {
|
||||
// tooltip.innerHTML = "请绘制下一个点，右键结束";
|
||||
}
|
||||
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
|
||||
//右键点击操作
|
||||
handler.setInputAction(function (click) {
|
||||
let cartesian = viewer.camera.pickEllipsoid(
|
||||
click.position,
|
||||
viewer.scene.globe.ellipsoid
|
||||
);
|
||||
|
||||
if (cartesian) {
|
||||
let tempLength = tempPoints.length;
|
||||
if (tempLength < 3) {
|
||||
alert("请选择3个以上的点再执行闭合操作命令");
|
||||
} else {
|
||||
//闭合最后一条线
|
||||
let pointline = drawPolyline([
|
||||
tempPoints[tempPoints.length - 1],
|
||||
tempPoints[0],
|
||||
]);
|
||||
tempEntities.push(pointline);
|
||||
drawPolygon(tempPoints);
|
||||
tempEntities.push(tempPoints);
|
||||
handler.destroy(); //关闭事件句柄
|
||||
handler = null;
|
||||
document.getElementsByTagName("body").item(0).style.cursor = "default";
|
||||
}
|
||||
}
|
||||
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
|
||||
break;
|
||||
}
|
||||
}
|
||||
function addGeoJson(){
|
||||
const promise = Cesium.GeoJsonDataSource.load(
|
||||
"/data/bound.geojson"
|
||||
);
|
||||
promise
|
||||
.then(function (dataSource) {
|
||||
|
||||
viewer.dataSources.add(dataSource);
|
||||
viewer.zoomTo(dataSource)
|
||||
// //Get the array of entities
|
||||
const entities = dataSource.entities.values;
|
||||
|
||||
const colorHash = {};
|
||||
for (let i = 0; i < entities.length; i++) {
|
||||
//For each entity, create a random color based on the state name.
|
||||
//Some states have multiple entities, so we store the color in a
|
||||
//hash so that we use the same color for the entire state.
|
||||
const entity = entities[i];
|
||||
const name = entity.name;
|
||||
let color = colorHash[name];
|
||||
if (!color) {
|
||||
color = Cesium.Color.fromRandom({
|
||||
alpha: 0.6,
|
||||
});
|
||||
colorHash[name] = color;
|
||||
}
|
||||
entity.polygon.height = 165;
|
||||
entity.polygon.heightReference = Cesium.HeightReference.CLAMP_TO_GROUND
|
||||
//Set the polygon material to our random color.
|
||||
entity.polygon.material = color;
|
||||
//Remove the outlines.
|
||||
entity.polygon.outline = false;
|
||||
window.sourceEntity = entity;
|
||||
//Extrude the polygon based on the state's population. Each entity
|
||||
//stores the properties for the GeoJSON feature it was created from
|
||||
//Since the population is a huge number, we divide by 50.
|
||||
// entity.polygon.extrudedHeight =
|
||||
// entity.properties.Population / 50.0;
|
||||
}
|
||||
|
||||
})
|
||||
.catch(function (error) {
|
||||
//Display any errrors encountered while loading.
|
||||
window.alert(error);
|
||||
});
|
||||
window.viewer = viewer;
|
||||
window.Cesium = Cesium;
|
||||
}
|
||||
|
||||
function drawTerrian(){
|
||||
viewer.entities.removeAll();
|
||||
let quadtreeTiles = viewer.scene.globe._surface._tilesToRender;
|
||||
quadtreeTiles.forEach(q=>{
|
||||
viewer.entities.add({
|
||||
name: "quadtreeTiles",
|
||||
rectangle:new Cesium.RectangleGraphics({
|
||||
coordinates:q.rectangle,
|
||||
show:true,
|
||||
fill:true,
|
||||
material: Cesium.Color.fromRandom()
|
||||
}),
|
||||
});
|
||||
})
|
||||
}
|
||||
function filterTerrian(){
|
||||
const positions = window.sourceEntity.polygon.hierarchy._value.positions;
|
||||
const linering = [];
|
||||
positions.forEach(coord=>{
|
||||
const cartographic = Cesium.Cartographic.fromCartesian(coord);
|
||||
linering.push([Cesium.Math.toDegrees(cartographic.longitude),Cesium.Math.toDegrees(cartographic.latitude)])
|
||||
})
|
||||
const sourcePolygon = turf.polygon([linering]);
|
||||
let objectDeepCopy;
|
||||
objectDeepCopy = _.defaultsDeep(objectDeepCopy, viewer.entities.values);
|
||||
for(let key in objectDeepCopy){
|
||||
const entity = objectDeepCopy[key];
|
||||
let rectangle = entity.rectangle.coordinates._value;
|
||||
let tmpLinering = [];
|
||||
tmpLinering.push([Cesium.Math.toDegrees(rectangle.west),Cesium.Math.toDegrees(rectangle.south)])
|
||||
tmpLinering.push([Cesium.Math.toDegrees(rectangle.east),Cesium.Math.toDegrees(rectangle.south)])
|
||||
tmpLinering.push([Cesium.Math.toDegrees(rectangle.east),Cesium.Math.toDegrees(rectangle.north)])
|
||||
tmpLinering.push([Cesium.Math.toDegrees(rectangle.west),Cesium.Math.toDegrees(rectangle.north)])
|
||||
tmpLinering.push([Cesium.Math.toDegrees(rectangle.west),Cesium.Math.toDegrees(rectangle.south)])
|
||||
const tmpPolygon = turf.polygon([tmpLinering]);
|
||||
var intersection = turf.intersect(tmpPolygon, sourcePolygon);
|
||||
!intersection&&viewer.entities.remove(entity);
|
||||
}
|
||||
// viewer.entities.
|
||||
}
|
||||
|
||||
function drawPoint(position, config) {
|
||||
let config_ = config ? config : {};
|
||||
return viewer.entities.add({
|
||||
name: "点几何对象",
|
||||
position: position,
|
||||
point: {
|
||||
color: Cesium.Color.SKYBLUE,
|
||||
pixelSize: 10,
|
||||
outlineColor: Cesium.Color.YELLOW,
|
||||
outlineWidth: 3,
|
||||
disableDepthTestDistance: Number.POSITIVE_INFINITY,
|
||||
heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function drawPolyline(positions, config_) {
|
||||
if (positions.length < 1) return;
|
||||
let config = config_ ? config_ : {};
|
||||
return viewer.entities.add({
|
||||
name: "线几何对象",
|
||||
polyline: {
|
||||
// positions: positions,
|
||||
positions: new Cesium.CallbackProperty(function () {
|
||||
return positions;
|
||||
}, false),
|
||||
width: config.width ? config.width : 5.0,
|
||||
material: new Cesium.PolylineGlowMaterialProperty({
|
||||
color: config.color
|
||||
? new Cesium.Color.fromCssColorString(config.color)
|
||||
: Cesium.Color.GOLD,
|
||||
}),
|
||||
depthFailMaterial: new Cesium.PolylineGlowMaterialProperty({
|
||||
color: config.color
|
||||
? new Cesium.Color.fromCssColorString(config.color)
|
||||
: Cesium.Color.GOLD,
|
||||
}),
|
||||
// clampToGround: true,
|
||||
},
|
||||
});
|
||||
}
|
||||
function drawPolygon(positions, config_) {
|
||||
if (positions.length < 2) return;
|
||||
let config = config_ ? config_ : {};
|
||||
return viewer.entities.add({
|
||||
name: "面几何对象",
|
||||
polygon: {
|
||||
hierarchy: positions,
|
||||
material: config.color
|
||||
? new Cesium.Color.fromCssColorString(config.color).withAlpha(
|
||||
0.2
|
||||
)
|
||||
: new Cesium.Color.fromCssColorString("#FFD700").withAlpha(
|
||||
0.2
|
||||
),
|
||||
},
|
||||
});
|
||||
}
|
||||
function clearDrawEntities() {
|
||||
tempEntities = [];
|
||||
// 清除之前的实体
|
||||
const entitys = viewer.entities._entities._array;
|
||||
let length = entitys.length;
|
||||
// 倒叙遍历防止实体减少之后entitys[f]不存在
|
||||
for (let f = length - 1; f >= 0; f--) {
|
||||
if (
|
||||
entitys[f]._name &&
|
||||
(entitys[f]._name === "点几何对象" ||
|
||||
entitys[f]._name === "线几何对象" ||
|
||||
entitys[f]._name === "面几何对象")
|
||||
) {
|
||||
viewer.entities.remove(entitys[f]);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="cesiumContainer"></div>
|
||||
<div class="menu-container">
|
||||
<el-row type="flex" :gutter="20">
|
||||
<el-col :span="24">
|
||||
<div class="grid-content bg-purple">
|
||||
<el-breadcrumb separator="/">
|
||||
<el-breadcrumb-item>cesium</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>绘制功能</el-breadcrumb-item>
|
||||
<el-breadcrumb-item>点、线、面</el-breadcrumb-item>
|
||||
</el-breadcrumb>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" :gutter="20">
|
||||
<el-col :span="24">
|
||||
<div class="grid-content bg-purple">
|
||||
<cesiumComponent id="cesium" ref="refCesium" />
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row type="flex" :gutter="20">
|
||||
<el-col :span="24">
|
||||
<div class="grid-content bg-purple">
|
||||
<el-button type="primary" @click="drawTerrian()">获取视野内的地形</el-button>
|
||||
<el-button type="primary" @click="filterTerrian()">过滤地形</el-button>
|
||||
<!-- <el-button type="primary" @click="draw('polyline')">绘制线</el-button>
|
||||
<el-button type="primary" @click="draw('polygon')">绘制面</el-button>
|
||||
<el-button type="primary" @click="clearDrawEntities">清空</el-button> -->
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div
|
||||
id="tooltip"
|
||||
style="
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
color: rgb(255, 255, 255);
|
||||
font-size: 12px;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
"
|
||||
>
|
||||
左键点击选点，右键确定
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
#cesiumContainer{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.menu-container {
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
left: 100px;
|
||||
z-index: 9999;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import { createApp } from 'vue'
|
||||
import './style.css'
|
||||
import App from './App.vue'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
createApp(App)
|
||||
.use(ElementPlus)
|
||||
.mount('#app')
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import cesium from 'vite-plugin-cesium';
|
||||
export default defineConfig({
|
||||
plugins: [vue(),cesium()]
|
||||
})
|
||||
Loading…
Reference in New Issue