cesium采用primitive方式加载geojson数据

  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;
    }
});

效果

  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);
}

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

经验分享 程序员 微信小程序 职场和发展