基于 OpenLayers + GeoServer 的 OGC 协议验证平台开发日志——3、查询功能与组件化开发

1
<template>
2
  <div v-if="showPopup" class="feature-info-popup">
3
    <div class="popup-header">
4
      <h3>要素属性</h3>
5
      <button class="close-btn" @click="handleClose">×</button>
6
    </div>
7
    <div class="popup-content">
8
      <div v-if="Object.keys(attrs).length > 0">
9
        <div v-for="(value, key) in attrs" :key="key" class="attribute-item">
10
          <div class="attribute-label">{{ key }}</div>
11
          <div class="attribute-value">{{ value }}</div>
12
        </div>
13
      </div>
14
      <div v-else class="no-attributes">该要素无业务属性</div>
15
    </div>
16
  </div>
17
</template>
18

19
<script setup>
20
import { ref } from 'vue'
21

22
const showPopup = ref(false)
23
const attrs = ref({})
24

25
const handleClose = () => {
26
  showPopup.value = false
27
}
28

29
const showFeaturePopup = (feature) => {
30
  if (!feature) return
31

32
  const properties = feature.getProperties()
33
  const filtered = {}
34

35
  for (const [key, value] of Object.entries(properties)) {
36
    if (key !== 'geometry' && !key.startsWith('_')) {
37
      filtered[key] = typeof value === 'object' ? JSON.stringify(value, null, 2) : value
38
    }
39
  }
40

41
  attrs.value = filtered
42
  showPopup.value = true
43
}
44

45
defineExpose({ showFeaturePopup })
46
</script>

1
<template>
2
  <div id="ol-map-container" class="map-container">
3
    <FeatureInfoPopup ref="featurePopup" />
4
  </div>
5
</template>
6

7
<script setup>
8
import { onMounted, ref } from 'vue'
9
import Map from 'ol/Map'
10
import View from 'ol/View'
11
import { fromLonLat } from 'ol/proj'
12
import { createTdtVecLayer, createTdtVecAnnoLayer } from '@/utils/baseLayerSources'
13
import { wfsApi } from '@/api/ogc/wfs'
14
import { useLayerStore } from '@/stores/layerStore'
15
import { useOlMap } from '@/composables/useOlMap'
16
import FeatureInfoPopup from '@/components/FeatureInfoPopup.vue'
17

18
let mapInstance = null
19
const layerStore = useLayerStore()
20
const featurePopup = ref(null) // 弹窗组件引用
21
const { addBusinessLayers, setupWatchers, addSelectInteraction } = useOlMap()
22

23
onMounted(async () => {
24
  initMap()
25
  setupWatchers()
26

27
  // 确保弹窗组件已挂载后再初始化选择交互
28
  await nextTick()
29
  addSelectInteraction(mapInstance, featurePopup)
30

31
  await loadAllLayers()
32
})
33

34
function initMap() {
35
  mapInstance = new Map({
36
    target: 'ol-map-container',
37
    layers: [createTdtVecLayer(), createTdtVecAnnoLayer()],
38
    view: new View({
39
      center: fromLonLat([116.4, 39.9]),
40
      zoom: 10,
41
    }),
42
  })
43
  addBusinessLayers(mapInstance)
44
}
45

46
async function loadAllLayers() {
47
  try {
48
    const [pointData, lineData, polygonData] = await Promise.all([
49
      wfsApi.getFeatures('ogcforge:point'),
50
      wfsApi.getFeatures('ogcforge:string'),
51
      wfsApi.getFeatures('ogcforge:polygon'),
52
    ])
53
    layerStore.setPoint(pointData)
54
    layerStore.setLine(lineData)
55
    layerStore.setPolygon(polygonData)
56
    console.log('[OgcLab] 图层加载完成')
57
  } catch (err) {
58
    console.error('[OgcLab] WFS 加载失败', err)
59
  }
60
}
61
</script>
62

63
<style scoped>
64
.map-container {
65
  width: 100%;
66
  height: 100vh;
67
}
68
</style>

1
// 在 addSelectInteraction 函数里面
2
select.on("select", (event) => {
3
  const selectedFeatures = event.selected;
4
  // 注意这里：换成了 openDialog，并且加了安全判断
5
  if (selectedFeatures.length > 0 && featurePopup?.value?.openDialog) {
6
    const feature = selectedFeatures[0];
7
    featurePopup.value.openDialog(feature); // 👈 改这里！
8
  }
9
});