使用openlayers，初始化一个地图，一般使用如下代码：
//HTML代码创建一个div
<div id="map"></div>
var map = new ol.Map({
//地图容器div的ID
target: 'map',
、、、、、
});
但是在vue3项目中，一般是不建议给html标签设置id属性，那么我们在vue3组件中使用openlayers，要如何给target传值呢？
请参考如下代码：
代码有如下关键点：
1、渲染地图div不要设置id属性，使用ref属性，要为div制定宽和高。
2、在script标签中通过mapRef=ref()；mapRef.value获取html对象
3、new Map的options参数的tarfget传值是mapRef.value
4、new Map要写在onMounted钩子函数中，直接写在setup中，mapRef还没有渲染完成，html对象为空。
<template>
<div>
<div ref="mapRef" style="width: 80%; height: 500px;"></div>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import Map from 'ol/Map.js'
import TileLayer from 'ol/layer/Tile.js'
import View from 'ol/View.js'
import WMTS from 'ol/source/WMTS.js'
import WMTSTileGrid from 'ol/tilegrid/WMTS.js'
import { getTopLeft, getWidth } from 'ol/extent.js'
import { get as getProjection } from 'ol/proj.js'
//天地图密钥
const TIANDI_KEY = '3e03f9d1741d4e44a4b0d6632cf5c537'
let mapRef = ref()
let map: Map
// 创建source,图层数据源
const projection = getProjection('EPSG:4326')
const projectionExtent = projection?.getExtent()
const size = getWidth(projectionExtent) / 256
const resolutions = new Array(19)
const matrixIds = new Array(19)
for (let z = 0; z < 19; ++z) {
resolutions[z] = size / Math.pow(2, z)
matrixIds[z] = z
}
const tileGrid = new WMTSTileGrid({
origin: getTopLeft(projectionExtent),
resolutions,
matrixIds
})
const source = new WMTS({
name: '矢量底图',
url: `http://t0.tianditu.gov.cn/img_c/wmts?tk=${TIANDI_KEY}`,
layer: 'mylayer',
matrixSet: 'EPSG:4326',
style: 'default',
format: 'tiles',
wrapX: true,
tileGrid
})
const tdLayer = new TileLayer({
// 使用瓦片渲染方法
source
})
const view = new View({
// 地图视图
projection: 'EPSG:4326', // 坐标系，有EPSG:4326和EPSG:3857
center: [114.064839, 22.548857], // 深圳坐标
minZoom: 10, // 地图缩放最小级别
zoom: 12 // 地图缩放级别（打开页面时默认级别）
})
function initMap(): Map {
return new Map({
layers: [tdLayer],
target: mapRef.value,
view: view,
controls: []
})
}
onMounted(() => {
map = initMap()
})
</script>
<style scoped></style>
