Vue3+Vite 初始化OpenLayer

安装依赖

yarn add ol

初始化OpenLayer

<template><div id="ol-map"></div>
</template><script lang="ts" setup>
import { onMounted } from 'vue'
import 'ol/ol.css'
import { Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'const initMap = () => {const map = new Map({target: 'ol-map',layers: [new TileLayer({source: new OSM(),}),],view: new View({center: [0, 0], // 中心点zoom: 2,}),})window.viewer = map
}
onMounted(() => {initMap()
})
</script><style lang="scss" scoped>
#ol-map {width: 100%;height: 100%;
}
</style>

初始化OpenLayer

git