|
@@ -1,102 +1,105 @@
|
|
|
<template>
|
|
|
- <div id="map">
|
|
|
- <iframe id="i_map" name="i_map"></iframe>
|
|
|
- </div>
|
|
|
+ <div id="map">
|
|
|
+ <iframe id="i_map" name="i_map"></iframe>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import useLayoutStore from '@/store/layout';
|
|
|
-import { useMapStore } from "@/store/map.js";
|
|
|
-import { AddYaoganMapLayer, importantAreaPosition } from "@/utils/map/addLayer.js";
|
|
|
-import CityGis from '@/utils/map/CityGis.Bridge.js';
|
|
|
-import { myBridge } from "@/utils/map/map.js";
|
|
|
-import { onMounted } from "vue";
|
|
|
+import useLayoutStore from '@/store/layout'
|
|
|
+import { useMapStore } from '@/store/map.js'
|
|
|
+import { AddYaoganMapLayer, importantAreaPosition } from '@/utils/map/addLayer.js'
|
|
|
+import CityGis from '@/utils/map/CityGis.Bridge.js'
|
|
|
+import { myBridge } from '@/utils/map/map.js'
|
|
|
+import { onMounted } from 'vue'
|
|
|
|
|
|
-let bridge;
|
|
|
+let bridge
|
|
|
export default {
|
|
|
- name: "Map",
|
|
|
- setup() {
|
|
|
- const mapStore = useMapStore();
|
|
|
- const layoutStore = useLayoutStore()
|
|
|
- onMounted(() => {
|
|
|
- layoutStore.toggleGlobalLoading(true)
|
|
|
- setTimeout(() => {
|
|
|
- layoutStore.toggleGlobalLoading(false)
|
|
|
- }, 2500);
|
|
|
- myBridge.bridgeContent = bridge = new CityGis.Bridge({
|
|
|
- id: "i_map",
|
|
|
- //url: 'http://localhost:5173/map-tool-widget/',
|
|
|
- // url: 'http://10.1.163.210:5173/map-tool-widget/#/jk_map',
|
|
|
- // url: 'http://58.34.215.19:8100/map-tool-widget/',
|
|
|
- // url: 'https://cimweb.zjw.sh.cegn.cn:2007/map-tool-widget/#/',
|
|
|
- url: 'http://58.34.215.19:8095/map-tool-widget/#/jk_map',
|
|
|
- onReady: function () {
|
|
|
- console.log("地图创建完成")
|
|
|
- }
|
|
|
- })
|
|
|
- AddYaoganMapLayer();
|
|
|
- importantAreaPosition(4190, -5273, 19419, 6, 34);
|
|
|
- bridge.addEventListener(arg => {
|
|
|
- // console.log('map listener:',arg)
|
|
|
- switch (arg.action) {
|
|
|
- case "MapExtentChanged":
|
|
|
- let scale = arg.data.scale;
|
|
|
- mapStore.extent = arg.data.extent;
|
|
|
- mapStore.center = arg.data.center;
|
|
|
- mapStore.camera = arg.data.camera;
|
|
|
- mapStore.scale = scale;
|
|
|
- break;
|
|
|
- case "SelectedCubeInfo":
|
|
|
- console.log(arg)
|
|
|
- console.log("gridCode", arg.data.grid)
|
|
|
- let gridCode = arg.data.grid;
|
|
|
- mapStore.gridCode = gridCode;
|
|
|
- layoutStore.toggleFloatPanel('cube', true)
|
|
|
- break;
|
|
|
- case "SelectedUAVInfo":
|
|
|
- mapStore.uavId = arg.data.uavId;
|
|
|
- break;
|
|
|
- case "DrawComplete":
|
|
|
- let geometry = arg.data.geometry;
|
|
|
- mapStore.draw_geometry = geometry;
|
|
|
- break;
|
|
|
- case "CurrentUavInfo":
|
|
|
- mapStore.currentUavInfo = arg.data.message;
|
|
|
- break;
|
|
|
- case "RealTimeUAVList":
|
|
|
- mapStore.realTimeUAVList= arg.data.message;
|
|
|
- break;
|
|
|
- case "ReturnResult":
|
|
|
- mapStore.queryResult= arg.data.message;
|
|
|
- break;
|
|
|
- case "CubeResult":
|
|
|
- console.log(arg)
|
|
|
- mapStore.cubeResult= arg.data.message;
|
|
|
- break;
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- }
|
|
|
+ name: 'Map',
|
|
|
+ setup() {
|
|
|
+ const mapStore = useMapStore()
|
|
|
+ const layoutStore = useLayoutStore()
|
|
|
+ onMounted(() => {
|
|
|
+ layoutStore.toggleGlobalLoading(true)
|
|
|
+ setTimeout(() => {
|
|
|
+ layoutStore.toggleGlobalLoading(false)
|
|
|
+ }, 2500)
|
|
|
+ myBridge.bridgeContent = bridge = new CityGis.Bridge({
|
|
|
+ id: 'i_map',
|
|
|
+ url: 'http://localhost:5173/map-tool-widget/',
|
|
|
+ // url: 'http://10.1.163.210:5173/map-tool-widget/#/jk_map',
|
|
|
+ // url: 'http://58.34.215.19:8100/map-tool-widget/',
|
|
|
+ // url: 'https://cimweb.zjw.sh.cegn.cn:2007/map-tool-widget/#/',
|
|
|
+ // url: 'http://58.34.215.19:8095/map-tool-widget/#/jk_map',
|
|
|
+ onReady: function () {
|
|
|
+ console.log('地图创建完成')
|
|
|
+ },
|
|
|
+ })
|
|
|
+ AddYaoganMapLayer()
|
|
|
+ importantAreaPosition(4190, -5273, 19419, 6, 34)
|
|
|
+ bridge.addEventListener((arg) => {
|
|
|
+ // console.log('map listener:',arg)
|
|
|
+ switch (arg.action) {
|
|
|
+ case 'MapExtentChanged':
|
|
|
+ let scale = arg.data.scale
|
|
|
+ mapStore.extent = arg.data.extent
|
|
|
+ mapStore.center = arg.data.center
|
|
|
+ mapStore.camera = arg.data.camera
|
|
|
+ mapStore.scale = scale
|
|
|
+ break
|
|
|
+ case 'SelectedCubeInfo':
|
|
|
+ console.log(arg)
|
|
|
+ console.log('gridCode', arg.data.grid)
|
|
|
+ let gridCode = arg.data.grid
|
|
|
+ mapStore.gridCode = gridCode
|
|
|
+ layoutStore.toggleFloatPanel('cube', true)
|
|
|
+ break
|
|
|
+ case 'SelectedUAVInfo':
|
|
|
+ mapStore.uavId = arg.data.uavId
|
|
|
+ break
|
|
|
+ case 'DrawComplete':
|
|
|
+ let geometry = arg.data.geometry
|
|
|
+ mapStore.draw_geometry = geometry
|
|
|
+ break
|
|
|
+ case 'CurrentUavInfo':
|
|
|
+ mapStore.currentUavInfo = arg.data.message
|
|
|
+ break
|
|
|
+ case 'RealTimeUAVList':
|
|
|
+ mapStore.realTimeUAVList = arg.data.message
|
|
|
+ break
|
|
|
+ case 'ReturnResult':
|
|
|
+ mapStore.queryResult = arg.data.message
|
|
|
+ break
|
|
|
+ case 'CubeResult':
|
|
|
+ mapStore.cubeResult = arg.data.message
|
|
|
+ break
|
|
|
+ case 'CurrentCubeLevel':
|
|
|
+ console.log(arg)
|
|
|
+ mapStore.currentCubeLevel = arg.data.level
|
|
|
+ break
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
#map {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: 1;
|
|
|
- background-color: var(--bg-color);
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 1;
|
|
|
+ background-color: var(--bg-color);
|
|
|
}
|
|
|
|
|
|
#i_map {
|
|
|
- position: fixed;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- border: none;
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ border: none;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|