Vue3 + OpenLayers + 天地图 简单集成

1.创建项目

# 创建 Vue3 项目
pnpm create vue@latest tianditu-simple

# 进入项目目录
cd tianditu-simple

# 安装依赖
pnpm install

# 安装 OpenLayers
pnpm add ol 

2.创建地图组件

<!-- src/components/MapContainer.vue -->
<script setup>
import { onMounted } from 'vue'
import 'ol/ol.css'
import Map from 'ol/Map'
import View from 'ol/View'
import TileLayer from 'ol/layer/Tile'
import XYZ from 'ol/source/XYZ'
import { fromLonLat } from 'ol/proj'

let map = null
const tk = '你的天地图API密钥' // 替换为你的密钥

onMounted(() => {
  map = new Map({
    target: 'map',
    layers: [
      // 矢量底图
      new TileLayer({
        source: new XYZ({
          url: `https://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=${tk}`
        })
      }),
      // 矢量注记
      new TileLayer({
        source: new XYZ({
          url: `https://t0.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=${tk}`
        })
      })
    ],
    view: new View({
      center: fromLonLat([105.839626, 32.437977]), // 广元市
      zoom: 12
    })
  })
})
</script>

<template>
  <div id="map"></div>
</template>

<style scoped>
#map {
  width: 100%;
  height: 600px;
  border: 1px solid #ccc;
  border-radius: 8px;
}
</style>

3.首页引入使用

<script setup>
import MapContainer from '@/components/MapContainer.vue'
</script>

<template>
  <div class="home">
    <h1>天地图项目</h1>
    <p>简单集成天地图</p>
    <MapContainer />
  </div>
</template>

<style scoped>
.home {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  color: #333;
}

p {
  text-align: center;
  color: #666;
  margin-bottom: 20px;
}
</style>

4.运行项目

# 启动开发服务器
pnpm dev

5.提示

如果用原生生成的页面，在app.vue使用，需要更改下main.css样式，不然界面中间布局很窄

main.css样式文件

@import './base.css';

/* 重要：删除原先让 body 居中、让 #app 变两列网格的媒体查询 */
/* 全局主题变量 */
:root {
  --brand: #3b82f6;
  --text: #1f2937;
  --muted: #6b7280;
  --bg: #f7fafc;
}

html, body, #app {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 页面容器：宽屏自适应，移动端留出内边距 */
#app {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px;
}

/* 链接与绿色强调色保持 */
a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.2s;
  padding: 2px;
}

@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.12);
  }
}