vue openlayers【十二】切片圖層 TileLayer 切換地圖底圖，圖層疊加效果

1. 效果圖

通過 addLayer 添加圖層，通過removeLayer 刪除圖層

2. html（創建 checkbox 用來切換圖層）

<template>
    <div id="content">
        <div id="map" ref="map"></div>
        <div id="mouse-position">
            <el-checkbox-group v-model="checkList">
                <el-checkbox label="天地圖影像圖" @change="changImage"></el-checkbox>
                <el-checkbox label="天地圖影像標註" @change="changText"></el-checkbox>
            </el-checkbox-group>
        </div>
    </div>
</template>

3. js (通過map.addLayer，map.addLayer實現)

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import XYZ from "ol/source/XYZ";
import { fromLonLat } from "ol/proj";

export default {
    name: "tree",
    data() {
        return {
            map: null,
            checkList: []
        };
    },
    methods: {
        // 初始化一個 openlayers 地圖
        initMap() {
            let target = "map";
            let tileLayer = [
                new TileLayer({
                    source: new XYZ({
                        url:
                            "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}"
                    })
                })
            ];
            let view = new View({
                center: fromLonLat([104.912777, 34.730746]),
                zoom: 4.5
            });
            this.map = new Map({
                target: target, 
                layers: tileLayer,
                view: view 
            });
        },
        // 天地圖影像圖層
        changImage: function(checked, e) {
            if (checked) {
                this.TiandiMap_img = new TileLayer({
                    name: "天地圖影像圖層",
                    source: new XYZ({
                        url:
                            "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=5d27dc75ca0c3bdf34f657ffe1e9881d", //parent.TiandituKey()爲天地圖密鑰
                        wrapX: false
                    })
                });
                // 添加到地圖上
                this.map.addLayer(this.TiandiMap_img);
            } else {
                this.map.removeLayer(this.TiandiMap_img);
            }
        },
        // 天地圖影像註記圖層
        changText: function(checked, e) {
            if (checked) {
                this.TiandiMap_cia = new TileLayer({
                    name: "天地圖影像註記圖層",
                    source: new XYZ({
                        url:
                            "http://t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=5d27dc75ca0c3bdf34f657ffe1e9881d", //parent.TiandituKey()爲天地圖密鑰
                        wrapX: false
                    })
                });
                // 添加到地圖上
                this.map.addLayer(this.TiandiMap_cia);
            } else {
                this.map.removeLayer(this.TiandiMap_cia);
            }
        }
    },
    mounted() {
        this.initMap();
    }
};

4. css

<style lang="scss" scoped>
html,
body {
    height: 100%;
    #content {
        width: 100%;
        position: relative;
        #mouse-position {
            float: left;
            position: absolute;
            top: 75px;
            right: 10px;
            width: 200px;
            height: 50px;
            padding: 10px;
            background-color: rgba(0, 0, 0, 0.6);
            /*在地圖容器中的層，要設置z-index的值讓其顯示在地圖上層*/
            z-index: 2000;
            color: white;
            .el-checkbox {
                color: white;
            }
            /* 鼠標位置信息自定義樣式設置 */
            .custom-mouse-position {
                color: rgb(0, 0, 0);
                font-size: 16px;
                font-family: "微軟雅黑";
            }
        }
    }
}
</style>