最近遇到一個新的需求需用用到高德地圖

公司需要只顯示固定區域范圍的地圖,其余地方的地圖都用透明遮罩覆蓋
完成后如下圖所示:
地圖體驗網址

剛開始的時候研究了半天高德地圖的的JS API中只有一個區域遮掩符合條件
但是區域遮掩這個代碼有一個很重要的前提是必須使用3D地圖，
如果不使用3D地圖還是全部顯示，只是在周圍描一圈的邊
然后就卡在這里很久

苦苦查詢了很久突然在 這里設定樓塊樣式發現了能夠通過坐標點繪制一圈填充內部，既然如此我就在想能否和區域遮掩結合一下把外部的顏色填充一下就可以實現只顯示固定范圍的效果

話不多說準備開寫，在自定義范圍的時候遇到一個很麻煩的事情就是如果你要繪制一個區域，就得把這個區域邊界的點形成一個圍欄，一個點一個點的去獲取的話有時候還不知道獲取到哪里了，于是我動手先寫了一個繪制邊界獲取坐標的demo
網址如下:繪制坐標點獲取

首先如果不在你要的區域范圍內的話可以在右上角搜索定位到你要的地址
然后點擊繪制線段

這里利用鼠標左鍵繪制形成一個封閉的區域，完成后點擊鼠標右鍵會提示繪制完成

提示完成后點擊下方獲取全部坐標點，此時所有坐標點的位置就已經復制進粘貼板了直接找個記事本
Ctrl+V就可以得到坐標點的數組了
如果粘貼沒有效果的話可以在網站f12看下控制臺控制臺里也會輸出所有坐標點

獲得到坐標點集合后我們就可以開始代碼的編寫了

var options = {areas:[{ //圍欄1//visible:false,//是否可見rejectTexture:true,//是否屏蔽自定義地圖的紋理path: [[[116.316092,39.992203],[116.314933,39.999798],[116.31519,40.004598],[116.31562,40.005255],[116.316414,40.00583],[116.318216,40.006258],[116.318967,40.006652],[116.318946,40.008214],[116.3185,40.012725],[116.326804,40.013267],[116.328349,40.013251],[116.328972,40.013152],[116.330903,40.013218],[116.331632,40.012955],[116.335688,40.009356],[116.336675,40.007729],[116.336932,40.00689],[116.336954,40.006841],[116.337126,40.001368],[116.337705,39.992869],[116.325367,39.992409]]]}]};

首先把坐標點放進數組里

因為我們的的坐標點直接拿去繪制的話會填充內部所以我們需要結合3D區域遮掩的代碼，將內部區域改為外部區域的反選

var outer = [new AMap.LngLat(-360,90,true),new AMap.LngLat(-360,-90,true),new AMap.LngLat(360,-90,true),new AMap.LngLat(360,90,true),];var pathArray = [outer];pathArray.push.apply(pathArray,options.areas[0].path)

最后只需一句高德地圖的繪制方法就能將外部區域遮罩顯示出來達到2D區域遮掩的效果

new AMap.Polygon({bubble:true,fillOpacity:0.6,strokeWeight:2,strokeColor: '#00eeff',fillColor: '#71B3ff',path:pathArray,map:map})

下載地址

總結

以上是生活随笔為你收集整理的高德地图-2D地图下区域遮掩(只显示固定区域里的内容)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。