打卡范围

src/views/ProjectScreen/components/centerPage.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="centerPage">
     <div class="topPage">
-      <img src="@/assets/projectLarge/center.png" alt="">
+      <div id="earth" style="width: 100%;height: 100%;"></div>
     </div>
     <div class="endPage" :class="{ 'slide-out-down': isHide }">
       <Title title="AI安全巡检">
@@ -30,7 +30,7 @@
   </div>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { ref, onMounted, toRefs, getCurrentInstance } from "vue"
 import Title from './title.vue'
 import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
@@ -56,12 +56,12 @@ const inspectionList = ref([{
   picture: "",
   createTime: ""
 }])
-const swiperContent = ref<HTMLDivElement>()
+const swiperContent = ref()
 const swiperItemWidth = ref(100)
 const canLeft = ref(false)
 const canRight = ref(true)
 
-const swiperClick = (direction: 'left' | 'right') => {
+const swiperClick = (direction) => {
   if (!swiperContent.value) return
 
   if (direction === 'right') {
@@ -90,18 +90,67 @@ const getInspectionList = async () => {
   const { code, data } = res
   if (code === 200) {
     data.map(item => {
-      item.label = violation_level_type.value.find((i: any) => i.value === item.violationType)?.label
+      item.label = violation_level_type.value.find((i) => i.value === item.violationType)?.label
     })
     inspectionList.value = data
   }
 }
+// 创建地球
+const createEarth = () => {
+  window.YJ.on({
+    ws: true,
+    // host: getIP(), //资源所在服务器地址
+    // username: this.loginForm.username, //用户名 可以不登录（不填写用户名），不登录时无法加载服务端的数据
+    // password: md5pass, //密码  生成方式：md5(用户名_密码)
+  }).then((res) => {
+    let earth = new YJ.YJEarth("earth");
+    window.Earth1 = earth;
+    YJ.Global.openRightClick(window.Earth1);
+    YJ.Global.openLeftClick(window.Earth1);
+    let view = {
+      "position": {
+        "lng": 102.03643298211526,
+        "lat": 34.393586474501,
+        "alt": 11298179.51993155
+      },
+      "orientation": {
+        "heading": 360,
+        "pitch": -89.94481747201486,
+        "roll": 0
+      }
+    }
+    loadBaseMap(earth.viewer)
+    // YJ.Global.flyTo(earth, view);
+    // YJ.Global.setDefaultView(earth.viewer, view)
+  })
+}
+// 加载底图
+const loadBaseMap = (viewer) => {
+  // 创建瓦片提供器
+  const imageryProvider = new Cesium.UrlTemplateImageryProvider({
+    url: 'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
+    // 可选：设置瓦片的格式
+    fileExtension: 'png',
+    // 可选：设置瓦片的范围和级别
+    minimumLevel: 0,
+    maximumLevel: 18,
+    // 可选：设置瓦片的投影（默认为Web Mercator）
+    projection: Cesium.WebMercatorProjection,
+    // 可选：如果瓦片服务需要跨域请求，设置请求头部
+    credit: new Cesium.Credit('卫星图数据来源')
+  });
 
+  // 添加图层到视图
+  const layer = viewer.imageryLayers.addImageryProvider(imageryProvider);
+}
 onMounted(() => {
   getInspectionList()
+  createEarth()
   if (swiperContent.value && swiperContent.value.children.length > 0) {
     swiperItemWidth.value = swiperContent.value.children[0].clientWidth + 20
   }
 })
+
 </script>
 
 <style scoped lang="scss">