# cesium加载GeoJSON
# 介绍GeoJSON
GeoJson是Json数据(键值对)，它是针对地理数据的一个变种
具体的参考文档：GeoJSON (opens new window)
# 面要素
多边形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]]]
}
}]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
# 线要素
线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
]
]
}
}
]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
# 点要素
点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]}
}]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
# 核心代码
加载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);
})
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 完整代码
<!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-加载GeoJSON</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() {
//天地图token
let TDT_tk = "tdt_token";
//Cesium token
let 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
# 实现效果
