openlayers 入门（6）切换地图容器

最新推荐文章于 2024-08-13 08:54:47 发布

气的想吐泡泡

最新推荐文章于 2024-08-13 08:54:47 发布

阅读量142

点赞数

分类专栏： openlayers 文章标签：前端框架

本文链接：https://blog.csdn.net/qq_53079432/article/details/133858280

版权

openlayers 专栏收录该内容

32 篇文章 3 订阅

订阅专栏

<template>
    <div class="vm">
        <h2 class="h-title">切换地图容器 getTarget/setTarget</h2>
        <div class="map-bx">
            <div id="map1" class="map-x"></div>
            <div id="map2" class="map-x"></div>
        </div>
        <button class="btn" @click="changeMap">change</button>

        <div class="explain">
            <p>getTarget：获取当前地图容器id值</p>
            <p>setTarget：设置地图容器，填写id值</p>
        </div>
    </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import XYZ from "ol/source/XYZ.js";
import Tile from "ol/layer/Tile";
export default {
    name: "ChangeTarget",
    data() {
        return {
            map: null,
        };
    },
    methods: {
        initMap() {
            this.map = new Map({
                layers: [
                    // 图层
                    new Tile({
                        source: new XYZ({
                            url:
                                "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
                            wrapX: false,
                        }),
                    }),
                ],
                view: new View({
                    // projection: "EPSG:4326",
                    center: [113.100774, 29.386975],
                    zoom: 4,
                }),
            });
            this.map.setTarget("map1");
        },

        // 切换容器
        changeMap() {
            // 获取当前地图容器，并进行判断
            let target = this.map.getTarget() === "map1" ? "map2" : "map1";

            // 重新设置地图容器
            this.map.setTarget(target);
        },
    },
    mounted() {
        this.initMap();
    },
};
</script>

<style lang="scss" scoped>
.map-bx {
    width: 800px;
    height: 380px;
    margin: 0 auto 40px;
    display: flex;
}

.map-x {
    width: 380px;
    height: 380px;
}

.btn {
    display: block;
    margin: 0 auto;
}
</style>