CZML加载点线面

CZML 是一种用来描述动态场景的JSON架构的语言，主要用于 Cesium 在浏览器中的展示。它可以用来描述点、线、布告板、模型以及其他的图元，同时定义他们是怎样随时间变化的。

加载点

'use strict';

var czml = [{
    "id": "document",
    "name": "CZML Point",
    "version": "1.0"
}, {
    "id": "point 1",
    "name": "point",
    "position": {
        "cartographicDegrees": [-111.0, 40.0, 0]
    },
    "point": {
        "color": {
            "rgba": [255, 255, 255, 255]
        },
        "outlineColor": {
            "rgba": [255, 0, 0, 255]
        },
        "outlineWidth": 4,
        "pixelSize": 20
    }
}];

var viewer = new Cesium.Viewer('cesiumContainer');
var dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);

加载线

/**
 * CZML数据源创建线
 * @param {Object} polyLinePositions 经纬度坐标点数据集合（多个坐标点组成一条线）:[109.740, 19.997, 500, 109.860, 19.997, 500]
 */
function creatLine(polyLinePositions){
	// 创建czml文件；得到czml数据源
	var czmlLine = getCzmlLine(polyLinePositions);
	// 加载提供的URL或CZML对象，替换任何现有数据。
	var dataSourcePromise = Cesium.CzmlDataSource.load(czmlLine);
	viewer.dataSources.add(dataSourcePromise);
	// 添加czml数据到三维球上
	viewer.zoomTo(dataSourcePromise);
}

/**
 * 定义并封装CZML数据源
 * @param {Object} cartographicDegrees 经纬度坐标点数据集合（多个坐标点组成一条线）:[109.740, 19.997, 500, 109.860, 19.997, 500]
 */
function getCzmlLine(cartographicDegrees){
	var czmlLine = [{
		"id": "document",
		"name": "CZML Geometries: Polyline",
		"version": "1.0"
	}, {
		"id": "fullLine",
		"name": "Yellow full line",
		"polyline": {
			"positions": {
				"cartographicDegrees": cartographicDegrees
			},
			"material": {
				"solidColor": {
					"color": {
						"rgba": [255,255,0,255]
					}
				}
			}
		}
	}];
	return czmlLine;
}

加载布告牌

var czml = [{
    "id" : "document",
    "name" : "CZML Point - Time Dynamic",
    "version" : "1.0"
},{
    "id" : "point",
    "availability" :"2012-08-04T16:00:00Z/2012-08-04T16:05:00Z",
    "position" : {
        "epoch" : "2012-08-04T16:00:00Z",
         "cartographicDegrees" : [
             0,   70, 20, 150000,
             100, -80, 44, 150000,
             200, -90, 18, 150000,
             300, -98, 52, 150000, 
         ]
    },
    
    "billboard" : {
        "image" : "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTgzNDY3MTIyNzY1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM2MDMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCI+PGRlZnM+PHN0eWxlIHR5cGU9InRleHQvY3NzIj48L3N0eWxlPjwvZGVmcz48cGF0aCBkPSJNNTc5LjQ2MzUyOSAyMDYuMDA0NzA2Yy0zMC4xMTc2NDctMTQ2Ljk3NDExOC02MC4yMzUyOTQtMTYyLjYzNTI5NC02MC4yMzUyOTQtMTYyLjYzNTI5NC00LjgxODgyNC00LjgxODgyNC0xMC44NDIzNTMtNC44MTg4MjQtMTUuNjYxMTc2IDAgMCAwLTMwLjExNzY0NyAxNS42NjExNzYtNjAuMjM1Mjk0IDE2Mi42MzUyOTQgMCAwLTE5LjI3NTI5NCAxMDIuNC0xOS4yNzUyOTQgMTg1LjUyNDcwNlY1NTQuMTY0NzA2YzAgNDUuNzc4ODI0IDE3NC42ODIzNTMgNDAuOTYgMTc0LjY4MjM1MyAzLjYxNDExOFYzOTEuNTI5NDEyYzEuMjA0NzA2LTgzLjEyNDcwNi0xOS4yNzUyOTQtMTg1LjUyNDcwNi0xOS4yNzUyOTUtMTg1LjUyNDcwNnpNNTY2LjIxMTc2NSAzMTAuODE0MTE4YzAgNi4wMjM1MjktMS4yMDQ3MDYgNC44MTg4MjQtNi4wMjM1MyA2LjAyMzUyOWgtMTAuODQyMzUzcy0xNC40NTY0NzEtMTc4LjI5NjQ3MS0yNy43MDgyMzUtMjMzLjcxMjk0MWMwIDAgNDguMTg4MjM1IDEyMS42NzUyOTQgNDQuNTc0MTE4IDIyNy42ODk0MTJ6TTQ1NC4xNzQxMTggODM2LjA2NTg4Mmw3LjIyODIzNS0yMDkuNjE4ODIzYy02LjAyMzUyOS0yLjQwOTQxMi0xMC44NDIzNTMtNC44MTg4MjQtMTUuNjYxMTc3LTcuMjI4MjM1bDguNDMyOTQyIDIxNi44NDcwNTh6TTQzMS4yODQ3MDYgNzQ4LjEyMjM1M2w0LjgxODgyMy0xMzYuMTMxNzY1Yy0zLjYxNDExOC0zLjYxNDExOC03LjIyODIzNS03LjIyODIzNS05LjYzNzY0Ny0xMi4wNDcwNTlsNC44MTg4MjQgMTQ4LjE3ODgyNHpNNDgzLjA4NzA1OSA4OTUuMDk2NDcxbDkuNjM3NjQ3LTI2MS40MjExNzdjLTYuMDIzNTI5IDAtMTIuMDQ3MDU5LTEuMjA0NzA2LTE2Ljg2NTg4Mi0yLjQwOTQxMmw3LjIyODIzNSAyNjMuODMwNTg5ek01NzMuNDQgODMyLjQ1MTc2NWw3LjIyODIzNS0yMTUuNjQyMzUzYy0zLjYxNDExOCAzLjYxNDExOC04LjQzMjk0MSA2LjAyMzUyOS0xNC40NTY0NyA4LjQzMjk0MWw3LjIyODIzNSAyMDcuMjA5NDEyek01MDMuNTY3MDU5IDYzNC44OGw5LjYzNzY0NyAzNTAuNTY5NDEyIDkuNjM3NjQ3LTM1MC41Njk0MTJjLTYuMDIzNTI5IDAtMTMuMjUxNzY1IDEuMjA0NzA2LTE5LjI3NTI5NCAwek01OTIuNzE1Mjk0IDc1Mi45NDExNzZsNC44MTg4MjQtMTQ5LjM4MzUyOWMtMi40MDk0MTIgMy42MTQxMTgtNi4wMjM1MjkgNi4wMjM1MjktOS42Mzc2NDcgOS42Mzc2NDdsNC44MTg4MjMgMTM5Ljc0NTg4MnpNNTQ0LjUyNzA1OSA4OTAuMjc3NjQ3bDkuNjM3NjQ3LTI2MC4yMTY0NzEtMTguMDcwNTg4IDMuNjE0MTE4IDguNDMyOTQxIDI1Ni42MDIzNTN6IiBwLWlkPSIzNjA0IiBmaWxsPSIjZDgxZTA2Ij48L3BhdGg+PC9zdmc+",
        "scale" : 0.5,
    },
    path : {
        resolution : 1,
        material : new Cesium.PolylineGlowMaterialProperty({
            glowPower : 0.1,
            color : Cesium.Color.YELLOW
        }),
        width :3
    },
}];
 
var viewer = new Cesium.Viewer('cesiumContainer', {
    shouldAnimate : true,
    sceneMode: 2, 
});
 
viewer.dataSources.add(Cesium.CzmlDataSource.load(czml)).then(function(ds){
    var s = ds.entities.getById("point");
    s.orientation =new Cesium.VelocityOrientationProperty(s.position);
    s.billboard.alignedAxis=new Cesium.VelocityVectorProperty(s.position, true)
});

加载模型

var czml = [
    {
        id: "document",
        name: "CZML Path",
        version: "1.0",
        clock: {
            interval: "2020-09-30T10:00:00Z/2020-09-30T10:01:20Z",
            currentTime: "2012-08-04T10:00:00Z",
            multiplier: 10,
        },
    },
    {
        id: "path",
        name: "path with GPS flight data",
        description: "Created by wangyu",
        availability: "2020-09-30T10:00:00Z/2020-09-30T10:01:20Z",
        path: {
            material: {
                polylineOutline: {
                    color: {
                        rgba: [255, 0, 255, 127],
                    },
                    outlineColor: {
                        rgba: [255, 0, 255, 127],
                    },
                    outlineWidth: 3,
                },
            },
            width: 5,
            leadTime: 10,
            trailTime: 1000,
            resolution: 5,
        },
        model: {
            gltf: "Assets/SampleData/models/CesiumAir/Cesium_Air.glb",
            scale: 2.0,
            minimumPixelSize: 128,
        },
        position: {
            epoch: "2020-09-30T10:00:00Z",
            cartographicDegrees: [
                0, 102.23404378554466, 27.825736605050523, 2500,
                10, 102.23691954070244, 27.82887625908256, 2500,
                20, 102.23908610745147, 27.830920963237897, 2500,
                30, 102.24222708893987, 27.834251845778994, 2500,
                40, 102.24483684219396, 27.837156939755058, 2500,
                50, 102.24821756517042, 27.838973119832243, 2500,
                60, 102.2497304631213, 27.843805668815058, 2500,
                70, 102.25017946873977, 27.849726810753346, 2500,
                80, 102.24597936406548, 27.852179959795592, 2500
            ],
        },
    },
];

var airModel;
viewer.dataSources.add(Cesium.CzmlDataSource.load(czml)).then(function (ds) {
    airModel = ds.entities.getById("path");
    // 设置模型可以随路径方向转向
    airModel.orientation = new Cesium.VelocityOrientationProperty(airModel.position);
    airModel.model.alignedAxis = new Cesium.VelocityVectorProperty(airModel.position, true)
});

参考：blog.csdn.net/Apple_Coco/…