Vue3+Vite 初始化OpenLayer

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