| | |
| | | </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 |
| | |
| | | ref="panelToolRef" |
| | | :propertyMap="propertyMap" |
| | | :propertyConfigMap="propertyConfigMap" |
| | | class="absolute top-12 right-2 z-14" |
| | | class="absolute top-0 right-2 z-14 h-full" |
| | | :olMap="olMap" |
| | | :isFullscreen="isFullscreen" |
| | | @toggleFullScreen="toggleFullScreen" |
| | | ></PanelTool> |
| | | <!-- <el-button class="absolute top-3 right-4" @click="changeTheme" type="primary">切换主题</el-button> --> |
| | | |
| | | <Search class="absolute top-0 left-2 z-14 w-fit" :olMap="olMap" :propertyMap="propertyMap" :propertyConfigMap="propertyConfigMap"/> |
| | | </div> |
| | | </template> |
| | | |
| | |
| | | import equipPic from './img/equip.svg'; |
| | | import LayerControl from './LayerControl.vue'; |
| | | import PanelTool from './panelTool/index.vue'; |
| | | import Search from './Search.vue'; |
| | | import { |
| | | getMapDrawStyles, |
| | | getMapLayerGroupList, |
| | |
| | | import { MarkerOverlay } from '/@/model/map/overlay/marker'; |
| | | import { useCompRef } from '/@/utils/types'; |
| | | import { formatDate } from '/@/utils/formatTime'; |
| | | import { MapPanelTool } from './types'; |
| | | |
| | | const panelToolRef = useCompRef(PanelTool); |
| | | |
| | | const props = withDefaults( |
| | | defineProps<{ |
| | | data: any; |
| | | config?: { |
| | | sourceType: GaoDeSourceType; |
| | | markerIsVisible: boolean; |
| | | }; |
| | | isFullscreen: boolean; |
| | | }>(), |
| | | { |
| | | config: () => ({ |
| | | sourceType: GaoDeSourceType.Vector, |
| | | markerIsVisible: true, |
| | | }), |
| | | } |
| | | ); |
| | | |
| | | const locationCurrent = () => { |
| | | olMap.value.locationCurrent(); |
| | | }; |
| | | |
| | | const colsArray = computed(() => { |
| | | return props.data.cols ?? []; |
| | | }); |
| | | const emit = defineEmits(['markerClick', 'closeInfoWindow']); |
| | | const emit = defineEmits(['markerClick', 'closeInfoWindow', 'toggleFullScreen']); |
| | | |
| | | const toggleFullScreen = () => { |
| | | emit('toggleFullScreen'); |
| | | }; |
| | | |
| | | const containerRef = ref<HTMLDivElement>(null); |
| | | const infoWindowRef = ref<HTMLDivElement>(null); |
| | |
| | | |
| | | const handleVectorTileClick = (feature, layer) => { |
| | | panelToolRef.value.featureClick(feature); |
| | | feature && panelToolRef.value.setActivePanel(MapPanelTool.Property); |
| | | // setActiveStyle(feature,layer); |
| | | }; |
| | | const propertyMap = ref({}); |
| | |
| | | const lSize = feature.get('lsize'); |
| | | const lColor = feature.get('lcolor'); |
| | | const lstyle = feature.get('lstyle'); |
| | | |
| | | const pSize1 = feature.get('psize'); |
| | | const pcolor1 = feature.get('pcolor'); |
| | | const pStyle1 = feature.get('pstyle'); |
| | | const lineStyle = olMap.value.getLineStyles({ |
| | | lsize: lSize, |
| | | lcolor: lColor, |
| | | lstyle: lstyle, |
| | | psize: pSize1, |
| | | pcolor: pcolor1, |
| | | pstyle: pStyle1, |
| | | }); |
| | | styles.push(...lineStyle); |
| | | break; |
| | | case 'Polygon': |
| | | const pColor = feature.get('pcolor'); |
| | | const lSize1 = feature.get('lsize'); |
| | | const lColor1 = feature.get('lcolor'); |
| | | const lstyle1 = feature.get('lstyle'); |
| | | const polygonStyle = olMap.value.getPolygonStyles({ |
| | | pcolor: pColor, |
| | | lsize: lSize1, |
| | | lcolor: lColor1, |
| | | lstyle: lstyle1, |
| | | }); |
| | | styles.push(...polygonStyle); |
| | | break; |
| | | default: |
| | | break; |
| | |
| | | await getDrawStyles(); |
| | | const res = await getMapLayersByPost(); |
| | | const layers = reverse(res?.layers ?? []); |
| | | if (layers.length === 0) return; |
| | | const layerModels = []; |
| | | for (const item of layers) { |
| | | const styleFunc = olMap.value.unsupportedLayers.includes(item.id) ? undefined : layerStyleFunc; |
| | |
| | | getGroupList().then((groupList) => { |
| | | olMap.value.setAllLayers(layerModels, layers, groupList); |
| | | }); |
| | | if (layers.length === 0) return; |
| | | |
| | | getThemeList(); |
| | | getPropertyList(); |
| | | olMap.value.on('featureChange', handleVectorTileClick); |
| | |
| | | olMap.value = new OLMap({ |
| | | container: containerRef.value, |
| | | sourceType: props.config?.sourceType, |
| | | markerIsVisible: props.config?.markerIsVisible, |
| | | }); |
| | | |
| | | addMarkerLayer(); |