增加温度图

src/router/index.js

@@ -35,6 +35,12 @@ const router = createRouter({
       path: '/rainLayer',
       name: 'rainLayer',
       component: () => import('../views/cesiumComponents/rainLayer.vue')
+      },
+    //风速图
+    {
+      path: '/temperatureLayer',
+      name: 'temperatureLayer',
+      component: () => import('../views/cesiumComponents/temperatureLayer.vue')
     },
     {
       path: '/about',

src/views/cesium.vue

@@ -18,6 +18,11 @@
         @click="switchRainLayer"
         >{{ rainLayer ? "关闭" : "显示" }}降雨图</el-button
       >
+      <el-button
+        :type="rainLayer ? 'danger' : 'primary'"
+        @click="switchTemperatureLayerr"
+        >{{ rainLayer ? "关闭" : "显示" }}温度图</el-button
+      >
       <el-tooltip
         class="box-item"
         effect="dark"
@@ -342,6 +347,11 @@ export default {
         path: "/rainLayer",
       });
     },
+    switchTemperatureLayerr() {
+      this.$router.push({
+        path: "/temperatureLayer",
+      });
+    },
   },
 };
 </script>

src/views/cesiumComponents/temperatureLayer.vue

@@ -0,0 +1,214 @@
+<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-button type="primary" @click="switchLayer">返回</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: "temperatureLayer",
+  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,
+        imageryProvider: false, //控制默认底图的显示
+      });
+
+      // 移除底部广告信息
+      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: "影像地图",
+    //   });
+    //   imageryProvider.alpha = 0.1; // 透明度
+    //   imageryProvider.brightness = 0.1; // 亮度
+    //   imageryProvider.contrast = 0.1; // 对比度
+
+    //   viewer.imageryLayers.addImageryProvider(imageryProvider);
+
+        // 调用降雨底图
+      const rainLayer = new Cesium.UrlTemplateImageryProvider({
+        url: "https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=3b66d35579770393051599f8d518df4a",
+        credit: "风速影像地图",
+      });
+
+
+      viewer.imageryLayers.addImageryProvider(rainLayer);
+
+      this.viewer = viewer;
+      this.initGeoJsonData()
+    //   this.handleData()
+    },
+
+    // 初始化 geoJson 数据
+    async initGeoJsonData() {
+      // 创建GeoJSON数据源
+      await new Cesium.GeoJsonDataSource.load(basicGeoJson, {
+        stroke: Cesium.Color.LEMONCHIFFON, // 边界线颜色
+        fill: Cesium.Color.BLACK.withAlpha(0.1), // 填充颜色
+        strokeWidth: 3, // 边界线宽度
+        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 14px "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.2078,
+            37.9978,
+            8000000
+        ),
+        orientation: {
+          heading: Cesium.Math.toRadians(0),
+          pitch: Cesium.Math.toRadians(-90),
+          roll: 0.0,
+        },
+        duration: 1.0,
+      });
+    },
+
+    switchLayer() {
+        this.$router.push({
+            path: '/'
+        })
+    }
+  },
+};
+</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>