天地图图层切换显示

最新推荐文章于 2024-04-16 11:53:29 发布

Lemon今天学习了吗

最新推荐文章于 2024-04-16 11:53:29 发布

阅读量1.1k

点赞数 1

分类专栏： vue 天地图文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_47978760/article/details/126391226

版权

vue 同时被 2 个专栏收录

49 篇文章 1 订阅

订阅专栏

天地图

1 篇文章 0 订阅

订阅专栏

效果图：点击右下角小图层切换图层

天地图参考文档：天地图API

可以切换上面五种视图，这里只用其中两种来模拟效果。

<template>
    <view class="map-view-wap">
        <!-- 地图显示容器 -->
        <zz-map-view class="map-box" ref="mapBox" />
        <!-- 右下角的小图层 -->
        <view class="map-mode" @click="changeMapMode()">
            <!-- 普通街道视图 -->
            <image class="map-mode-img" :class="!mapMode ? 'vector' : ''" src="http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png" mode=""></image>
            <!-- 卫星视图 -->
            <image class="map-mode-img satellite" src="http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png" mode=""></image>
        </view>
    </view>
</template>


 data() {
     return {
         mapMode: true, //默认地图为普通街道视图
     };
 }


// 点击切换图层
changeMapMode() {
    this.mapMode = !this.mapMode; //点击切换
    const mapBox = this.$refs.mapBox;
    const mapTypes = [window.TMAP_NORMAL_MAP, window.TMAP_HYBRID_MAP];
    // 设置地图类型
    if (this.mapMode) {
        mapBox.map.setMapType(mapTypes[0]);
    } else {
        mapBox.map.setMapType(mapTypes[1]);
    }
},


.map-view-wap {
    padding: 0 24rpx 20rpx 24rpx;
    position: relative;
    .map-box {
        height: 464rpx;
        border: 2rpx solid #D5D5D5;
        background: #D5D5D5;
    }
    .map-mode {
        width: 60rpx;
        height: 60rpx;
        position: absolute;
        bottom: 44rpx;
        right: 46rpx;
        z-index: 400;
        .map-mode-img {
            width: 100%;
            height: 100%;
        }
        // 设置层叠效果
        .satellite {
            position: relative;
            bottom: 60rpx;
            left: 10rpx;
        }
        // 控制是否是普通视图的小图层在上面
        .vector {
            z-index: 401;
        }
    }
}