- A+
所属分类：Web前端
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助
介绍
今天介绍一个非常简单的入门级小案例，就是地图的卷帘效果实现，各大地图引擎供应商都有相关示例，很奇怪高德居然没有，我看了下文档发现其实也是可以简单实现的，演示代码放到文末。本文用到了图层掩模，即图层遮罩，让图层只在指定范围内显示。
实现思路
1.创建目标图层，这里除了有一个默认的底图，还增加了卫星影像图和路网图层，后两者是可以被掩模的。因此在创建图层时通过设置rejectMapMask（默认值false）让图层是否允许被掩模。
2.提供实时设置掩模的方法renderMask，核心代码只需要map.setMask(mask)。
3.实现拖拽交互逻辑，监听拖拽过程，实时触发 renderMask。
实现代码
1.创建目标图层
// 基础底图 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.提供实时设置掩模的方法
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.实现拖拽交互逻辑
// 拖拽交互 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.启动相关方法，完善交互逻辑
initDrag() renderMask() map.on('mapmove', renderMask) map.on('zoomchange', renderMask) window.addEventListener('resize', renderMask)
相关链接
本文代码演示 jsfiddle.net/gyratesky/z… maptalks 图层卷帘效果 maptalks.org/examples/cn… 卫星+区域掩模 lbs.amap.com/demo/javasc…
本文转载于:
https://juejin.cn/post/7248618596976083000
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
