Cesium之大批量點載入研究
阿新 • • 發佈：2020-07-31
Cesium之大批量點載入研究
需求：有一個6萬4千個點的geojson檔案全部載入到Cesium地球上去
實現方式：
PointPrimitive載入
程式碼：
var randomCount = 80000; var pointPrimitives = null;// 申明點渲染集合 pointPrimitives = this.viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection()); while (randomCount--) {const dd = [3]; dd[0] = 0 + Math.random() * 20 dd[1] = 0 + Math.random() * 20 dd[2] = 100 var position = Cesium.Cartesian3.fromDegrees(dd[0], dd[1], dd[2]); pointPrimitives.add({ pixelSize: 5, color: Cesium.Color['BLUE'], outlineColor: Cesium.Color.BLACK, outlineWidth: 0, position: position }); }
註釋：程式碼中的點為隨機數生成，效果與載入檔案中的資料一致
其他實現方式與侷限：
1.geojson載入：
this.viewer.dataSources.add(Cesium.GeoJsonDataSource.load('/geojson/conflict4000.json', { stroke: Cesium.Color.HOTPINK, fill: Cesium.Color.PINK, strokeWidth: 3, markerSymbol: '?' }));
侷限：點的資料量大於5000以後瀏覽器崩潰
2.entities載入
var promise=Cesium.GeoJsonDataSource.load('/geojson/conflict4000.json'); promise.then((dataSource) => { this.viewer.dataSources.add(dataSource); var entities = dataSource.entities.values; for (var i = 0; i < entities.length; i++) { var entity = entities[i]; entity.billboard = null entity.point = { pixelSize : 10, color :Cesium.Color.YELLOW } } }); this.viewer.flyTo(promise);
侷限：效果同上，最大可載入5000點
注：entity.billboard = null 可關閉預設圖釘樣式
3.與echarts結合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>echarts</title>
<link rel="stylesheet" href="../../plugins/ys/ys.min.css">
<link rel="stylesheet" href="../../plugins/Cesium/Widgets/widgets.css">
<link rel="stylesheet" href="../../plugins/ysCesium/css/ysCesium.css">
<link rel="stylesheet" href="../../css/ysCesium/pageStyle.css">
<style>
.tips{
display: none;
position: fixed;
width: auto;
height:auto;
line-height: 30px;
background-color: rgba(0,0,0,0.5);
padding: 5px 15px;
font-size: 14px;
color:#fff;
z-index: 999;
user-select: none;
}
</style>
</head>
<body>
<div class="ys-absolute-container" id="map" style="overflow: hidden"></div>
<div class="tips" id="tip"></div>
</body>
<script src="../../plugins/ys/ys.min.js"></script>
<script src="../../plugins/Cesium/Cesium.js"></script>
<script src="../../plugins/others/echarts.min.js"></script>
<script src="../../plugins/ysCesium/ysCesium.js"></script>
<script>
const app = new YsCesium("map")
const viewer = app.viewer
/* 開始 */
//一：不需要有china.js; option中不需要geo; 每個series陣列中元素都加 coordinateSystem: 'GLMap',
const convertData = function (data) {
const res = [];
for (let i = 0; i < data.length; i++) {
const geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
console.log(res);
return res;
};
var randomCount = 80000;
var i = 0;
// var data = new Float32Array(randomCount);
// const data = new Float32Array(randomCount);
// const geoCoordMap = new Float32Array(randomCount);
const res = [];
while (randomCount--) {
const dd = [3];
// data[i] = -125.8 + Math.random() * 50;
// data[i+1] = 30.3 + Math.random() * 201;
// data[i] = {name: 'test', value: 10};
// geoCoordMap[i].push('test':[-125.8 + Math.random() * 50,31.89,30.3 + Math.random() * 201]);
dd[0] = 0 + Math.random() * 20
dd[1] = 0 + Math.random() * 20
dd[2] = 100
res.push({
name: i,
value: dd
});
i++;
}
console.log(res);
const option = {
animation: !1,
GLMap: {},
series: [
{
name: '城市',
type: 'scatter',
coordinateSystem: 'GLMap',
data: res,
symbolSize: function (val) {
return val[2] / 20;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#ddb926'
}
}
}
]
};
app.combineEcharts(option);
viewer.camera.setView({
destination : Cesium.Cartesian3.fromDegrees(117.16, 32.71, 15000000.0)
});
</script>
</html>
View Code
借鑑了：
https://www.wellyyss.cn/ysCesium/main/main.html ysCesium的echarts1的demo
https://echarts.apache.org/examples/zh/editor.html?c=scatterGL-gps&gl=1 echarts官方案例散點圖
通過與echarts的結合可以載入千萬級的點。
侷限：echarts與cesium的結合比較麻煩
鑽研不易，轉載請註明出處。。。。。。