cesium加載GeoJSON

介紹GeoJSON

GeoJson是Json數據(鍵值對)，它是針對地理數據的一個變種

具體的參考文檔：GeoJSON

面要素

多邊形json數據

{"type": "FeatureCollection","features": [{"type": "Feature","properties": {"stroke": "#555555","stroke-width": 2,"stroke-opacity": 1,"fill": "#555555","fill-opacity": 0.5},"geometry": {"type": "Polygon","coordinates": [[[87.4965763092041, 29.83729356534345], [87.49288558959961, 29.832602908274293], [87.49176979064941, 29.82977351657785], [87.4921131134033, 29.827912030978823], [87.49146938323973, 29.823556019173292], [87.49159812927246, 29.822699686830465], [87.4921989440918, 29.82255075871759], [87.49297142028809, 29.82243906248729], [87.49537467956543, 29.826050510703986], [87.496018409729, 29.827428039043124], [87.49644756317139, 29.82850771014331], [87.49722003936768, 29.83018303875601], [87.49872207641602, 29.83163496749975], [87.50052452087402, 29.83319855947471], [87.49975204467773, 29.835134401350402], [87.49674797058105, 29.837963641231568], [87.4965763092041, 29.83729356534345]]]}}, {"type": "Feature","properties": {},"geometry": {"type": "Polygon","coordinates": [[[87.50112533569336, 29.832900734318393], [87.49743461608887, 29.829699057819667], [87.49743461608887, 29.82865662937959], [87.49322891235352, 29.82173165013024], [87.49374389648436, 29.820838069470422], [87.49340057373047, 29.81964661616466], [87.49348640441895, 29.814359370800148], [87.49468803405762, 29.813391253335432], [87.49709129333496, 29.813093369152803], [87.49975204467773, 29.814806191083832], [87.50103950500488, 29.817040262550112], [87.50189781188965, 29.82039127614494], [87.50344276428223, 29.822774150803713], [87.50481605529785, 29.824188955754668], [87.50773429870605, 29.82552927881331], [87.50756263732909, 29.827018505574348], [87.50593185424803, 29.829550140136895], [87.5049877166748, 29.831337137682596], [87.50267028808594, 29.832230624470732], [87.50112533569336, 29.832900734318393]]]}}, {"type": "Feature","properties": {},"geometry": {"type": "Polygon","coordinates": [[[87.48661994934082, 29.835953400082715], [87.4867057800293, 29.834389851221903], [87.48661994934082, 29.833049647007513], [87.48567581176758, 29.829847975280536], [87.48473167419434, 29.827465269275255], [87.48722076416016, 29.826199433602003], [87.49022483825684, 29.82813541108161], [87.4910831451416, 29.830071351055686], [87.49202728271484, 29.831486052702147], [87.49322891235352, 29.834762126979754], [87.49503135681152, 29.836697938558324], [87.4962329864502, 29.83811254637407], [87.49580383300781, 29.83870816472437], [87.49331474304199, 29.83781473586711], [87.48979568481445, 29.836549031307136], [87.48739242553711, 29.836623484960477], [87.48661994934082, 29.835953400082715]]]}}, {"type": "Feature","properties": {},"geometry": {"type": "Polygon","coordinates": [[[87.49138355255127, 29.828880007817933], [87.49035358428955, 29.827800340740183], [87.48837947845459, 29.826460048139577], [87.48730659484863, 29.825640971590158], [87.48786449432372, 29.824672963377115], [87.48898029327393, 29.823332628834663], [87.49005317687988, 29.822811382769526], [87.49082565307616, 29.822811382769526], [87.49116897583008, 29.824859119530846], [87.49146938323973, 29.826869583896876], [87.49159812927246, 29.82798649106856], [87.49176979064941, 29.828693859154], [87.49138355255127, 29.828880007817933]]]}}, {"type": "Feature","properties": {},"geometry": {"type": "Polygon","coordinates": [[[87.48739242553711, 29.819609383020037], [87.48940944671631, 29.82039127614494], [87.49009609222412, 29.820912534830494], [87.4916410446167, 29.821061465384258], [87.49275684356688, 29.82139655831892], [87.4919843673706, 29.82206674081821], [87.49069690704346, 29.82255075871759], [87.48953819274902, 29.822736918824038], [87.48893737792969, 29.823034774273154], [87.48816490173338, 29.82243906248729], [87.4879503250122, 29.82158272057499], [87.48734951019287, 29.82061467305729], [87.48692035675049, 29.8200189468482], [87.48696327209473, 29.819423217088872], [87.48739242553711, 29.819609383020037]]]}}, {"type": "Feature","properties": {},"geometry": {"type": "Polygon","coordinates": [[[87.4855899810791, 29.82638558691247], [87.48516082763672, 29.82578989509846], [87.4852466583252, 29.82534312390783], [87.48477458953857, 29.824598500818528], [87.48387336730957, 29.823630482508545], [87.48258590698241, 29.822103973047522], [87.48250007629395, 29.82143379079787], [87.48322963714598, 29.82143379079787], [87.48400211334229, 29.82176888248438], [87.48451709747314, 29.821880579463585], [87.48567581176758, 29.82229013398608], [87.48700618743896, 29.822699686830465], [87.4876070022583, 29.822997542390546], [87.48803615570068, 29.823332628834663], [87.48790740966797, 29.823667714155384], [87.48739242553711, 29.824598500818528], [87.4867057800293, 29.825640971590158], [87.4855899810791, 29.82638558691247]]]}}, {"type": "Feature","properties": {},"geometry": {"type": "Polygon","coordinates": [[[87.48125553131102, 29.823444324066394], [87.48185634613037, 29.822736918824038], [87.48232841491699, 29.822587990766603], [87.48288631439209, 29.822736918824038], [87.48310089111328, 29.822923078583752], [87.48348712921143, 29.82374217740741], [87.484130859375, 29.824635732104742], [87.48456001281737, 29.825678202488042], [87.48430252075195, 29.826273894967805], [87.48365879058838, 29.82534312390783], [87.48125553131102, 29.823444324066394]]]}}, {"type": "Feature","properties": {},"geometry": {"type": "Polygon","coordinates": [[[87.47966766357422, 29.824859119530846], [87.47971057891846, 29.824635732104742], [87.47983932495117, 29.82422618719345], [87.48086929321289, 29.823704945788332], [87.48129844665527, 29.82385387218147], [87.4817705154419, 29.824561269518444], [87.48327255249023, 29.825678202488042], [87.48370170593262, 29.826013279944803], [87.4839162826538, 29.826422817532958], [87.48198509216309, 29.82597604917175], [87.47966766357422, 29.824859119530846]]]}}, {"type": "Feature","properties": {},"geometry": {"type": "Polygon","coordinates": [[[87.4871778488159, 29.82121039571612], [87.48533248901367, 29.820354043277657], [87.48353004455566, 29.819460450302834], [87.48271465301514, 29.818715783388594], [87.48198509216309, 29.81808281215006], [87.48361587524414, 29.81752430478788], [87.48477458953857, 29.817859409579604], [87.48520374298094, 29.818120045863267], [87.48589038848876, 29.818268980577425], [87.48623371124268, 29.818715783388594], [87.48636245727539, 29.819795548604493], [87.48700618743896, 29.820763604054854], [87.4871778488159, 29.82121039571612]]]}}] }

線要素

線json數據

{"type": "FeatureCollection","features": [{"type": "Feature","properties": {},"geometry": {"type": "LineString","coordinates": [[87.40310668945312,30.0643399462443],[87.42370605468749,29.969211659636663],[87.42233276367188,29.881136828132842],[87.42507934570312,29.78225755812941],[87.41683959960938,29.709524917923563],[87.4072265625,29.647481692217653],[87.40310668945312,29.528060295064265],[87.40447998046875,29.45514390664574],[87.4072265625,29.433617570990965],[87.40447998046875,29.366617569128366],[87.40447998046875,29.328312042735],[87.39486694335938,29.222897664495267],[87.39486694335938,29.167751455150153]]}}] }

點要素

點json數據

{"type": "FeatureCollection","features": [{"type": "Feature","properties": {},"geometry": {"type": "Point", "coordinates": [87.50052452087402, 29.808103677175467]}}, {"type": "Feature","properties": {},"geometry": {"type": "Point", "coordinates": [87.49835729598998, 29.80892289741792]}}, {"type": "Feature","properties": {},"geometry": {"type": "Point", "coordinates": [87.49543905258179, 29.80886704170547]}}, {"type": "Feature","properties": {},"geometry": {"type": "Point", "coordinates": [87.49283194541931, 29.808438813540302]}}, {"type": "Feature","properties": {},"geometry": {"type": "Point", "coordinates": [87.49114751815794, 29.8075637328922]}}, {"type": "Feature","properties": {},"geometry": {"type": "Point", "coordinates": [87.48874425888062, 29.806856215280998]}}, {"type": "Feature","properties": {},"geometry": {"type": "Point", "coordinates": [87.48679161071777, 29.80672588254355]}}, {"type": "Feature","properties": {},"geometry": {"type": "Point", "coordinates": [87.48528957366943, 29.806427978505916]}}, {"type": "Feature","properties": {},"geometry": {"type": "Point", "coordinates": [87.50209093093872, 29.803244073687733]}}, {"type": "Feature","properties": {},"geometry": {"type": "Point", "coordinates": [87.48480677604675, 29.805832167768724]}}, {"type": "Feature","properties": {},"geometry": {"type": "Point", "coordinates": [87.48439908027648, 29.80506878007479]}}, {"type": "Feature","properties": {},"geometry": {"type": "Point", "coordinates": [87.48393774032593, 29.80442641274521]}}, {"type": "Feature","properties": {},"geometry": {"type": "Point", "coordinates": [87.48327255249023, 29.80365370454965]}}, {"type": "Feature","properties": {},"geometry": {"type": "Point", "coordinates": [87.48243570327759, 29.80325338349868]}}, {"type": "Feature","properties": {},"geometry": {"type": "Point", "coordinates": [87.48095512390135, 29.802797201743417]}}, {"type": "Feature","properties": {},"geometry": {"type": "Point", "coordinates": [87.48010754585265, 29.80190345186588]}}, {"type": "Feature","properties": {},"geometry": {"type": "Point", "coordinates": [87.47930288314818, 29.801270374204712]}}] }

核心代碼

加載GeoJSON數據的代碼

let that = this; let geoJsonObj = data; let viewer = this._viewer; let smcPromise = Cesium.GeoJsonDataSource.load(geoJsonObj,{clampToGround : true }); smcPromise.then(function (dataSource) {viewer.dataSources.add(dataSource);viewer.flyTo(dataSource); })

完整代碼

<!DOCTYPE html> <html lang="en"> <head><!-- Use correct character set. --><meta charset="utf-8"/><!-- Tell IE to use the latest, best version. --><meta http-equiv="X-UA-Compatible" content="IE=edge"/><!-- Make the application on mobile take up the full browser screen and disable user scaling. --><meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/><title>cesium-天氣效果</title><script src="../lib/Cesium-1.89/Build/Cesium/Cesium.js"></script><script src="../../static/lib/vue.min.js"></script><script src="../../static/data/geodata.js"></script><style>@import url(../lib/Cesium-1.89/Build/Cesium/Widgets/widgets.css);html,body, #temp {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}#cesiumContainer {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}</style> </head> <body> <div id="temp"><div style="display: -webkit-flex;display: flex;width: 100%;height: 100%"><div style="width: 90%;height: 100%"><div id="cesiumContainer"></div></div><div style="width: 10%;height: 100%;background-color: #d3d3d3;padding: 30px"><button class="btn" @click="addDem">添加DEM</button><button class="btn" @click="addVecData">矢量數據</button></div></div> </div> <script>let EarthComp = new Vue({el: "#temp",data: {_viewer: undefined,snow:null,//雪rain:null,//雨fog:null,//霧},mounted: function () {let that = this;this.earthInit();},methods: {/*** 地球初始化*/earthInit() {//天地圖tokenlet TDT_tk = "tdt_token";//Cesium tokenlet cesium_tk = "token";//標注let TDT_CIA_C = "http://{s}.tianditu.gov.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0" +"&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +"&style=default&format=tiles&tk=" + TDT_tk;// 添加mapbox自定義地圖實例let layer = new Cesium.MapboxStyleImageryProvider({url: 'https://api.mapbox.com/styles/v1',username: 'sungang',styleId: 'styleId',accessToken: 'accessToken',scaleFactor: true});//初始頁面加載Cesium.Ion.defaultAccessToken = cesium_tk;let viewer = new Cesium.Viewer('cesiumContainer', {geocoder: false, // 位置查找工具baseLayerPicker: false,// 圖層選擇器（地形影像服務）timeline: false, // 底部時間線homeButton: false,// 視角返回初始位置fullscreenButton: false, // 全屏animation: false, // 左下角儀表盤（動畫器件）sceneModePicker: false,// 選擇視角的模式（球體、平鋪、斜視平鋪）navigationHelpButton: false, //導航幫助按鈕imageryProvider: layer});//調用影響中文注記服務viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({url: TDT_CIA_C,layer: "tdtImg_c",style: "default",format: "tiles",tileMatrixSetID: "c",subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],tilingScheme: new Cesium.GeographicTilingScheme(),tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],maximumLevel: 50,show: false}))this._viewer = viewer;// 去除版權信息this._viewer._cesiumWidget._creditContainer.style.display = "none";},/*** 添加模型*/addDem() {let that = this;let terrainProvider = new Cesium.CesiumTerrainProvider({url: '../res/data/dem/ASTGTM_N29E087D'});that._viewer.terrainProvider = terrainProvider;that._viewer.camera.flyTo({destination: Cesium.Cartesian3.fromDegrees(87.54791, 29.57025, 17863.0),orientation: {heading: Cesium.Math.toRadians(0.0),pitch: Cesium.Math.toRadians(-25.0),roll: 0.0}});},/*** 添加矢量數據**/addVecData(){//面要素this.addVecDataByType('polygon',polygonData);//線要素this.addVecDataByType('lineString',linestringData);//點要素this.addVecDataByType('point',pointData);}, /*** 根據類型添加矢量數據**/addVecDataByType(type,data){let that = this;let geoJsonObj = data;let viewer = this._viewer;let smcPromise = Cesium.GeoJsonDataSource.load(geoJsonObj,{clampToGround : true});smcPromise.then(function (dataSource) {viewer.dataSources.add(dataSource);viewer.flyTo(dataSource);})},},}) </script> </body> </html>

實現效果

總結

以上是生活随笔為你收集整理的cesium加载GeoJSON的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。