openlayers6【十二】vue 切片图层 TileLayer 切换地图底图，图层叠加效果

最新推荐文章于 2025-09-11 09:32:04 发布

原创

最新推荐文章于 2025-09-11 09:32:04 发布 · 9.9k 阅读

33 ·

CC 4.0 BY-SA版权

文章标签：

#vue #openlayers #TileLayer #addLayer #removeLayer

本文介绍如何使用OpenLayers在地图上添加和删除图层，包括天地图影像图层和影像注记图层的动态加载与切换。通过Vue组件实现图层的控制，并展示了具体的HTML、JS和CSS代码。

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