vue3中加载openlayer

vue2加载openlayer参考：使用openlayers加载OSM街道图，谷歌影像图以及天地图地形图_asdfsdgfsdgfa的博客-CSDN博客_layer.open一，安装olcnpm i ol -S二，在components文件夹下面新建olmap.vue<template> <div id="map"></div></template><script>import 'ol/ol.css'import {Map,View} from 'ol'import Til...https://blog.csdn.net/qq_40323256/article/details/102318366

 

下载ol

npm i ol -S

 

<!--test-->
<template>
    <div style="height: 100vh;width: 100vw;" id="map"></div>
</template>

<script setup>
import 'ol/ol.css'
import { Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile'
import OSM from 'ol/source/OSM'

onMounted(() => {
    new Map({
        target: "map",
        layers: [
            new TileLayer({
                source: new OSM()
            })
        ],
        view: new View({
            projection: "EPSG:4326",    //使用这个坐标系
            center: [104.704968, 31.540962],  //西南科技大学
            zoom: 15
        })
    });
})
</script>