cesium采用primitive方式加载geojson数据

cesium采用primitive方式加载geojson数据


cesium加载geojson数据有自带的接口GeoJsonDataSource和演示 示例,使用的是entity方式来加载数据,而entity封装的是primitive,所以想用原生的primitive方式来加载geojson数据试试。使用的数据是全球国家区划的json,在这里分别给出两种方式的代码和效果。

  1. 自带接口GeoJsonDataSource(entity方式)
    主要代码
var geojsonOptions = {
    clampToGround : true //使数据贴地
};
var entities;
var promise =Cesium.GeoJsonDataSource.load('../data/json/world.json', geojsonOptions);
promise.then(function (dataSource) {
    viewer.dataSources.add(dataSource);
    entities =dataSource.entities.values;
    for (var i = 0; i < entities.length;i++) {
        var entity = entities[i];
        // 赋随机颜色
        var color=Cesium.Color.fromRandom({alpha: 0.7});
        entity.polygon.fill = true;
        entity.polygon.material = color;
        entity.polygon.outline = true;
        entity.polygon.outlineColor = Cesium.Color.YELLOW;
    }
});

效果
cesium采用primitive方式加载geojson数据_第1张图片

  1. 原生的primitive方式
    主要代码
var urlpath =  "../data/json/world.json"
$.get(urlpath, function (data) {
    const josnN = JSON.parse(data);
    const features = josnN.features;
    addDataToGlobe(features);
})
function addDataToGlobe(features){
	const instances = [];
	for(let i=0; i<features.length; i++){
	    for(let j=0; j<features[i].geometry.coordinates.length; j++){
	        const polygonArr = features[i].geometry.coordinates[j].toString().split(',');
	        const polygon = new Cesium.PolygonGeometry({
	            polygonHierarchy : new Cesium.PolygonHierarchy(
	                Cesium.Cartesian3.fromDegreesArray(polygonArr)
	            ),
	            vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
	        });
	        const geometry = Cesium.PolygonGeometry.createGeometry(polygon);
	        instances.push(new Cesium.GeometryInstance({
	            geometry : geometry,
	            attributes : {
	                color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.fromRandom({alpha : 0.7})),
	            },
	        }));
	    }
	}
	
	const primitive = new Cesium.Primitive({
	    geometryInstances : instances,
	    appearance :  new Cesium.PerInstanceColorAppearance({ // 为每个instance着色
	        translucent : true,
	        closed : false
	    }),
	    asynchronous : false,  // 确定基元是异步创建还是阻塞直到准备就绪
	});
	
	scene.primitives.add(primitive);
}

效果
cesium采用primitive方式加载geojson数据_第2张图片
对比两种加载方式发现:
1、第二种加载速度比第一种快很多
2、第一种方式加载后,移动缩放地球有延迟现象,比较卡。第二种方式无。
3、第二种方式加载后的效果视觉上比第一种好
以上结论仅作参考,不同数据得到的结果可能不同

你可能感兴趣的:(web前端,cesium,cesium)