Cesium之3D拉伸顯示行政區

轉自原文 Cesium之3D拉伸顯示行政區含GeoJSON數據生成過程GDAL的ogr2ogr

 

Cesiumjs 是一套javascript庫，用來渲染3D地球，2D區域地圖，和多種GIS要素。不須要安裝任何插件就能在支持最新HTML5標準的瀏覽器上運行。支持WebGL硬件加速，很是適合動態數據在GIS圖層上的展現，是一個跨平臺，開源，很是有前途的webgis表現層庫。Cesium 基於 Apache 開源協議，支持商業和非商業無償使用。

背景：

Cesiumjs源自 Analytical Graphics, Inc. (AGI)公司爲他們客戶開發一個虛擬地球項目，後來將cesium項目貢獻給開源社區並一直活躍開發中。是一種針對Cesium-應用的流式高分辨率服務器）另外一個公司級的貢獻者是NICTA (NationalICT Australia) 澳大利亞最大的信息與通信技術中心，NICTA的員工們貢獻了瓦片地圖服務、地形處理等cesium的核心功能。並一直使用cesium開發環境監測分析、交通基礎設施建模仿真優化等領域的應用。

 

 

Demo需求，想要將北京市行政區劃內的要素，用3D表現出來，首先，須要獲得北京16個區的面座標：

 

Cesium經過GeoJSON（JSON格式）格式的數據展現空間要素，所以，須要獲得此種格式的北京行政區劃座標，經過研究，可使用GDAL的ogr2ogr方法將shp格式的圖層轉成GeoJSON格式

 

下面說一下GDAL的下載和使用：

 

須要安裝GDAL，下載路徑：http://www.gisinternals.com/release.php
下載的是第一個：release-1500-gdal-1-11-3-mapserver-6-4-2
解壓縮release-1500-gdal-1-11-3-mapserver-6-4-2.zip
根據裏面的read-me.txt，安裝此GDAL須要CMD運行SDKShell.bat命令便可，成功安裝,每次重啓機器後，須要從新執行此程序進行安裝，才能使用
而後cd C:\Users\IBM_ADMIN\Downloads\release-1500-gdal-1-11-3-mapserver-6-4-2\bin\gdal\apps

 

根據ogr2ogr.exe的工具進行轉換，開始，找到的shp文件轉換失敗，後今後命令轉換的shp修改了下，便可成功轉成json，多是有的shp文件不支持，具體不詳
命令：
將geoJSON轉成shp格式：
C:\Users\IBM_ADMIN\Downloads\release-1500-gdal-1-11-3-mapserver-6-4-2\bin\gdal\a
pps>ogr2ogr -f "ESRI Shapefile" v.shp geojsonfile.json

將f.shp轉成geoJSON格式：
C:\Users\IBM_ADMIN\Downloads\release-1500-gdal-1-11-3-mapserver-6-4-2\bin\gdal\a
pps>ogr2ogr -f "GeoJSON" o.json f.shp

 

由於本地沒有現成的北京行政區shp圖層，所以，又發現居然能夠經過ESRI在線地圖服務的行政區圖層轉成GeoJSON格式，開始發現座標系不是wgs84，Cesium-1.16僅支持WGS84座標系，由於，加入參數（此處指的是座標轉換參數，具體的能夠經過ArcGIS的spatial Adjust 獲取的校訂參數，或者，直接是座標平移參數。20.3.21 更新），將ESRI的輸出座標系轉成4326便可。

代碼：

 

ogr2ogr -f GeoJSON test.json "http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaCities_Community_BaseMap_CHN/BeiJing_Community_BaseMap_CHN/MapServer/0/query?where=1%3D1&outfields=*&f=json" OGRGeoJSON
修改下語句便可，ArcGISServer支持輸出不一樣的座標系
ogr2ogr -f GeoJSON test.json "http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaCities_Community_BaseMap_CHN/BeiJing_Community_BaseMap_CHN/MapServer/0/query?where=1%3D1&outSR=4326&outfields=*&f=json" OGRGeoJSON

完成導出

 

這時候終於獲得了GeoJSON格式的北京行政區數據文件

下面就是將Cesium現成的例子，改個數據源地址，和高程字段

//Seed the random number generator for repeatable results.
    Cesium.Math.setRandomNumberSeed(0);

    var promise = Cesium.GeoJsonDataSource.load('../../SampleData/test.json');
    promise.then(function(dataSource) {
        viewer.dataSources.add(dataSource);

        //Get the array of entities
        var entities = dataSource.entities.values;
        
        var colorHash = {};
        for (var i = 0; i < entities.length; i++) {
            //For each entity, create a random color based on the state name.
            //Some states have multiple entities, so we store the color in a
            //hash so that we use the same color for the entire state.
            var entity = entities[i];
            var name = entity.name;
            var color = colorHash[name];
            if (!color) {
                color = Cesium.Color.fromRandom({
                    alpha : 1.0
                });
                colorHash[name] = color;
            }
            
            //Set the polygon material to our random color.
            entity.polygon.material = color;
            //Remove the outlines.
            entity.polygon.outline = false;

            //Extrude the polygon based on the state's population.  Each entity
            //stores the properties for the GeoJSON feature it was created from
            //Since the population is a huge number, we divide by 50.
            entity.polygon.extrudedHeight = entity.properties.Shape_Area / 100000.0;
         
            }
        }
        viewer.zoomTo(promise);

 

 

 

最終效果如上圖所示。