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相关推荐

cesium 加载geojson 贴3dtiles
问题描述: 因业务需求,需要在3dtiles上加载规划用地图斑,图斑格式为geojson,加载geojson时发现设置entity--polygon的classificationType为CESIUM ...
cesium加载geoJson格式的图斑方法
Cesium加载geoJson 格式的图斑方法: // 首次进来判断是否存在图斑 if(this.geoSource) {this.Global.viewer.dataSources.remove(t ...
Cesium加载GeoJson数据（shp转化的json数据）
1.shp转换成json格式此处整理了两种shp转为json格式的方式:一是使用工具:二是使用ArcGIS进行转换. 1.1.ArcGIS转换 1.使用ArcGIS将shp文件的地理坐标设置为WGS ...
Cesium加载建筑物模型（shp转Geojson\3Dtiles）
本文主要介绍cesium加载Geojson和3dtile格式的建筑物模型文件,除此之外还介绍了Cesium工具栏的屏蔽方法.天地图的加载.地球初始状态设置等几个部分的内容,其中又不乏参照.优化诸如: ...
cesium采用primitive方式加载geojson数据
cesium采用primitive方式加载geojson数据 cesium加载geojson数据有自带的接口GeoJsonDataSource和演示示例,使用的是entity方式来加载数据,而ent ...
QGIS离线GeoJSON数据，使用Cesium加载并根据楼层高度拉伸（weixin公众号【图说GIS】）
前言往往好多事情是需求推动的,正好一个网友在群里问到"怎么让Cesium加载GeoJSON的白膜并贴在地形上?",联系到他,要了他的数据,完成了代码并测试通过.正好出差,而且一个 ...
ceisum 加载geojson,使用 Cesium 动态加载 GeoJSON 数据
前言需求是这样的,我需要在地图中显示 08 年到现在的地震情况,地震都是发生在具体的时间点的,那么问题就来了,如何实现地震情况按照时间动态渲染而不是一次全部加载出来. 一. 方案分析这里面牵扯到两 ...
Geoserver 发布wmts服务，以及cesium加载发布的wmts服务
WMTS提供了一种采用预定义图块方法发布数字地图服务的标准化解决方案.WMTS弥补了WMS不能提供分块地图的不足.WMS针对提供可定制地图的服务,是一个动态数据或用户定制地图(需结合SLD标准)的理想 ...
React框架+cesium加载GeoWebCache发布4326WMTS服务的ArcGIS切片图层请求400问题
前言由于业务的要求,需要在前端展示个性化美化的地图底图,尝试使用mapbox的配置和其它方案去搞Geojson格式的,但是个性化比较麻烦,而且门槛较高,不好配置,于是本菜鸟使用arcMap来美化底图 ...

cesium加载GeoJSON

cesium加载GeoJSON

介绍GeoJSON

面要素

线要素

点要素

核心代码

完整代码

实现效果

cesium加载GeoJSON相关推荐

最新文章

热门文章