這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
介紹
今天介紹一個非常簡單的入門級小案例，就是地圖的卷簾效果實作，各大地圖引擎供應商都有相關示例，很奇怪高德居然沒有，我看了下檔案發現其實也是可以簡單實作的，演示代碼放到文末，本文用到了圖層掩模，即圖層遮罩，讓圖層只在指定范圍內顯示，
實作思路
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
如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/556859.html
標籤：其他
下一篇：返回列表