记录--在高德地图实现卷帘效果

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

介绍

今天介绍一个非常简单的入门级小案例，就是地图的卷帘效果实现，各大地图引擎供应商都有相关示例，很奇怪高德居然没有，我看了下文档发现其实也是可以简单实现的，演示代码放到文末。本文用到了图层掩模，即图层遮罩，让图层只在指定范围内显示。

实现思路

1.创建目标图层，这里除了有一个默认的底图，还增加了卫星影像图和路网图层，后两者是可以被掩模的。因此在创建图层时通过设置rejectMapMask（默认值false）让图层是否允许被掩模。

2.提供实时设置掩模的方法renderMask，核心代码只需要map.setMask(mask)。

3.实现拖拽交互逻辑，监听拖拽过程，实时触发 renderMask。

实现代码

1.创建目标图层

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

// 基础底图   const baseLayer = new AMap.TileLayer({       zIndex: 1,       //拒绝被掩模       rejectMapMask: true,      })      map = new AMap.Map('container', {       center:[116.472804,39.995725],                  viewMode:'3D',       labelzIndex:130,       zoom: 5,       cursor:'pointer',       layers:[           // 底图，不掩模           baseLayer,           // 路网图层           new AMap.TileLayer.RoadNet({               zIndex:7           }),           // 卫星影像图层           new AMap.TileLayer.Satellite()       ]   });

2.提供实时设置掩模的方法

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

function renderMask(){     // 当前地图范围     const {northEast, southWest} = map.getBounds()     // 地理横向跨度     const width = northEast.lng - southWest.lng     // 拖拽条位置占比例     const dom = document.querySelector('#dragBar')     const ratio = Math.ceil(parseInt(dom.style.left) + 5) / map.getSize().width       let mask = [[         [northEast.lng, northEast.lat],         [southWest.lng+ width * ratio, northEast.lat],         [southWest.lng+ width * ratio, southWest.lat],         [northEast.lng, southWest.lat]     ]]           map.setMask(mask) }

3.实现拖拽交互逻辑

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

// 拖拽交互 function initDrag(){           const dom = document.querySelector('#dragBar')     dom.style.left = `${map.getSize().width/2}px`       // const position = {x:0, y:0}            interact('#dragBar').draggable({         listeners: {             start (event) {                                    // console.log(event.type, event.target)             },             move (event) {                      // 改变拖拽条位置                              const left = parseFloat(dom.style.left)                 const targetLeft = Math.min(Math.max(left + event.dx, 0), map.getSize().width - 10)                 dom.style.left = `${targetLeft}px`                                      if(event.dx !== 0){                     renderMask()                     //必须！强制地图重新渲染                     map.render()                 }                                                               },             end(event){                   // console.log(event.type, event.target)                                                                  }         }     }) }

4.启动相关方法，完善交互逻辑

?

1 2 3 4 5

initDrag() renderMask() map.on('mapmove', renderMask) map.on('zoomchange', renderMask) window.addEventListener('resize', renderMask)

相关链接

?

1 2 3 4 5 6 7 8 9 10 11

本文代码演示   jsfiddle.net/gyratesky/z…   maptalks 图层卷帘效果   maptalks.org/examples/cn…   卫星+区域掩模   lbs.amap.com/demo/javasc…

本文转载于:

https://juejin.cn/post/7248618596976083000

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。