Skip to content

Commit 7179f03

Browse files
author
潘卓然Y7000P
committed
补充cesium大数据的必要注释以及对应的说明
1 parent 537158e commit 7179f03

23 files changed

Lines changed: 182 additions & 110 deletions

‎website/public/static/demo/cesium/example/clientView_Echarts/echarts-air.htm‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
//显示鼠标位置控件
3939
webGlobe.showPosition('coordinate_location');
4040
map = webGlobe.viewer;
41-
41+
//添加google底图
4242
webGlobe.appendGoogleMap('m@207000000');
4343

4444
initData();
@@ -47,6 +47,7 @@
4747

4848
function convertData(data) {
4949
var res = [];
50+
// 将城市的几何中心点与对应的属性值联系起来
5051
for (var i = 0; i < data.length; i++) {
5152
var geoCoord = geoCoordMap[data[i].name];
5253
if (geoCoord) {
@@ -60,6 +61,8 @@
6061
};
6162

6263
function initEcharts() {
64+
// options参数请参考百度echarts-options
65+
// https://echarts.apache.org/zh/option.html#title
6366
option = {
6467
title: {
6568
text: '全国主要城市空气质量 - 百度地图提供数据',
@@ -88,9 +91,9 @@
8891
postRender: true,
8992
series: [{
9093
name: 'pm2.5',
91-
type: 'scatter',
92-
coordinateSystem: 'cesium',
93-
data: convertData(data),
94+
type: 'scatter', // 散点图
95+
coordinateSystem: 'cesium', // 设置cesium坐标系
96+
data: convertData(data), // 转换数据
9497
symbolSize: function (val) {
9598
return val[2] / 10;
9699
},
@@ -119,7 +122,7 @@
119122
{
120123
name: 'Top 5',
121124
type: 'effectScatter',
122-
coordinateSystem: 'cesium',
125+
coordinateSystem: 'cesium', // 设置cesium坐标系
123126
data: convertData(data.sort(function (a, b) {
124127
return b.value - a.value;
125128
}).slice(0, 6)),
@@ -149,6 +152,7 @@
149152
}
150153
]
151154
}
155+
// 声明cesium的echarts图层并将其显示到三维球上
152156
layer = new CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map);
153157
}
154158

‎website/public/static/demo/cesium/example/clientView_Echarts/echarts-biggps.htm‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,11 @@
5151

5252

5353
var dataCount = 0;
54-
var CHUNK_COUNT = 230;
55-
// https://blog.openstreetmap.org/2012/04/01/bulk-gps-point-data/
54+
var CHUNK_COUNT = 230; // 数据一共230片
55+
/**
56+
* 循环请求对应的网络数据，数据格式是Int32Array,并解析对应的二级制流
57+
* @see https://blog.openstreetmap.org/2012/04/01/bulk-gps-point-data/
58+
* */
5659
function fetchData(idx) {
5760
if (idx >= CHUNK_COUNT) {
5861
return;
@@ -85,6 +88,8 @@
8588

8689

8790
function initEcharts() {
91+
// options参数请参考百度echarts-options
92+
// https://echarts.apache.org/zh/option.html#title
8893
var option = {
8994
//backgroundColor: '#000',
9095
title: {
@@ -99,9 +104,9 @@
99104
},
100105
series: [{
101106
name: '弱',
102-
type: 'scatterGL',
103-
progressive: 20000,
104-
coordinateSystem: 'cesium',
107+
type: 'scatterGL',
108+
progressive: 20000, // 一次渲染20000点
109+
coordinateSystem: 'cesium', // 设置cesium坐标系
105110
symbolSize: 1,
106111
zoomScale: 0.002,
107112
blendMode: 'lighter',
@@ -115,9 +120,10 @@
115120
},
116121
silent: true,
117122
dimensions: ['lng', 'lat'],
118-
data: new Float32Array()
123+
data: new Float32Array() // 关键点： 数据必须处理成Float32Array格式，否则超出浏览器内存
119124
}]
120125
};
126+
// 声明cesium的echarts图层并将其显示到三维球上
121127
layer = new CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map);
122128
fetchData(0);
123129
}

‎website/public/static/demo/cesium/example/clientView_Echarts/echarts-bigline.htm‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -96,22 +96,24 @@
9696
}
9797

9898
function initEcharts() {
99+
// options参数请参考百度echarts-options
100+
// https://echarts.apache.org/zh/option.html#title
99101
var option = {
100-
progressive: 2000,
102+
progressive: 2000, // 一次渲染20000点
101103
//backgroundColor: '#111',
102104
cesium: {
103105
roam: true
104106
},
105107
series: [{
106108
type: 'lines',
107109

108-
coordinateSystem: 'cesium',
110+
coordinateSystem: 'cesium', // 设置cesium坐标系
109111

110112
blendMode: 'lighter',
111113

112114
dimensions: ['value'],
113115

114-
data: new Float64Array(),
116+
data: new Float64Array(), // 关键点： 数据必须处理成Float64Array格式，否则超出浏览器内存
115117
polyline: true,
116118
large: true,
117119

@@ -122,7 +124,7 @@
122124
}
123125
}]
124126
}
125-
127+
// 声明cesium的echarts图层并将其显示到三维球上
126128
layer = new CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map);
127129

128130
fetchData(0);

‎website/public/static/demo/cesium/example/clientView_Echarts/echarts-bigpoint.htm‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,10 @@
5050

5151
var layer;
5252

53-
var CHUNK_COUNT = 19;
54-
53+
var CHUNK_COUNT = 19; // 数据一共19片
54+
/**
55+
* 循环请求对应的网络数据，数据格式是Int32Array,并解析对应的二级制流
56+
* */
5557
function fetchData(idx) {
5658
if (idx >= CHUNK_COUNT) {
5759
return;
@@ -77,6 +79,8 @@
7779
}
7880

7981
function initEcharts() {
82+
// options参数请参考百度echarts-options
83+
// https://echarts.apache.org/zh/option.html#title
8084
var option = {
8185
title: {
8286
top: '10px',
@@ -95,8 +99,8 @@
9599
},
96100
series: [{
97101
type: 'scatterGL',
98-
progressive: 2000,
99-
coordinateSystem: 'cesium',
102+
progressive: 2000, // 一次渲染20000点
103+
coordinateSystem: 'cesium', // 设置cesium坐标系
100104
symbolSize: 0.5,
101105
blendMode: 'lighter',
102106
large: true,
@@ -108,9 +112,10 @@
108112
},
109113
silent: true,
110114
dimensions: ['lng', 'lat'],
111-
data: new Float32Array()
115+
data: new Float32Array() // 关键点： 数据必须处理成Float32Array格式，否则超出浏览器内存
112116
}]
113117
};
118+
// 声明cesium的echarts图层并将其显示到三维球上
114119
layer = new CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map);
115120

116121
fetchData(0);

‎website/public/static/demo/cesium/example/clientView_Echarts/echarts-bigroad.htm‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,12 @@
4848

4949
initEcharts();
5050

51-
var CHUNK_COUNT = 28;
51+
var CHUNK_COUNT = 28; // 数据一共28片
5252
var dataCount = 0;
5353
var layer;
54-
54+
/**
55+
* 循环请求对应的网络数据，数据格式是Int32Array,并解析对应的二级制流
56+
* */
5557
function fetchData(idx) {
5658
if (idx >= CHUNK_COUNT) {
5759
return;
@@ -80,6 +82,8 @@
8082
}
8183

8284
function initEcharts() {
85+
// options参数请参考百度echarts-options
86+
// https://echarts.apache.org/zh/option.html#title
8387
var option = {
8488
title: {
8589
text: '全国道路（百万级）',
@@ -88,20 +92,20 @@
8892
color: '#fff'
8993
}
9094
},
91-
progressive: 5000,
95+
progressive: 5000, // 一次渲染5000点
9296
cesium: {
9397
roam: true
9498
},
9599
series: [{
96100
type: 'lines',
97101

98-
coordinateSystem: 'cesium',
102+
coordinateSystem: 'cesium', // 设置cesium坐标系
99103

100104
blendMode: 'lighter',
101105

102106
dimensions: ['value'],
103107

104-
data: new Float64Array(),
108+
data: new Float64Array(), // 关键点： 数据必须处理成Float64Array格式，否则超出浏览器内存
105109
polyline: true,
106110
large: true,
107111

@@ -112,7 +116,7 @@
112116
}
113117
}]
114118
}
115-
119+
// 声明cesium的echarts图层并将其显示到三维球上
116120
layer = new CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map);
117121

118122
fetchData(0);

‎website/public/static/demo/cesium/example/clientView_Echarts/echarts-grid.htm‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,9 @@
5858
initEcharts();
5959
}
6060

61+
/**
62+
* 根据数据的属性参数针对不同的属性附不同的值
63+
**/
6164
function renderItemFunc(params, api) {
6265
var context = params.context;
6366
var lngIndex = api.value(0);
@@ -82,6 +85,9 @@
8285
};
8386
}
8487

88+
/**
89+
* 获取数据的坐标位置
90+
**/
8591
function getCoord(params, api, lngIndex, latIndex) {
8692
var coords = params.context.coords || (params.context.coords = []);
8793
var key = lngIndex + '-' + latIndex;
@@ -94,6 +100,8 @@
94100
}
95101

96102
function initEcharts() {
103+
// options参数请参考百度echarts-options
104+
// https://echarts.apache.org/zh/option.html#title
97105
var option = {
98106
tooltip: {},
99107
visualMap: {
@@ -138,7 +146,7 @@
138146
},
139147
series: [{
140148
type: 'custom',
141-
coordinateSystem: 'cesium',
149+
coordinateSystem: 'cesium', // 设置cesium坐标系
142150
data: griddata,
143151
renderItem: renderItemFunc,
144152
animation: false,
@@ -152,7 +160,7 @@
152160
}
153161
}]
154162
};
155-
163+
// 声明cesium的echarts图层并将其显示到三维球上
156164
layer = new CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map);
157165
}
158166
</script>

‎website/public/static/demo/cesium/example/clientView_Echarts/echarts-heater.htm‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@
4747

4848
function convertData(data) {
4949
var res = [];
50+
// 将城市的几何中心点与对应的属性值联系起来
5051
for (var i = 0; i < data.length; i++) {
5152
var geoCoord = geoCoordMap[data[i].name];
5253
if (geoCoord) {
@@ -60,6 +61,8 @@
6061
}
6162

6263
function initEcharts() {
64+
// options参数请参考百度echarts-options
65+
// https://echarts.apache.org/zh/option.html#title
6366
option = {
6467
title: {
6568
text: "全国主要城市PM 2.5热力图",
@@ -70,7 +73,7 @@
7073
sublink: "http://www.pm25.in",
7174
left: "center",
7275
},
73-
cesium: {
76+
cesium: { // 热力图必须设置改属性
7477
roam: false,
7578
},
7679
postRender: false,
@@ -90,13 +93,14 @@
9093
{
9194
name: "热力图",
9295
type: "heatmap",
93-
coordinateSystem: "cesium",
94-
data: convertData(data),
96+
coordinateSystem: "cesium", // 设置cesium坐标系
97+
data: convertData(data), // 转换数据
9598
pointSize: 5,
9699
blurSize: 6,
97100
},
98101
],
99102
};
103+
// 声明cesium的echarts图层并将其显示到三维球上
100104
layer = new CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map);
101105
}
102106

‎website/public/static/demo/cesium/example/clientView_Echarts/echarts-line.htm‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949

5050
function initEcharts() {
5151
$.get('./static/data/echarts/line-bus.json', function (data) {
52+
// 遍历数据并处理成对应echarts格式
5253
busLines = [].concat.apply([], data.map(function (busLine, idx) {
5354
var prevPt;
5455
var points = [];
@@ -76,7 +77,7 @@
7677
postRenderFrame: 2,
7778
series: [{
7879
type: 'lines',
79-
coordinateSystem: 'cesium',
80+
coordinateSystem: 'cesium', // 设置cesium坐标系
8081
polyline: true,
8182
data: busLines,
8283
silent: true,
@@ -88,10 +89,11 @@
8889
width: 1
8990
}
9091
},
91-
progressiveThreshold: 500,
92-
progressive: 200
92+
progressiveThreshold: 500, // 一次渲染500点
93+
progressive: 200 // 渲染频率
9394
}]
9495
}
96+
// 声明cesium的echarts图层并将其显示到三维球上
9597
layer = new CesiumZondy.Overlayer.EchartsLayer(map, option).addTo(map);
9698
});
9799
}

0 commit comments

Comments
 (0)