高德地圖-區域遮掩2D版

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

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

剛開始的時候研究了半天高德地圖的的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
    })