src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/BasicMap.vue
@@ -34,7 +34,7 @@ </div> </div> </div> <LayerControl v-if="olMap" :olMap="olMap" class="absolute top-3 left-3 z-10" /> <!-- <LayerControl v-if="olMap" :olMap="olMap" class="absolute top-3 left-3 z-10" /> --> <!-- <PropertyPanel class="absolute top-14 left-10 z-14"></PropertyPanel> --> <PanelTool @@ -93,14 +93,12 @@ data: any; config?: { sourceType: GaoDeSourceType; markerIsVisible: boolean; }; isFullscreen: boolean; }>(), { config: () => ({ sourceType: GaoDeSourceType.Vector, markerIsVisible: true, }), } ); @@ -457,7 +455,6 @@ olMap.value = new OLMap({ container: containerRef.value, sourceType: props.config?.sourceType, markerIsVisible: props.config?.markerIsVisible, }); addMarkerLayer(); src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/LayerControl.vue
@@ -109,7 +109,6 @@ { id: ROOT_OVERLAY_TYPE.Marker, label: '设备', checked: props.olMap.markerIsVisible.value, }, ]); const initTreeChecked = () => { @@ -131,16 +130,7 @@ }; let isHumanCheckTrigger = false; watch( () => props.olMap.markerIsVisible.value, (val) => { if (isHumanCheckTrigger) { isHumanCheckTrigger = false; return; } setTreeChecked(val); } ); const handleNodeClick = (data: any, node: any) => { if (data.id === ROOT_OVERLAY_TYPE.Marker) { src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/Map.vue
@@ -25,7 +25,6 @@ <div v-if="isRenderFullscreen" v-show="isFullscreen" class="absolute inset-0 z-50 w-full h-full"> <BasicMap ref="fullScreenMapRef" :config="fullScreenMapConfig" :isFullscreen="true" class="h-full" :data="data" @@ -87,10 +86,7 @@ } }; const fullScreenMapConfig = ref({ sourceType: GaoDeSourceType.Vector, markerIsVisible: true, }); // 切换全屏 const toggleFullScreen = async () => { isFullscreen.value = !isFullscreen.value; @@ -99,7 +95,6 @@ if (isFullscreen.value) { const config = normalMapRef.value.olMap.getConfig(); if (!isRenderFullscreen.value) { fullScreenMapConfig.value = config; isRenderFullscreen.value = true; } else { // fullScreenMapRef.value.olMap.setConfig(config); src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/LayerControl.vue
@@ -51,7 +51,7 @@ const checkedKeys = node.checkedKeys; isHumanCheckTrigger = true; travelTree(layerInfo.value, (layer) => { if (layer.type === 'layer') { if (layer.type === 'layer' || layer.type === 'equip') { const id = layer.id; if (!checkedKeys.includes(id)) { layer.isVisible = false; @@ -90,7 +90,7 @@ } const keys = []; travelTree(val, (item) => { if (item.type === 'layer') { if (item.type === 'layer'|| item.type === 'equip') { if (item.isVisible) { keys.push(item.id); } src/components/chat/chatComponents/summaryCom/components/recordSetTable/map/panelTool/ThemeControl.vue
@@ -377,9 +377,7 @@ return styles; }; const allLayers = props.olMap.layerInfo.value.reduce((preVal, curVal) => { return preVal.concat(curVal.children.map((item) => item)); }, []); const allLayers = props.olMap.getAllLayers(); for (const item of allLayers) { if (props.olMap?.unsupportedLayers.includes(item.id)) { continue; @@ -399,9 +397,7 @@ const ids = allIds.join(','); if (!ids) { const allLayers = props.olMap.layerInfo.value.reduce((preVal, curVal) => { return preVal.concat(curVal.children.map((item) => item.model)); }, []); const allLayers = props.olMap.getAllLayerModels(); for (const item of allLayers) { const originStyle = item.get('originStyle'); originStyle && item.setStyle(originStyle); src/components/chat/smallChat/index.vue
@@ -293,10 +293,21 @@ break; case '显示设备': props.olMap.toggleMarkerOverlayVisible(true); const equipOverlay = props.olMap.getEquipOverlay(); if (equipOverlay) { equipOverlay.isVisible = true; // 强制触发更新 props.olMap.layerInfo.value = props.olMap.layerInfo.value.concat([]) } break; case '隐藏设备': props.olMap.toggleMarkerOverlayVisible(false); const equipOverlay1 = props.olMap.getEquipOverlay(); if (equipOverlay1) { equipOverlay1.isVisible = false; // 强制触发更新 props.olMap.layerInfo.value = props.olMap.layerInfo.value.concat([]) } break; case '聚焦设备': props.olMap.adjustViewToMarkers(); src/model/map/OLMap.ts
@@ -61,7 +61,6 @@ }; type MapConfig = { sourceType: GaoDeSourceType; markerIsVisible: boolean; }; type OLEventType = 'blackClick' | 'featureChange' | 'featureHoverChange'; @@ -91,7 +90,6 @@ themeInfo = ref([] as any[]); activeSourceType: Ref<GaoDeSourceType> = ref(GaoDeSourceType.Vector); markerIsVisible: Ref<boolean> = ref(true); interactLayer: VectorLayer<VectorSource<Feature<Geometry>>, Feature<Geometry>> = null; /** @description 当前激活状态 feature */ @@ -126,13 +124,12 @@ } constructor(options: OLMapOptions) { const { container, view, sourceType, markerIsVisible } = defaultsDeep(options, { const { container, view, sourceType } = defaultsDeep(options, { view: { center: [13247019.404399557, 4721671.572580107], zoom: 8, }, sourceType: GaoDeSourceType.Vector, markerIsVisible: true, } as OLMapOptions) as OLMapOptions; this.source = new XYZ({ crossOrigin: 'anonymous', @@ -153,7 +150,6 @@ interactions: olDefaults({ doubleClickZoom: false }), }); this.activeSourceType.value = sourceType; this.markerIsVisible.value = markerIsVisible; this.applySourceType(this.activeSourceType.value); this.listenMapClick(); this.addBasicControl(); @@ -356,6 +352,24 @@ this.adjustViewToOverlays(markers); } checkEquipIsShow() { for (const item of this.layerInfo.value) { if (item.id === 'equip') { return item.isVisible; } } return false; } getEquipOverlay() { for (const item of this.layerInfo.value) { if (item.type === 'equip') { return item; } } } createEleOverlay(dom: string | HTMLElement, position = [0, 0]) { const ele = typeof dom === 'string' ? (document.querySelector(dom) as HTMLElement) : dom; if (!ele) return; @@ -366,7 +380,7 @@ stopEvent: false, className: 'z-[999]', }); eleOverlay.setVisible(this.markerIsVisible.value); eleOverlay.setVisible(this.checkEquipIsShow()); return eleOverlay; } @@ -475,6 +489,27 @@ this.themeInfo.value = themeInfo; } getAllLayers() { const allLayers = this.layerInfo.value.reduce((preVal, curVal) => { if (preVal.children && preVal.children.length > 0) { return preVal.concat(curVal.children.map((item) => item)); } else { return preVal; } }, []); return allLayers; } getAllLayerModels() { return this.layerInfo.value.reduce((preVal, curVal) => { if (preVal.children && preVal.children.length > 0) { return preVal.concat(curVal.children.map((item) => item.model)); } else { return preVal; } }, []); } /** @description 记录所有图层 */ setAllLayers(layerModels: Layer[], layers: any[], layerGroup: any[]) { // this.layerInfo.value = layerModels.map((layer, index) => { @@ -525,6 +560,22 @@ mapGroupItem.children.push(data); return preVal; }, []); const that = this; this.layerInfo.value.push({ id: 'equip', title: '监测设备', children: [], _isVisible: true, get isVisible() { return this._isVisible; }, set isVisible(val) { console.log("🚀 ~ val:", val) this._isVisible = val; that.toggleMarkerOverlayVisible(val); }, type: 'equip', }); } /** @@ -553,21 +604,17 @@ } } }); this.markerIsVisible.value = visible; } getConfig(): MapConfig { return { sourceType: this.activeSourceType.value, markerIsVisible: this.markerIsVisible.value, }; } setConfig(config: MapConfig) { this.activeSourceType.value = config.sourceType; this.markerIsVisible.value = config.markerIsVisible; this.applySourceType(this.activeSourceType.value); this.toggleMarkerOverlayVisible(this.markerIsVisible.value); } private addBasicControl() {
