From d3e47ad7ea1ec7560a1fe3b5d7210feddcc9bb81 Mon Sep 17 00:00:00 2001
From: qiushijie <qiushijie@gedi.com.cn>
Date: Thu, 27 Jun 2024 15:10:27 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BaseViewer.vue | 141 ++++++++++++++++++++++++++++++++++
 src/components/HelloWorld.vue |  40 +++++-----
 2 files changed, 160 insertions(+), 21 deletions(-)
 create mode 100644 src/components/BaseViewer.vue

diff --git a/src/components/BaseViewer.vue b/src/components/BaseViewer.vue
new file mode 100644
index 0000000..5bdee9f
--- /dev/null
+++ b/src/components/BaseViewer.vue
@@ -0,0 +1,141 @@
+<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;
+    const cesiumKey = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyNjI2ZjVjMS0zZTFjLTQ3MDAtYTZlZC02YWFjOWQwNzBjNjIiLCJpZCI6ODM1NTQsImlhdCI6MTY0NTY1NzYzM30.IPqS_sM-s_vzNnK0EAiTy6kpYP5RBYkuMgbqJtKQkPw";
+    Cesium.Ion.defaultAccessToken = cesiumKey;
+    
+    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的地形
+    const terrain = new Cesium.Terrain(
+      Cesium.CesiumTerrainProvider.fromIonAssetId(1),
+    )
+    viewer.scene.setTerrain(terrain);
+    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)
+      }
+    })
+   
+  }
+</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="drawTin()">绘制TIN</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>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 19c5310..ec725d4 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -76,26 +76,26 @@ onMounted(()=>{
     // })
     addGeoJson();
     
-    //设置地理区域和准备变量:
-    var scene = viewer.scene;
-    var globe = viewer.scene.globe;
-    //遍历当前场景中所有的地形瓦片并将相交的瓦片添加到处理列表中。
-    var tilesToProcess = [];
-    var quadtree =
-      viewer.scene.globe._surface._tileProvider._quadtree._tilesToRender;
-    // 遍历地形瓦片
-    quadtree.forEach(function(tile) {
-      tilesToProcess.push(tile);
-      if (tile instanceof Cesium.Cesium3DTileset) return;
-    });
-    const MAX_SHORT = 32767;
-    var terrainProvider=viewer.terrainProvider
+    // //设置地理区域和准备变量:
+    // var scene = viewer.scene;
+    // var globe = viewer.scene.globe;
+    // //遍历当前场景中所有的地形瓦片并将相交的瓦片添加到处理列表中。
+    // var tilesToProcess = [];
+    // var quadtree =
+    //   viewer.scene.globe._surface._tileProvider._quadtree._tilesToRender;
+    // // 遍历地形瓦片
+    // quadtree.forEach(function(tile) {
+    //   tilesToProcess.push(tile);
+    //   if (tile instanceof Cesium.Cesium3DTileset) return;
+    // });
+    // const MAX_SHORT = 32767;
+    // var terrainProvider=viewer.terrainProvider
 
-    // 创建一个Request对象，这通常是可选的
-    const request = new Cesium.Request({
-      throttle: true,
-      throttleByServer: true
-    });
+    // // 创建一个Request对象，这通常是可选的
+    // const request = new Cesium.Request({
+    //   throttle: true,
+    //   throttleByServer: true
+    // });
 
     // terrain.readyEvent.addEventListener(provider => {
     //   scene.globe.enableLighting = true;
@@ -136,12 +136,10 @@ onMounted(()=>{
     // 定义请求多个瓦片数据的函数
     function requestMultipleTiles(tileCoords, level, terrainProvider) {
       let promises = [];
-
       for (let tileCoord of tileCoords) {
         let promise = requestTileData(tileCoord.x, tileCoord.y, level, terrainProvider);
         promises.push(promise);
       }
-
       return Promise.all(promises);
     }