高德地图显示影藏交通图层

效果如图：

核心代码：

this.traffic = new AMap.TileLayer.Traffic({
     autoRefresh: true,     //是否自动刷新，默认为false
     interval: 180,         //刷新间隔，默认180s
     zIndex: 10,
     zooms: [7, 22],
});

 this.map.add(this.traffic); //通过add方法添加图层

完整代码：

<template>
    <div style="position: relative;">
        <div style="position: absolute; right: 10px; top: 10px; z-index: 1;">
            <el-button @click="isShowTraffic">显示/影藏交通</el-button>
        </div>
        <div id="amapcontainer" style="width: 100%; height: 880px"></div>
    </div>
</template>
  
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
window._AMapSecurityConfig = {
    securityJsCode: '' // '「申请的安全密钥」',
}
export default {
    data() {
        return {
            map: null, // 高德地图实例
            traffic: null, // 交通图层
            isVisible: true, // 控制是否显示交通图层
        }
    },
    methods: {
        // 地图初始化
        initAMap() {
            AMapLoader.load({
                key: "", // 申请好的Web端开发者Key，首次调用 load 时必填
                version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", 'AMap.Geocoder', 'AMap.Marker',
                    'AMap.CitySearch', 'AMap.Geolocation', 'AMap.AutoComplete', 'AMap.InfoWindow'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap) => {
                // 获取到作为地图容器的DOM元素，创建地图实例
                this.map = new AMap.Map("amapcontainer", { //设置地图容器id
                    resizeEnable: true,
                    viewMode: "3D", // 使用3D视图
                    zoomEnable: true, // 地图是否可缩放，默认值为true
                    dragEnable: true, // 地图是否可通过鼠标拖拽平移，默认为true
                    doubleClickZoom: true, // 地图是否可通过双击鼠标放大地图，默认为true
                    zoom: 12, //初始化地图级别
                    center: [108.939645, 34.343207], // 初始化中心点坐标 西安
                    // mapStyle: "amap://styles/darkblue", // 设置颜色底层
                })
                this.traffic = new AMap.TileLayer.Traffic({
                    autoRefresh: true,     //是否自动刷新，默认为false
                    interval: 180,         //刷新间隔，默认180s
                    zIndex: 10,
                    zooms: [7, 22],
                });

                this.map.add(this.traffic); //通过add方法添加图层
                // this.map.addControl(new AMap.Scale()) 
                // this.map.addControl(new AMap.ToolBar()) 
            }).catch(e => {
                console.log(e)
            })
        },
        // 是否显示交通图层
        isShowTraffic() {
            if (this.isVisible) {
                this.traffic.hide(); // 影藏交通
                this.isVisible = false;
            } else {
                this.traffic.show(); // 显示交通
                this.isVisible = true;
            }
        }
    },
    mounted() {
        //DOM初始化完成进行地图初始化
        this.initAMap()
    }
}
</script>
  
<style lang="less"></style>