水利数字孪生实验三-星语课程网

返回
顶部

修改密码

* 旧密码：

* 新密码：

* 确认新密码：

首页 > 实验作业 > 数字孪生水利平台设计 > 正文

水利数字孪生实验三

2026-06-04 06:26:42

来源：本站编辑

阅读量：

const point = new Feature({const tdLayer = new TileLayer({const vectorSource = new VectorSource()5000/api/station/${id}`)前后端联调——水位站点地图渲染与弹窗查询const data = result.dataconst stationList = result.datavectorLayer = new VectorLayer({ sourcenew Point(fromL

# 实验：前后端联调——水位站点地图渲染与弹窗查询

### 一、实验难度：★★★☆

### 二、实验目的

1\. 掌握Vue前端请求Flask后端接口的方法

2\. 实现后端水位站数据动态渲染到OpenLayers地图

3\. 实现地图点位点击交互、弹窗展示实时水位数据

4\. 完成水利数字孪生简易前后端业务闭环

### 三、实验前置条件

已完成实验1、实验2，确保：数据齐全、后端接口可访问、基础地图可加载

### 四、实验任务

1\. 前端请求后端站点列表接口，批量绘制水位站点点位

2\. 自定义站点图标、文字标注样式

3\. 点击点位请求后端详情接口，弹窗展示水位、时间信息

### 五、完整联调代码

```vue
<template>
  <div class="map-container">
    <div id="map" class="map-box"></div>
    <div id="popup" class="popup">
      <div class="popup-content" v-html="popupHtml"></div>
    </div>
  </div>
</template>

const TDT_TOKEN = "你的天地图TOKEN"
let map = null
let vectorLayer = null
let popupOverlay = null
const popupHtml = ref('')

onMounted(() => {
  initMap()
  loadStationData()
})

// 初始化地图
function initMap() {
  const tdLayer = new TileLayer({
    source: new XYZ({
      url: `http://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${TDT_TOKEN}`
    })
  })

const vectorSource = new VectorSource()
  vectorLayer = new VectorLayer({ source: vectorSource })

const popupDom = document.getElementById('popup')
  popupOverlay = new Overlay({
    element: popupDom,
    positioning: 'bottom-center',
    offset: [0, -12]
  })

map = new Map({
    target: 'map',
    layers: [tdLayer, vectorLayer],
    view: new View({
      center: fromLonLat([113.6, 29.7]),
      zoom: 12
    }),
    overlays: [popupOverlay]
  })

// 点击点位查询详情
  map.on('click', (event) => {
    map.forEachFeatureAtPixel(event.pixel, (feature) => {
      const stationId = feature.get('id')
      queryStationDetail(stationId, event.coordinate)
    })
  })
}

// 加载后端站点数据并渲染点位
async function loadStationData() {
  const res = await fetch('http://127.0.0.1:5000/api/stations')
  const result = await res.json()
  const stationList = result.data
  const source = vectorLayer.getSource()

stationList.forEach(station => {
    const point = new Feature({
      geometry: new Point(fromLonLat([station.lon, station.lat]))
    })
    point.set('id', station.id)
    point.set('name', station.name)

point.setStyle(new Style({
      image: new Icon({
        src: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzMTc3ZjAiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMTIgM0E4IDggMCAwIDEgOCAxM2MwIDQtOCA5IDQgOSA1IDAgMCAxIDQgTDEyIDMuWiIvPjxyZWN0IHdpZHRoPSI0IiBoZWlnaHQ9IjQiIHg9IjEwIiB5PSIxMCIgcng9IjIiLz48L3N2Zz4=',
        scale: 1.2
      }),
      text: new Text({
        text: station.name,
        offsetY: -25,
        font: '12px sans-serif',
        fill: new Fill({ color: '#000' }),
        backgroundFill: new Fill({ color: 'rgba(255,255,255,0.9)' })
      })
    }))
    source.addFeature(point)
  })
}

// 查询单站水位详情
async function queryStationDetail(id, coordinate) {
  const res = await fetch(`http://127.0.0.1:5000/api/station/${id}`)
  const result = await res.json()
  if (result.code === 200) {
    const data = result.data
    popupHtml.value = `
      <div style="padding:4px 0;"><b>${data.name}</b></div>
      <div>实时水位：${data.level} m</div>
      <div>监测时间：${data.time}</div>
    `
    popupOverlay.setPosition(coordinate)
  }
}
</script>

### 六、实验运行流程

1\. 启动Flask后端服务：`python app\.py`

2\. 启动Vue前端项目：`npm run dev`

3\. 查看地图自动加载所有水位站点位

4\. 点击点位，弹窗展示实时水位监测数据

### 七、实验成果

1\. 完整前后端联调代码

2\. 地图站点渲染效果图、点击弹窗数据展示截图

上一篇：水利数字孪生实验一

下一篇：没有了

已有0条评论

0/150

提交

热门评论

查看更多评论

目 录

目录