Web/daimp-front
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

gs地图

Browse Source
This commit is contained in:
lzc 2025-03-31 14:44:31 +08:00
parent e20efc20df
commit c28cabe5b5
5 changed files with 239 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
sub-government-screen-service/auto-imports.d.ts vendored Normal file
View File

@ -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')
}

6
sub-government-screen-service/src/components/centerMap.vue
View File

@ -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', // 贺派乡的颜色
},
},
],

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

@ -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>

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

@ -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>

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

@ -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
ref="polygon5"
:hierarchy="[99.402267, 23.538889, 99.402267, 23.538889, 5000.0, 99.402267, 23.538889, 0.0]"
:material="[0, 255, 255, 125]"
:per-position-height="true"
:outline="true"
outline-color="black"
></vc-graphics-polygon> -->
<vc-graphics-polygon
ref="polygon4"
:hierarchy="hierarchy4"
:material="[110, 161, 153, 150]"
:height="0"
:outline="false"
></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), // 方向角
pitch: Cesium.Math.toRadians(-90), // 俯仰角
roll: 0, // 滚动角
// heading: Cesium.Math.toRadians(-10), // 方向角
// pitch: Cesium.Math.toRadians(-90), // 俯仰角
// 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>