Auto Commit

f5f020b1 · zhaochen1127 · 7a093d7e · f5f020b1 · f5f020b1 · f5f020b1
隐藏空白更改
内联并排

Showing with 150 addition and 51 deletion

.inscode .inscode +4 -0

index.html index.html +21 -12

package.json package.json +1 -0

src/App.vue src/App.vue +124 -38

src/main.js src/main.js +0 -1

未找到文件。
--- a/.inscode
+++ b/.inscode
 run = "npm i && npm run dev"
+language = "node"

 [deployment]
 build = "npm i && npm run build"
@@ -8,3 +9,6 @@ run = "npm run preview"
 PATH = "/root/${PROJECT_DIR}/.config/npm/node_global/bin:/root/${PROJECT_DIR}/node_modules/.bin:${PATH}"
 XDG_CONFIG_HOME = "/root/.config"
 npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global"
+
+[debugger]
+program = "main.js"
--- a/index.html
+++ b/index.html
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>
+
+<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>CESIUM</title>
+  <script src="https://unpkg.com/@turf/turf/turf.min.js"></script>
+</head>
+<style>
+  .cesium-viewer-bottom {
+    display: none !important;
+  }
+</style>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
+</html>
\ No newline at end of file
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
    "preview": "vite preview --port 4173"
  },
  "dependencies": {
+    "cesium": "^1.109.0",
    "guess": "^1.0.2",
    "vue": "^3.2.37"
  },

--- a/src/App.vue
+++ b/src/App.vue
-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
-
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+  <div id="cesiumContainer">

-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
+  </div>
 </template>
+<script setup>
+import * as Cesium from 'cesium'
+import { onMounted } from 'vue';
+const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwOTY5ZmMyOS0wZGQzLTRmMDktODAwYS0xYmViMTAwNTM2ZmIiLCJpZCI6MTYxMTQzLCJpYXQiOjE2OTI3NTc3NTZ9.QMrjxDRgcTSk30YTxBmCm51HrM_UeQ3-xQq1KBkzpOs'
+onMounted(() => {
+  Cesium.Ion.defaultAccessToken = token
+  const position = Cesium.Cartesian3.fromDegrees(115.9, 40, 10)
+  const position2 = Cesium.Cartesian3.fromDegrees(117, 45, 10)
+  // 跟山鱼学Cesium
+  const Viewer = new Cesium.Viewer('cesiumContainer', {
+    infoBox: false,// 右侧选中信息框
+    SelectionIndicator: false//隐藏选中状态
+  })
+  // 实体entity
+  // 方式1：
+  // const entity = new Cesium.Entity({
+  //   position:Cesium.Cartesian3.fromDegrees(120,30),
+  //   point:{
+  //     pixelSize:20,// 点像素大小
+  //     color:Cesium.Color.RED,// 点颜色
+  //   }
+  // })
+  // Viewer.entities.add(entity)
+  // Viewer.zoomTo(entity)
+  // 方式2：
+  const point2 = Viewer.entities.add({
+    id: 'point',
+    position: Cesium.Cartesian3.fromDegrees(114, 30),
+    point: {
+      pixelSize: 20,
+      color: Cesium.Color.BLUE,
+    }
+  });
+  // 添加广告牌
+  const billboard = Viewer.entities.add({
+    position: position,
+    billboard: {
+      image: 'https://cdn.pixabay.com/photo/2023/07/29/18/50/bear-8157555_1280.jpg',
+      scale: 0.05
+    }
+  })
+  // 添加文字
+  const text = Viewer.entities.add({
+    position: position2,
+    label: {
+      // 文字设置
+      text: 'SHAN—YU',
+      fillColor: Cesium.Color.SKYBLUE,
+      showBackground: true,
+      backgroundColor: Cesium.Color.WHITE,
+    }
+  })
+  // 绘制线段
+  const polyline = Viewer.entities.add({
+    polyline: {
+      positions: Cesium.Cartesian3.fromDegreesArray([114, 20, 115, 20, 115, 21]),
+      material: Cesium.Color.SKYBLUE,
+      width: 5
+    }
+  })
+  // 绘制多边型
+  const polygon = Viewer.entities.add({
+    polygon: {
+      hierarchy: {
+        positions:
+          Cesium.Cartesian3.fromDegreesArray(
+            [
+              120, 29, 121, 29, 120.5, 28]
+          ),
+      },
+      material:
+        Cesium.Color.RED.withAlpha(0.1),
+      // 图像⾼度
+      extrudedHeight: 100000,
+      //是否显示外线
+      outline: true,
+      // 是否填充
+      fill: true,
+      // 离地面高度
+      height: 30000,
+      //⽐较拉伸后使⽤
+      outlineColor:
+        Cesium.Color.WHITE
+    }
+  })
+  // 绘制实体盒子
+  const box = Viewer.entities.add({
+    position: Cesium.Cartesian3.fromDegrees(110, 30, 3000),
+    box: {
+      material: Cesium.Color.LIGHTYELLOW,

+      dimensions: new Cesium.Cartesian3(1000, 1000, 1000),
+    }
+  })
+  // 绘制椭圆
+  const ellipse = Viewer.entities.add({
+    position: Cesium.Cartesian3.fromDegrees(100, 30, 3000),
+    ellipse: {
+      // 半短轴
+      semiMinorAxis: 500,
+      // 半长轴
+      semiMajorAxis: 700,
+      // 指定椭圆旋转方向
+      rotation: Math.PI / 5
+    }
+  })
+  // 绘制矩形
+  const rectangle = Viewer.entities.add({
+    rectangle: {
+      coordinates: Cesium.Rectangle.fromDegrees(100, 30, 110, 40),
+      material: 'https://th.bing.com/th/id/R.b49dbddffaa692d75988e0c5882dacca?rik=r6IIYs2muimY7A&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140529%2f1-140529145A4.jpg&ehk=Co9XURYRCjJXUTzFG0Mw6lD7olzDKceEgv3slEC8kvQ%3d&risl=&pid=ImgRaw&r=0',
+      extrudedHeight: 40000
+    }
+  })
+  Viewer.zoomTo(rectangle)
+})
+</script>
 <style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
+* {
+  margin: 0;
+  padding: 0;
 }

-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
+#cesiumContainer {
+  width: 100%;
+  height: 100%;
 }
 </style>
--- a/src/main.js
+++ b/src/main.js
 import { createApp } from 'vue'
 import App from './App.vue'

-import './assets/main.css'

 createApp(App).mount('#app')