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

返回
顶部

修改密码

* 旧密码：

* 新密码：

* 确认新密码：

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

水利数字孪生实验一

2026-05-28 06:48:11

来源：本站编辑

阅读量：

并将代码中 `你的天地图tk密钥` 改为自己申请的密钥OpenLayers 加载默认地图// 加载地图控件本项目使用 **OpenLayers** 开源地图框架**地图容器、图层、视图**OpenLayers 加载天地图（重点实验内容）安装完成后即可在代码中使用地图相关能力在项目 CMD 窗口执行安装命令### 基础代码知识点（实验讲解）### 2\. 安装代码编辑器 VS Code### 5\.2 替换代码## 六、添加地图常用控件（缩放、比例尺、鼠标位置）## 二、使用 Vite 创建 V

# Windows \+ Vite \+ Vue3 \+ OpenLayers 地图开发 实验课详细教程
## 实验目的
1. 了解基本的前端技术
2. 了解Gis基本技术
3. 掌握数字孪生水利前端渲染引擎选型

## 实验要求：
1. 参照[实验报告模板](/u/cms/www/202605/28064747qjhh.docx)撰写实验报告，内容填写完整，实验时间填写为上实验课的时间
2. 实验报告以“学号-姓名-水利数字孪生平台设计架构实验一”命名，按时提交到雨课堂**水利数字孪生平台设计架构实验一**

## 一、实验环境准备

### 1\. 安装 Node\.js

1. 访问官网：[https://nodejs\.org/](https://nodejs.org/)，下载 **LTS 长期稳定版**，默认下一步完成安装。

2. 校验：按下 `Win\+R` 输入 `cmd` 打开命令行，执行：

```bash
node -v
npm -v
```

输出版本号即安装成功；若提示不是内部命令，重新安装并勾选**Add to PATH**。

### 2\. 安装代码编辑器 VS Code

官网下载：[https://code\.visualstudio\.com/](https://code.visualstudio.com/)，默认安装，建议勾选添加右键菜单。

### 3\. 前置说明

本项目使用 **OpenLayers** 开源地图框架，结合天地图图层加载，**无需单独申请密钥也可基础运行**，如需完整使用天地图服务，仍需提前申请天地图 Web 密钥（tk）。

---

## 二、使用 Vite 创建 Vue3 项目

1. 打开 CMD，切换到项目存放目录（示例：桌面）

```bash
cd Desktop
```

2. 创建 Vite \+ Vue3 项目

```bash
npm create vite@latest ol-vue-demo -- --template vue
```

3. 进入项目、安装基础依赖

```bash
cd ol-vue-demo
npm install
```

4. 测试项目能否正常启动

```bash
npm run dev
```

浏览器访问 `http://localhost:5173`，看到 Vue 默认页面即为正常，**保持 CMD 窗口运行**。

5. 用 VS Code 打开项目：右键项目文件夹 → 使用 Code 打开。

---

## 三、安装 OpenLayers 依赖

在项目 CMD 窗口执行安装命令，引入 OpenLayers 核心库：

```bash
npm install ol
```

安装完成后即可在代码中使用地图相关能力。

---

## 四、基础功能：OpenLayers 加载默认地图

### 步骤 1：编写地图组件代码

打开 `src/App\.vue`，**清空原有所有代码**，粘贴下方完整代码：

```vue
<template>
  
  <div id="map" style="width: 100%; height: 100vh;"></div>
</template>

onMounted(() => {
  // 初始化地图
  new Map({
    // 绑定页面容器
    target: 'map',
    // 图层：加载开源OSM底图
    layers: [
      new TileLayer({
        source: new OSM()
      })
    ],
    // 地图视图：中心点、缩放级别、投影
    view: new View({
      center: [113.97, 22.58], // 经纬度
      zoom: 12,                // 初始缩放级别
      projection: 'EPSG:4326'  // 地理坐标系（经纬度）
    })
  })
})
</script>

### 步骤 2、运行查看效果

按下 `Ctrl\+S` 保存文件，浏览器页面自动刷新，即可看到地图。

### 基础代码知识点（实验讲解）

1. `import \&\#39;ol/ol\.css\&\#39;`：必须引入 OpenLayers 样式文件，否则控件、地图样式错乱。

2. 地图容器 `div`：**强制设置宽高**，宽高为 0 则地图不显示。

3. `onMounted`：DOM 渲染完成后再初始化地图，避免获取不到容器。

4. `EPSG:4326`：通用经纬度坐标系，符合日常使用习惯。

---

## 五、进阶：OpenLayers 加载天地图（重点实验内容）

### 5\.1 前置准备

前往 [天地图开放平台](https://lbs.tianditu.gov.cn/) 注册账号，创建 **Web 端应用**，域名填写 `\*`，复制你的专属 `tk` 密钥。

### 5\.2 替换代码，加载天地图底图

修改 `src/App\.vue` 代码，**替换下方完整代码**，并将代码中 `你的天地图tk密钥` 改为自己申请的密钥：

```vue
<template>
  <div id="map" style="width: 100%; height: 100vh;"></div>
</template>

// 替换为你自己的天地图 Web 密钥
const TK = '你的天地图tk密钥'

onMounted(() => {
  new Map({
    target: 'map',
    layers: [
      // 天地图 电子地图图层
      new TileLayer({
        source: new XYZ({
          url: `http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${TK}`,
          crossOrigin: 'anonymous'
        })
      }),
      // 天地图 中文注记图层（道路、地名文字）
      new TileLayer({
        source: new XYZ({
          url: `http://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=${TK}`,
          crossOrigin: 'anonymous'
        })
      })
    ],
    view: new View({
      // 经纬度转 Web 墨卡托投影（天地图默认投影）
      center: fromLonLat([116.40, 39.91]), // 北京经纬度
      zoom: 12,
      minZoom: 3,   // 最小缩放级别
      maxZoom: 18   // 最大缩放级别
    })
  })
})
</script>

### 5\.3 图层切换拓展（选做实验）

修改 `url` 地址，可切换不同类型天地图：

1. **卫星影像图**：`T=img\_w`，注记图层改为 `T=cia\_w`

2. **地形地图**：`T=ter\_w`，注记图层改为 `T=cta\_w`

示例（卫星地图）：

```js
// 卫星底图
url: `http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=${TK}`
// 卫星注记
url: `http://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=${TK}`
```

---

## 六、添加地图常用控件（缩放、比例尺、鼠标位置）

在上述天地图代码基础上，增加官方控件，完整代码如下：

```vue
<template>
  <div id="map" style="width: 100%; height: 100vh;"></div>
</template>

const TK = '你的天地图tk密钥'

onMounted(() => {
  new Map({
    target: 'map',
    layers: [
      new TileLayer({
        source: new XYZ({
          url: `http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=${TK}`,
          crossOrigin: 'anonymous'
        })
      }),
      new TileLayer({
        source: new XYZ({
          url: `http://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=${TK}`,
          crossOrigin: 'anonymous'
        })
      })
    ],
    view: new View({
      center: fromLonLat([116.40, 39.91]),
      zoom: 12,
      minZoom: 3,
      maxZoom: 18
    }),
    // 加载地图控件
    controls: [
      new Zoom(),        // 缩放控件
      new ScaleLine(),   // 比例尺
      new MousePosition()// 鼠标经纬度显示
    ]
  })
})
</script>

---

## 七、实验常见问题与解决方案

### 问题 1：页面空白，地图不显示

1. 地图容器未设置宽高 → 给 `div` 明确 `width`、`height`。

2. 忘记引入 `import \&\#39;ol/ol\.css\&\#39;` → 补充样式引入。

### 问题 2：天地图加载失败 / 碎片图、红叉

1. `tk` 密钥错误、类型不符 → 检查为**Web 端密钥**，核对字符。

2. 网络 / 防火墙拦截 → 切换网络、关闭代理。

3. 域名未配置 → 密钥后台域名白名单填写 `\*`。

### 问题 3：控制台报跨域错误

代码中已添加 `crossOrigin: \&\#39;anonymous\&\#39;`，若仍报错，优先检查校园网 / 浏览器安全策略。

### 问题 4：命令行提示 `npm 不是内部命令`

Node\.js 未安装或未配置环境变量，重新安装并勾选环境变量选项。

### 问题 5：修改代码页面无变化

手动刷新浏览器，或重启 `npm run dev` 命令。

---

## 八、实验核心知识点总结

1. 项目架构：**Vite \+ Vue3 \+ OpenLayers**，Vite 启动速度快，适合前端实验。

2. OpenLayers 核心三要素：**地图容器、图层、视图**。

3. 地图容器必须显式设置宽高，是地图显示的前提。

4. 天地图采用 `XYZ` 瓦片图层加载，需要官方 `tk` 密钥鉴权。

5. 坐标系：天地图默认使用 Web 墨卡托投影，需用 `fromLonLat` 转换经纬度。

上一篇：实验五

下一篇：没有了

已有0条评论

0/150

提交

热门评论

查看更多评论

目 录

目录