地圖元件上的自定義區域疊加層顯示 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);

官網itzixi.com

微信公衆号：BeJavaGod

新浪微網誌

知乎

簡書

cnblogs

今日頭條

豆瓣

--> 同步更新