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);}
}