map 参数
controls 地图的控件
pixelRatio 设备上物理像素与设备无关像素（dip）之间的比率。
interactions 地图的互动
keyboardEventTarget 监听键盘事件的元素。这决定了KeyboardPan和 KeyboardZoom互动的触发时间。例如，如果将此选项设置为 document键盘，则交互将始终触发。如果未指定此选项，则库在其上侦听键盘事件的元素是地图目标（即用户为地图提供的div）。如果不是 document，则需要集中目标元素以发射关键事件，这要求目标元素具有tabindex属性。
layers 图层
maxTilesLoading 同时加载的最大瓦片数。
overlays 叠加层最初添加到地图中。默认情况下，不添加任何覆盖。
target 地图的容器
view 地图的视图
效果图
代码
<template>
<div class="container">
<h3>加载OpenStreetMap地图</h3>
<p>超爷openlayer</p>
<div id="vue-openlayers"></div>
<a href="https://xiehao.blog.csdn.net/article/details/105272407">
详情地址
</a>
</div>
</template>
<script setup>
import {
ref, onMounted } from "vue";
import "ol/ol.css";
import {
Map, View } from "ol";
import {
Tile as TileLayer } from "ol/layer";
import {
OSM } from "ol/source";
const map = ref(null);
const initMap = () => {
let osmLayer = new TileLayer({
source: new OSM(),
zIndex: 1,
});
map.value = new Map({
target: "vue-openlayers", //跟页面元素的 id 绑定来进行渲染
layers: [osmLayer],
view: new View({
//配置地图显示的options配置（坐标系，中心点，缩放级别等）
projection: "EPSG:4326",
center: [116.389, 39.903], //地图中心坐标
zoom: 8, //缩放级别
}),
});
};
onMounted(() => {
initMap();
});
</script>
<style scoped>
.container {
width: 840px;
height: 570px;
margin: 50px auto;
border: 1px solid #42b983;
}
#vue-openlayers {
width: 800px;
height: 450px;
margin: 0 auto;
border: 1px solid #42b983;
position: relative;
}
</style>
分析
1 首先页面需要先创建一个 div，用来绑定 map 地图上
<div id="vue-openlayers"></div>
2 下面是一个初始化地图的方法
const initMap = () => {
let osmLayer = new TileLayer({
source: new OSM(),
zIndex: 1,
});
map.value = new Map({
target: "vue-openlayers", //跟页面元素的 id 绑定来进行渲染
layers: [osmLayer],
view: new View({
//配置地图显示的options配置（坐标系，中心点，缩放级别等）
projection: "EPSG:4326",
center: [116.389, 39.903], //地图中心坐标
zoom: 8, //缩放级别
}),
});
};
前面的声明了三个变量分别是 容器（target），图层（layers），view（视图）。
通过实例化了一个OpenLayers的Map对象，于是就显示了地图！Map是什么
它是OpenLayers中最主要的对象！要初始化一幅地图，需要一个target，view，layers。
- target 主要是用来跟页面的元素进行绑定显示
- layers 我们看到，他其实是一个数组形式，那就说明它可以存在多个图层，这也是openlayers强大之处，非常实用。通过new Tile() 创建了一个图层，但是单单创建图层也是不行，图层里面必须要有数据，于是就有了 source: new OSM() 创建了一个OpenStreetMap提供的切片数据
- 同理，通过new View() 创建了一个视图对象
- center 设置默认地图中心点位置
- zoom 设置缩放等级
