<template> <div class="map__container"> <!-- 地图容器 1 --> <div id="map1" class="map__x"></div> <!-- 地图容器 2 --> <div id="map2" class="map__x"></div> </div>
<!-- 切换地图容器按钮 --> <button class="btn" @click="changeMap">change</button></template>
<script setup>import { ref, onMounted } from 'vue'import { Map, View } from 'ol'import Tile from 'ol/layer/Tile'import OSM from 'ol/source/OSM' // 注意：【OSM不能在实际开发中使用，因为OSM里中国地图的边界有点问题！！！！】import 'ol/ol.css'
const map = ref(null) // 绑定地图实例的变量
// 初始化地图并渲染function initMap () { // 地图实例 map.value = new Map({ layers: [ // 图层 new Tile({ source: new OSM() // 图层数据源 }) ], view: new View({ // 地图视图 projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857 center: [114.064839, 22.548857], // 深圳坐标 minZoom:10, // 地图缩放最小级别 zoom: 12 // 地图缩放级别（打开页面时默认级别） }) })
map.value.setTarget('map1') // 使用 setTarget 绑定地图容器}
// 切换容器事件function changeMap() { // 获取当前地图容器，并进行判断 let target = map.value.getTarget() === 'map1' ? 'map2' : 'map1' // 重新设置地图容器 map.value.setTarget(target)}
onMounted(() => { // 在元素加载完之后再执行地图初始化 initMap()})</script>
<style lang="scss" scoped>.map__container { width: 800px; height: 380px; margin-bottom: 40px; display: flex; justify-content: space-between;
.map__x { width: 380px; height: 380px; box-sizing: border-box; border: 1px solid #ccc; }}</style>
评论