Merge branch 'master' of http://124.70.43.205:3000/sunzehao/cesium_three

package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "@element-plus/icons-vue": "^2.3.2",
     "cesium": "^1.132.0",
+    "echarts": "^6.0.0",
     "element-plus": "^2.10.6",
     "vue": "^3.3.11",
     "vue-router": "^4.2.5"

src/main.js

@@ -3,22 +3,24 @@ import './assets/main.css'
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-import * as Cesium from "./Cesium";
-import "./Cesium/Widgets/widgets.css"
+import * as echarts from "echarts";
 
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
+
+
 const app = createApp(App)
 
 app.use(ElementPlus)
 app.use(router)
-app.use(Cesium)
 
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)
 }
 
+app.config.globalProperties.$echarts = echarts;
+
 app.mount('#app')

src/router/index.js

@@ -13,6 +13,16 @@ const router = createRouter({
       path: '/',
       name: 'CesiumMap',
       component: () => import('../views/cesium.vue')
+      },
+    {
+      path: '/mapview',
+      name: 'mapview',
+      component: () => import('../views/mapview.vue')
+      },
+    {
+      path: '/satellitecloudchart',
+      name: 'satellitecloudchart',
+      component: () => import('../views/satellitecloudchart.vue')
     },
     {
       path: '/about',

src/views/cesium.vue

@@ -200,7 +200,7 @@ export default {
           labelLayer.add({
             position: Cesium.Cartesian3.fromDegrees(city.lon, city.lat),
             text: city.name,
-            font: 'bold 20px "Microsoft YaHei", sans-serif',
+            font: 'bold 16px "Microsoft YaHei", sans-serif',
             fillColor: Cesium.Color.YELLOW,
             outlineColor: Cesium.Color.BLACK,
             outlineWidth: 2,

src/views/satellitecloudchart.vue

@@ -0,0 +1,239 @@
+<template>
+  <div class="mapBox">
+    <div id="cesiumContainer" style="width: 100%; height: 100vh"></div>
+    <div class="menuBox" :class="allyShow ? '' : 'switch'">
+      <el-button type="primary" @click="resetViewport">初始化视角</el-button>
+      <el-tooltip
+        class="box-item"
+        effect="dark"
+        :content="`点击${allyShow ? '隐藏' : '常显'}菜单栏`"
+        placement="bottom-end"
+      >
+        <el-icon
+          style="margin-left: 20px"
+          size="20px"
+          :color="allyShow ? '#1890ff' : '#f25656'"
+          @click="allyShow = !allyShow"
+        >
+          <House
+            :style="`transform: rotate(${
+              allyShow ? -45 : 45
+            }deg); transition: 0.2s; cursor: pointer;`"
+          />
+        </el-icon>
+      </el-tooltip>
+    </div>
+  </div>
+</template>
+
+<script>
+import * as Cesium from "../Cesium";
+import "../Cesium/Widgets/widgets.css";
+import basicGeoJson from "../assets/geoJson/basic.json";
+export default {
+  name: "CesiumMap",
+  data() {
+    return {
+      allyShow: false,
+      viewer: null,
+    };
+  },
+  mounted() {
+    this.initCesium();
+  },
+  methods: {
+    initCesium() {
+      // 需要从 https://cesium.com/ion/signup 获取
+      Cesium.Ion.defaultAccessToken =
+        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIwYTQwNDk3MC05YTZkLTQ2ZTEtODc0MS1lZTFkYjFlOTFmNmQiLCJpZCI6MTcyNDQ1LCJpYXQiOjE3NTQ4ODA4MzF9.KnhENYiHxNwTkhTWRA-lHqG59coLVT2FsIyOru2TV3E";
+      const viewer = new Cesium.Viewer("cesiumContainer", {
+        // terrainProvider: Cesium.createWorldTerrain(),
+        baseLayerPicker: false,
+        animation: false,
+        vrButton: false,
+        geocoder: false,
+        homeButton: false,
+        infoBox: false,
+        sceneModePicker: false,
+        selectionIndicator: false,
+        timeline: false,
+        fullscreenButton: false,
+        navigationHelpButton: false,
+        shouldAnimate: true,
+      });
+
+      // 移除底部广告信息
+      this.$nextTick(() => {
+        document.querySelector(".cesium-viewer-bottom")?.remove();
+      });
+
+      // 添加中文底图
+      const imageryProvider = new Cesium.UrlTemplateImageryProvider({
+        url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
+        credit: "高德地图",
+      });
+
+      viewer.imageryLayers.addImageryProvider(imageryProvider);
+
+      // 添加一些3D模型
+      //   const addModel = (name, lon, lat, height) => {
+      //     viewer.entities.add({
+      //       name: name,
+      //       position: Cesium.Cartesian3.fromDegrees(lon, lat, height),
+      //       model: {
+      //         uri: "/sample-data/models/CesiumAir/Cesium_Air.glb",
+      //         scale: 50000.0,
+      //       },
+      //     });
+      //   };
+
+      //   addModel("模型1", 116.4, 39.9, 1000);
+      //   addModel("模型2", 121.47, 31.23, 1000);
+
+      // 添加点击事件显示坐标
+      viewer.screenSpaceEventHandler.setInputAction((movement) => {
+        const cartesian = viewer.camera.pickEllipsoid(
+          movement.position,
+          viewer.scene.globe.ellipsoid
+        );
+        if (cartesian) {
+          const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+          const lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(5);
+          const lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(5);
+
+          viewer.entities.removeAll();
+          viewer.entities.add({
+            position: cartesian,
+            point: {
+              pixelSize: 10,
+              color: Cesium.Color.RED,
+            },
+            label: {
+              text: `经度: ${lon}°, 纬度: ${lat}°`,
+              font: '16px "Microsoft YaHei"',
+              fillColor: Cesium.Color.WHITE,
+              outlineColor: Cesium.Color.BLACK,
+              outlineWidth: 2,
+              style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+              pixelOffset: new Cesium.Cartesian2(0, -30),
+            },
+          });
+        }
+      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+
+      this.viewer = viewer;
+
+      this.initGeoJsonData();
+    },
+
+    // 初始化 geoJson 数据
+    async initGeoJsonData() {
+      // 创建GeoJSON数据源
+      await new Cesium.GeoJsonDataSource.load(basicGeoJson, {
+        stroke: Cesium.Color.WHITE, // 边界线颜色
+        fill: Cesium.Color.BLACK.withAlpha(0.1), // 填充颜色
+        strokeWidth: 1, // 边界线宽度
+        markerSymbol: "?", // 点要素的符号
+      }).then((dataSource) => {
+        // 添加到视图
+        this.viewer.dataSources.add(dataSource);
+        var entities = dataSource.entities.values;
+        for (let i = 0; i < entities.length; i++) {
+          let entity = entities[i];
+
+          let polyPositions = entity.polygon.hierarchy.getValue(
+            Cesium.JulianDate.now()
+          ).positions;
+          //单独设置线条样式
+          var positions = entity.polygon.hierarchy._value.positions;
+
+          entity.polyline = {
+            positions: positions,
+            width: 1,
+            outline: false,
+          };
+        }
+
+        // 添加中文标签图层
+        const labelLayer = new Cesium.LabelCollection();
+        this.viewer.scene.primitives.add(labelLayer);
+        const cities = [];
+        basicGeoJson?.features?.forEach((ele) => {
+          if (Array.isArray(ele.properties.centroid)) {
+            const name = ele.properties.name;
+            const lon = ele.properties.centroid[0];
+            const lat = ele.properties.centroid[1];
+            cities.push({ name, lon, lat });
+          }
+        });
+
+        cities.forEach((city) => {
+          labelLayer.add({
+            position: Cesium.Cartesian3.fromDegrees(city.lon, city.lat),
+            text: city.name,
+            font: 'bold 16px "Microsoft YaHei", sans-serif',
+            fillColor: Cesium.Color.YELLOW,
+            outlineColor: Cesium.Color.BLACK,
+            outlineWidth: 2,
+            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
+            pixelOffset: new Cesium.Cartesian2(0, 0), // 设置为0
+            horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平居中
+            verticalOrigin: Cesium.VerticalOrigin.CENTER, // 垂直居中
+          });
+        });
+
+        this.resetViewport();
+      });
+    },
+
+    // 重置视角
+    resetViewport() {
+      // 设置初始视图为宁夏
+      this.viewer.camera.flyTo({
+        destination: Cesium.Cartesian3.fromDegrees(
+          106.169866,
+          38.46637,
+          8000000
+        ),
+        orientation: {
+          heading: Cesium.Math.toRadians(0),
+          pitch: Cesium.Math.toRadians(-90),
+          roll: 0.0,
+        },
+        duration: 1.0,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.mapBox {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  box-sizing: content-box;
+
+  .menuBox {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    background: #fff;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 10px;
+
+    &.switch {
+      opacity: 0;
+      transition: 0.2s;
+
+      &:hover {
+        opacity: 1;
+        transition: 0.2s;
+      }
+    }
+  }
+}
+</style>