安装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>