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

標籤：cti   技術   obj   arc   done   自己   包含   eoj   輪廓線   

最近參與了一個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);

 

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