在高德地图实现卷帘效果
介绍
今天介绍一个非常简单的入门级小案例，就是地图的卷帘效果实现，各大地图引擎供应商都有相关示例，很奇怪高德居然没有，我看了下文档发现其实也是可以简单实现的，演示代码放到文末。本文用到了图层掩模，即图层遮罩，让图层只在指定范围内显示。
实现思路
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)
}
}
})
}
- 启动相关方法，完善交互逻辑
initDrag()
renderMask()
map.on('mapmove', renderMask)
map.on('zoomchange', renderMask)
window.addEventListener('resize', renderMask)
相关链接
本文代码演示
maptalks 图层卷帘效果
卫星+区域掩模
avasc…
