vue3引入openlayers

安装ol包

OpenLayers作为 ol npm包提供，它提供了官方支持的API的所有模块。
官方地址：ol

npm install ol

模块和子模块约定

具有CamelCase名称的OpenLayers模块提供类作为默认导出，并且可能包含其他常量或函数作为命名导出：

import Map from 'ol/Map.js';
import View from 'ol/View.js';

为了方便起见，这些也可以作为命名导出，例如：

import {Map, View} from 'ol';
import {Tile, Vector} from 'ol/layer.js';

除了这些重新导出的类之外，具有命名空间名称的模块还提供常量或函数作为命名导出：

import {getUid} from 'ol';
import {fromLonLat} from 'ol/proj.js';

示例

<template><div id="map" style="width: 100%; height: 400px;"></div>
</template><script setup lang="ts">
import { onMounted } from 'vue';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';onMounted(() => {const map = new Map({target: "map",layers: [new TileLayer({source: new OSM()})],view: new View({center: [0, 0],zoom: 2})});map
});
</script>