gs地图

sub-government-screen-service/auto-imports.d.ts

@@ -0,0 +1,75 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useId: typeof import('vue')['useId']
+  const useLink: typeof import('vue-router')['useLink']
+  const useModel: typeof import('vue')['useModel']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}

sub-government-screen-service/src/components/centerMap.vue

@@ -46,7 +46,7 @@ const chartsData = reactive({
     geo: {
       map: mapName.value,
       roam: true,
-      zoom: 1.1,
+      zoom: 0.9,
       show: false,
       itemStyle: {
         normal: {
@@ -151,10 +151,10 @@ const chartsData = reactive({
           },
         },
         {
-          name: '勐永镇',
+          name: '贺派乡',
           value: [99.406653, 23.534142, 80], // 经度, 纬度, 数值
           itemStyle: {
-            color: '#00FF00', // 勐永镇的颜色
+            color: '#00FF00', // 贺派乡的颜色
           },
         },
       ],

sub-government-screen-service/src/views/breed/components/plantgs.vue

@@ -1,10 +1,85 @@
 <template>
   <div class="plant-gs-warp">
-    <div class="plant-gs-content" :style="{ 'background-image': 'url(' + getAssetsFile('images/plant/bg1.png') + ')' }"></div>
+    <div ref="viewwarp" class="plant-gs-content" :style="{ 'background-image': 'url(' + getAssetsFile('images/plant/bg1.png') + ')' }">
+      <vc-config-provider :cesium-path="vcConfig.cesiumPath" :access-token="vcConfig.accessToken">
+        <vc-viewer ref="viewerRef" @ready="onViewerReady">
+          <vc-layer-imagery :minimum-level="12" :maximum-level="18" :contrast="1.8" :saturation="1" :alpha="1">
+            <vc-imagery-provider-amap :key="'c843a50db7157faf295c6fa37c48719f'"></vc-imagery-provider-amap>
+          </vc-layer-imagery>
+
+          <vc-overlay-html ref="html" :position="pos" :show="show">
+            <div class="vc-name">耿马镇</div>
+          </vc-overlay-html>
+
+          <vc-entity description="Hello VueCesium">
+            <vc-graphics-rectangle
+              ref="rectangle2"
+              :coordinates="hierarchy4"
+              :material="[59, 199, 231, 80]"
+              :rotation="0.9"
+              :extruded-height="1000"
+              :height="0"
+              :outline="true"
+              :outline-width="0.1"
+              :clamp-to-ground="false"
+              :outline-color="[59, 199, 231, 150]"
+            ></vc-graphics-rectangle>
+          </vc-entity>
+        </vc-viewer>
+      </vc-config-provider>
+    </div>
   </div>
 </template>
 <script setup>
 import { isEmpty, getAssetsFile } from '@/utils';
+import { ref, reactive, onMounted, computed, nextTick, getCurrentInstance } from 'vue';
+import {
+  VcViewer,
+  VcConfigProvider,
+  VcImageryProviderAmap,
+  VcLayerImagery,
+  VcGraphicsPlane,
+  VcEntity,
+  VcGraphicsPolygon,
+  VcGraphicsRectangle,
+  VcOverlayHtml,
+} from 'vue-cesium';
+import 'vue-cesium/dist/index.css';
+
+const vcConfig = reactive({
+  cesiumPath: 'https://cdn.bootcdn.net/ajax/libs/cesium/1.80.0/Cesium.js',
+  accessToken:
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiNjJjZTUxYi1lOTQ3LTQ3YjctOGI3ZS02ZGUzY2E4YWFkNDkiLCJpZCI6Mjg4MjAxLCJpYXQiOjE3NDMwNTY0MzN9.rjHQiqf7Y8bccaqsapqveULVAUH6M1QkeFp-AKG-frA',
+});
+const viewerRef = ref(null);
+const viewwarp = ref(null);
+const rectangle2 = ref(null);
+
+onMounted(() => {
+  Promise.all([rectangle2.value.creatingPromise]).then((instances) => {
+    // console.info('aa', instances[0].viewer.entities);
+    instances[0].viewer.zoomTo(instances[0].viewer.entities);
+  });
+});
+const hierarchy4 = reactive([99.302267, 23.438899, 99.312267, 23.448889]);
+const pos = reactive([99.302267, 23.438899]);
+
+const onViewerReady = (readyObj) => {
+  console.info('readyObj', readyObj.Cesium); // Cesium namespace object
+  console.log(readyObj.viewer); // instanceof Cesium.Viewer
+
+  const { Cesium, viewer } = readyObj;
+
+  // 设置相机视角
+  viewer.camera.setView({
+    destination: Cesium.Cartesian3.fromDegrees(99.516667, 23.640556, 4000), // 目标中心点
+    orientation: {
+      ading: Cesium.Math.toRadians(6), //
+      pitch: Cesium.Math.toRadians(-25), //
+      roll: Cesium.Math.toRadians(6), //
+    },
+  });
+};
 </script>
 <style lang="scss" scoped>
 .plant-gs-warp {
@@ -17,6 +92,25 @@ import { isEmpty, getAssetsFile } from '@/utils';
     background-repeat: no-repeat;
     width: 100%;
     height: 100%;
+    overflow: hidden;
+    .vc-name {
+      color: #fff;
+      font-size: 16px;
+      font-weight: bold;
+    }
+    ::v-deep() {
+      .vc-viewer {
+        height: calc(100% - 30px) !important;
+        width: calc(100% - 20px) !important;
+        margin: 20px 10px 10px 10px !important;
+      }
+      canvas {
+        border-radius: 10px !important;
+      }
+      .cesium-viewer-bottom {
+        display: none !important;
+      }
+    }
   }
 }
 </style>

sub-government-screen-service/src/views/breed/index.vue

@@ -26,9 +26,9 @@
               </customBack>
             </div>
           </el-col>
-          <el-col :span="12">
+          <el-col :span="12" style="height: 100%">
             <el-row style="height: 67%">
-              <el-col :span="24" class="center-top">
+              <el-col :span="24" class="center-top" style="height: 100%">
                 <div class="notice">
                   <noticeBar :height="'40px'"></noticeBar>
                 </div>

sub-government-screen-service/src/views/plant/components/plantgs.vue

@@ -6,15 +6,16 @@
           <vc-layer-imagery :minimum-level="12" :maximum-level="18" :contrast="1.8" :saturation="1" :alpha="1">
             <vc-imagery-provider-amap :key="'c843a50db7157faf295c6fa37c48719f'"></vc-imagery-provider-amap>
           </vc-layer-imagery>
+
+          <!-- 蒙版层 -->
           <vc-entity>
-            <!-- <vc-graphics-polygon
+            <vc-graphics-polygon
-              ref="polygon5"
+              ref="polygon4"
-              :hierarchy="[99.402267, 23.538889, 99.402267, 23.538889, 5000.0, 99.402267, 23.538889, 0.0]"
+              :hierarchy="hierarchy4"
-              :material="[0, 255, 255, 125]"
+              :material="[110, 161, 153, 150]"
-              :per-position-height="true"
+              :height="0"
-              :outline="true"
+              :outline="false"
-              outline-color="black"
+            ></vc-graphics-polygon>
-            ></vc-graphics-polygon> -->
           </vc-entity>
         </vc-viewer>
       </vc-config-provider>
@@ -24,7 +25,16 @@
 <script setup>
 import { isEmpty, getAssetsFile } from '@/utils';
 import { ref, reactive, onMounted, computed, nextTick, getCurrentInstance } from 'vue';
-import { VcViewer, VcConfigProvider, VcImageryProviderAmap, VcLayerImagery, VcGraphicsPlane, VcEntity, VcGraphicsPolygon } from 'vue-cesium';
+import {
+  VcViewer,
+  VcConfigProvider,
+  VcImageryProviderAmap,
+  VcLayerImagery,
+  VcGraphicsPlane,
+  VcEntity,
+  VcGraphicsPolygon,
+  VcGraphicsRectangle,
+} from 'vue-cesium';
 import 'vue-cesium/dist/index.css';
 
 const vcConfig = reactive({
@@ -34,32 +44,68 @@ const vcConfig = reactive({
 });
 const viewerRef = ref(null);
 const viewwarp = ref(null);
-let plane2 = ref(null);
+let polygon4 = ref(null);
+
 onMounted(() => {
   console.info('onMounted', viewerRef);
-  Promise.all([plane2.value.creatingPromise]).then((instances) => {
+  Promise.all([polygon4.value.creatingPromise]).then((instances) => {
     console.info('instances');
     // instances[0].viewer.zoomTo(instances[0].viewer.entities);
   });
 });
 
+const hierarchy4 = reactive({
+  positions: [
+    [99.406653, 23.534142], // 左下角
+    [99.706653, 23.534142], // 右下角
+    [99.706653, 23.834142], // 右上角
+    [99.406653, 23.834142], // 左上角
+  ],
+  holes: [
+    {
+      positions: [
+        [99.506653, 23.634142], // 耿马镇边界点 1
+        [99.606653, 23.634142], // 耿马镇边界点 2
+        [99.606653, 23.734142], // 耿马镇边界点 3
+        [99.506653, 23.734142], // 耿马镇边界点 4
+      ],
+    },
+  ],
+});
+
 const onViewerReady = (readyObj) => {
   console.info('readyObj', readyObj.Cesium); // Cesium namespace object
   console.log(readyObj.viewer); // instanceof Cesium.Viewer
 
-  // 在这里处理 Viewer 的初始化逻辑
   const { Cesium, viewer } = readyObj;
 
-  // 示例：设置地球背景颜色
+  // 将耿马县和耿马镇的所有边界点合并
-  viewer.scene.globe.baseColor = Cesium.Color.DARKBLUE;
+  const allPositions = [...hierarchy4.positions, ...hierarchy4.holes[0].positions].map((coord) => Cesium.Cartesian3.fromDegrees(coord[0], coord[1]));
+
+  // 计算所有边界点的包围球
+  const boundingSphere = Cesium.BoundingSphere.fromPoints(allPositions);
+
+  // 设置相机视角
   viewer.camera.setView({
-    destination: Cesium.Cartesian3.fromDegrees(99.406653, 23.534142, 4000),
+    destination: boundingSphere.center, // 目标中心点
     orientation: {
-      heading: Cesium.Math.toRadians(0), // 方向角
+      // heading: Cesium.Math.toRadians(-10), // 方向角
-      pitch: Cesium.Math.toRadians(-90), // 俯仰角
+      // pitch: Cesium.Math.toRadians(-90), // 俯仰角
-      roll: 0, // 滚动角
+      // roll: 0, // 滚动角
+      heading: Cesium.Math.toRadians(6), //
+      pitch: Cesium.Math.toRadians(-25), //
+      roll: Cesium.Math.toRadians(6), //
     },
   });
+
+  // 动态调整相机高度，确保整个区域可见
+  const radius = boundingSphere.radius; // 包围球半径
+  const cameraHeight = radius * 1; // 根据经验公式调整高度
+  viewer.camera.moveBackward(cameraHeight); // 向后移动相机
+
+  // viewer.camera.changed.addEventListener(() => {
+  //   console.log('Camera changed:', viewer.camera);
+  // });
 };
 </script>
 <style lang="scss" scoped>