地圖組件上的自定義區域疊加層顯示 ArcGis + GeoJson

最近參與了一個IOT環境項目，需要對某個城市的某幾個區域做環境監控與治理，其中就用到了地圖疊加層的功能，粗看很復雜，其實很簡單，先來看一下效果，然后再來講一下如何實現的：

中間的黃色輪廓線包括的幾塊區域就是通過gis坐標和百度的疊加層來實現的，來簡單說一下實現的步驟吧：

首先需要有每塊區域的坐標集合，這個主要是由工程隊施工人員，在當地采集坐標，采集后會生成相應的文件給到開發人員

這些文件主要為如下：

其中這個紅框內的文件是我們最需要的文件，他是一個shp文件，輪廓文件，開發人員需要轉換為一個jsonlist，才可以使用，

那么如何轉換呢，首先，要有個知識點需要說明，就是工程隊測量的坐標系，可能並不是我們真正要使用的經緯度，因為不同坐標系的規范導致地圖坐標顯示不正確，所以需要轉換坐標系為國標（也就是1984）

這時需要下載並且安裝 ArcGis 這個軟件，專門用於處理地圖的，安裝完畢后，如下，然后打開紅框中的ArcMap

 

參考如下圖，按照層級打開ArcToolBox，這時一個工具箱，里面有坐標系的轉換工具

首先使用“Define Projecttion” ，用於定義一個工程，其實就相當於是eclipse中的一個工程，然后又相關的操作都根據這個工程來就行

 如上圖，選擇一個shp文件，然后就會自動生成他自己的坐標系，導入后，默認識別

 

導入后的效果如下

 

這個時候我們可以進行轉換一下，雙擊project

第一欄選擇剛剛導入的porject，然后選擇一個輸出的目錄，最后就是你想要轉換的坐標系，完了之后，點擊OK生成 

 最后到輸出的目錄去看一下，文件都在里面

此時，我們只需要把shp文件在轉換為程序可識別的文件即可，那么對於程序來講，可以識別的就是json，所以，我們來轉換一下，先打開 http://mapshaper.org/ 這個網站，這是專門用於轉換坐標的。

 

首先選擇一個shp文件，就是我們剛剛生成的，，導入后入下圖：

選擇右上角的 export 導出，選擇geojson即可，然后下載到本地，再導入到自己的工程中去使用

選擇右上角的 export 導出，選擇geojson即可，然后下載到本地，再導入到自己的工程中去使用，看一下這個json文件吧：

其實就是一個json對象里包含了坐標的json數組

接下來的工作就是通過js來渲染圖層了

最終效果獲取了某個地區進行了渲染如下：

 

這僅僅只是截取了某個array進行的展示，如果顯示全部，還需對json進行循環，這邊就省略了，代碼參考如下，其中包含了一些百度地圖的相關api：

var china = new BMap.Polygon([], {
                strokeColor : "orange",
                strokeWeight : 2,
                strokeOpacity : 0.5,
                fillOpacity: 0.1,
                strokeStyle: "solid",
                fillColor: "red"
            }); //創建多邊形
            $.ajax({
                url: "${ctx}/resources/module/script/dashboard/china.json",
                type: 'GET',
                async: true
            }).done(function (res) {
                var pointArray = res.geometries[0].coordinates[0];
                var convertor = new BMap.Convertor();
                var realPointArray = [];
                for (var i = 0 ; i < pointArray.length ; i ++) {
                    var obj = pointArray[i];
                    var mapPoint = new BMap.Point(obj[0], obj[1])
                     var pointArr = [];
                     pointArr.push(mapPoint);
                    realPointArray.push(mapPoint);
                }
                china.setPath(realPointArray);
            })
            map.addOverlay(china);