Cesium之大批量点加载研究
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>
借鉴了：
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的结合比较麻烦
钻研不易，转载请注明出处。。。。。。
