這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

介紹

今天介紹一個非常簡單的入門級小案例，就是地圖的捲簾效果實現，各大地圖引擎供應商都有相關示例，很奇怪高德居然沒有，我看了下文檔發現其實也是可以簡單實現的，演示代碼放到文末。本文用到了圖層掩模，即圖層遮罩，讓圖層只在指定範圍內顯示。

實現思路

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

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。