openlayers [二] 初始化map 以及map的一些参数

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 设置缩放等级