初始化程序

Entities加载和样式配置

上面我们程序里已经添加了viewer 、影像图层、地形图层。下来重点说项目里的示例点位数据（the sample geocache data）。
为了更方便的可视化，Cesium支持流行的矢量格式GeoJson和KML，同时也支持我们团队定义的一种格式 CZML.

无论最初是什么格式，所有的空间矢量数据在Cesium里都是使用Entity 相关API去展示的。Entity API 使用了灵活高效的可视化渲染方式。 Entity是一种对几何图形做空间和时间展示的数据对象。sandcastle 里提供了很多简单的entity。
为了能快速的学习Entity API，建议先花点时间去读下 空间数据可视化教程 。

下面一些使用Entity API的示例:

• Polygon
• Polyline
• Billboard
• Label

一旦你已经理解了Entity是什么东西，使用Cesium加载数据就很容易理解了。为了读取数据文件，需要根据你的数据格式创建一个合适的 DataSource ，它将负责解析你配置的url里的数据，然后创建一个[EntityCollection]用来存储从数据里加载的每一个Entity 。DataSource 只是定义一些接口，依据数据格式的不同会有不同的解析过程。比如，KML使用KmlDataSource。如下面代码：

var kmlOptions = {
    camera : viewer.scene.camera,
    canvas : viewer.scene.canvas,
    clampToGround : true
};
// 从这个KML的url里加载POI点位  : http://catalog.opendata.city/dataset/pediacities-nyc-neighborhoods/resource/91778048-3c58-449c-a3f9-365ed203e914
var geocachePromise = Cesium.KmlDataSource.load('./Source/SampleData/sampleGeocacheLocations.kml', kmlOptions);

这段代码使用 KmlDataSource.load(optinos) 来从KML文件中读取点位数据。 对于KmlDataSource，camera 和 canvas 选项必须要配置。clampToGround 选项控制数据是否贴地, 贴地效果是最常见的矢量数据可视化效果，保证数据紧贴地形起伏，而不是仅仅相对WGS84绝对球表面。

因为数据是异步加载的，所以这个函数实际返回一个 Promise ， 最后使用KmlDataSource 存储我们新创建的Entity。

Promise 是一种异步处理机制，这里的“异步”是指需要在.then函数里操作数据，而不是直接在 .load函数之后立即操作。为了能在scene中使用这些载入的entity，只有当这个promise的then回调中才可以把KmlDataSource添加到 viewer.datasources。

geocachePromise.then(function(dataSource) {
    // 把所有entities添加到viewer中显示
    viewer.dataSources.add(dataSource);
});

这些新加入到场景的entity默认有很多功能。单击它们会在 Infobox 显示属性, 双击它相机转换为居中观察模式（look at）. 使用HOME按钮或者infobox旁边的相机按钮可以停止这种模式。下来我们来自定义样式。

KML和CZML格式，在文件内有明确的样式定义。为了学习，我们手动去创建样式。数据载入之后，我们依据这个 示例 遍历所有entity修改或者增加属性。我们的POI点默认都是使用 Billboards 和 Labels 显示, 根据下面的代码来修改某些entity的显示样式:

geocachePromise.then(function(dataSource) {
  // 把所有entities添加到viewer中显示
    viewer.dataSources.add(dataSource);

    // 获得entity列表
    var geocacheEntities = dataSource.entities.values;

    for (var i = 0; i < geocacheEntities.length; i++) {
        var entity = geocacheEntities[i];
        if (Cesium.defined(entity.billboard)) {
            // 对这个entity设置样式
        }
    }
}); 

通过调整锚点（anchor point）来改进显示效果，并且为了避免杂乱删除了文字标注（labels），最后设置了 displayDistanceCondition 控制只显示和相机一定距离内的点.

  if (Cesium.defined(entity.billboard)) {
            // 调整垂直方向的原点，保证图标里的针尖对着地表位置 
            entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
            // 去掉文字的显示
            entity.label = undefined;
            // 设置可见距离
            entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 20000.0);
        }

关于distanceDisplayCondition,可以学习下 sandcastle 示例.

下来，我们改进下 Infobox 。Infobox的标题栏显示的是entity的name属性, 它的内容显示的是description属性（使用HTML文本显示）。
你发现我们这个数据默认的description属性没什么意义，我们把这个属性更改为显示每个点的经纬度。
首先我们把entity的position属性转换为Cartographic，然后把经度和纬度构造一个HTML的table并赋值到description属性里。 现在单击我们的点在 Infobox 会显示一个格式规整的信息。

        if (Cesium.defined(entity.billboard)) {
           
            entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM; 
            entity.label = undefined; 
            entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 20000.0);
            // 计算经度和纬度（角度表示）
            var cartographicPosition = Cesium.Cartographic.fromCartesian(entity.position.getValue(Cesium.JulianDate.now()));
            var longitude = Cesium.Math.toDegrees(cartographicPosition.longitude);
            var latitude = Cesium.Math.toDegrees(cartographicPosition.latitude);
            // 修改描述信息 
            var description = '<table class="cesium-infoBox-defaultTable cesium-infoBox-defaultTable-lighter"><tbody>' +
                '<tr><th>' + "经度" + '</th><td>' + longitude.toFixed(5) + '</td></tr>' +
                '<tr><th>' + "纬度" + '</th><td>' + latitude.toFixed(5) + '</td></tr>' +
                '</tbody></table>';
            entity.description = description;
        }

最后效果:

修改description属性

或许把每个POI点所在的行政区展示出来非常有用。我们试着通过一个GeoJson文件来创建NYC的所有行政区域多边形。加载GeoJson和上面加载KML基本没什么区别，只是使用 GeoJsonDataSource 。和前面一样，也必须在promise的then函数里把数据添加到viewer.datasources 中，数据才能显示。

var geojsonOptions = {
    clampToGround : true
};
// 从geojson文件加载行政区多边形边界数据
var neighborhoodsPromise = Cesium.GeoJsonDataSource.load('./Source/SampleData/neighborhoods.geojson', geojsonOptions);
 
var neighborhoods;
neighborhoodsPromise.then(function(dataSource) { 
    viewer.dataSources.add(dataSource);
});

下来设置多边形数据的样式。和上面调整billboard样式一样，我们设置行政区域多边形也必须在数据完全载入后去做。

 
var neighborhoods;
neighborhoodsPromise.then(function(dataSource) {
  
    viewer.dataSources.add(dataSource);
    neighborhoods = dataSource.entities;

    // 获取enity列表遍历
    var neighborhoodEntities = dataSource.entities.values;
    for (var i = 0; i < neighborhoodEntities.length; i++) {
        var entity = neighborhoodEntities[i];

        if (Cesium.defined(entity.polygon)) {
            // 设置样式代码
        }
    }
});

首先，我们重新设置每个entity的name属性和行政区的名称相同。原始的GeoJson文件有一个neighborhood的属性。Cesium使用entity.properties来存储GeoJson的属性。所以我们这么设置：

// 设置样式代码
// 把properties里的neighborhood设置到name
entity.name = entity.properties.neighborhood;

为了避免所有多边形颜色都相同，可以使用一个随机颜色 Color去设置每个多边形的 ColorMaterialProperty属性。

// 设置一个随机半透明颜色
entity.polygon.material = Cesium.Color.fromRandom({
    red : 0.1,
    maximumGreen : 0.5,
    minimumBlue : 0.5,
    alpha : 0.6
});
// 设置这个属性让多边形贴地，ClassificationType.CESIUM_3D_TILE 是贴模型，ClassificationType.BOTH是贴模型和贴地
entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;

最后，我们再创建一个基本的文字标注 Label。 为了保证显示效果清晰，我们设置了一个 disableDepthTestDistance 确保这个标注不会被其他对象盖住。
可是，Label需要通过entity.position属性设置位置。但是Polygon 是有一个positions列表组成的边界，我们使用这个positions列表的中心点来计算。

 
// 获取多边形的positions列表 并计算它的中心点
var polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
entity.position = polyCenter;
// 生成文字标注
entity.label = {
    text : entity.name,
    showBackground : true,
    scale : 0.6,
    horizontalOrigin : Cesium.HorizontalOrigin.CENTER,
    verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
    distanceDisplayCondition : new Cesium.DistanceDisplayCondition(10.0, 8000.0),
    disableDepthTestDistance : 100.0
};

最终效果:

多边形的文字标注

最后，增加一个无人机飞跃城市上空的高科技效果。
因为飞行路径只是一系列带着时间属性的位置点，我们通过CZML 文件来加载。CZML是一种在Cesium里描述时序图形场景的文件格式。它包含折线（lines）、点（points）、图标（billboards）、模型（models）和其他图形元素，以及他们随时间变化的属性。如同Google Earth的KML，CZML通过一种描述性语言（基于json格式）来存储Cesium大部分的功能。

我们得CZML文件定义一个包含不同时刻得一个位置列表Entity（默认显示为一个point）。在Entity API中有一些处理时间序列数据的属性类型。参考下面的示例：

• Property Types 示例

// 从CZML中载入无人机轨迹
var dronePromise = Cesium.CzmlDsataSource.load('./Source/SampleData/SampleFlight.czml');

dronePromise.then(function(dataSource) {
    viewer.dataSources.add(dataSource);
});

这个CZML中使用 Path去展示无人机轨迹, 以及一个展示不同时刻位置的属性.。使用插值算法把一个路径的离散点链接为一个连续的折线。

我们继续改进下无人机的显示样式。我们可以用一个三维模型去表示我们的无人机，并把它设置到entity上，而不是仅仅用一个简单的点。

• 三维模型示例
• 三维模型带颜色示例

Cesium支持加载glTF格式的三维模型格式。glTF是一个由Cesium团队和 Khronos group一起开发的开源三维模型格式，这种格式尽量减少传输和实时处理过程中的模型数据量。如果没有glTF模型，我们提供了一个 在线转换工具 把DAE，obj等格式转为glTF。

我们载入一个效果不错的，又带动画的无人机模型 Model ：

var drone;
dronePromise.then(function(dataSource) {
    viewer.dataSources.add(dataSource);
    // 使用id获取在CZML 数据中定义的无人机entity
    drone = dataSource.entities.getById('Aircraft/Aircraft1');
    // 附加一些三维模型
    drone.model = {
        uri : './Source/SampleData/Models/CesiumDrone.gltf',
        minimumPixelSize : 128,
        maximumScale : 1000,
        silhouetteColor : Cesium.Color.WHITE,
        silhouetteSize : 2
    };
});

现在我们的模型看起来还不错，不像最初那个简单的点效果，这个无人机模型有方向，但是效果有点奇怪，并没有朝向无人机的前进方向。幸好，Cesium提供了VelocityOrientationProperty ，这个会根据entity的位置点信息和时间来自动计算朝向。

// 基于无人机轨迹的位置点，自动计算朝向
drone.orientation = new Cesium.VelocityOrientationProperty(drone.position);

现在我们的无人机模型朝向正确了。我们还可以改进下无人机飞行效果。Cesium依据离散点，使用线形插值构造了一条折线，虽然远处看不明显，但是这些折线段让路径看着不自然。有一些插值配置选项：

• 插值示例
  为了飞行路径更平滑，可以如下修改配置 :

// 光滑的路径插值
drone.position.setInterpolationOptions({
    interpolationDegree : 3,
    interpolationAlgorithm : Cesium.HermitePolynomialApproximation
});

平滑的飞行路径

3D Tiles

我们的团队有时候描述Cesium像一个使用真实世界数据的三维游戏引擎。可是，加载真实世界的数据要比游戏引擎的数据困难很多，主要因为真实数据有非常高得分辨率，而且要求精确得可视化。幸好，Cesium和开源社区合作开发了3D Tiles格式。它是一个流式载入海量各种类型得空间三维数据的 开放协议 。

使用一种类似Cesium的地形和影像数据切片技术，3d tiles格式使原先那些不可能做可视化交互的大模型数据能够展示出来，包括建筑物数据、CAD（或者BIM）模型，点云，倾斜模型。

• 3D Tiles 调试器 ，它是一个能够查看各种3d tile后台信息的调试工具。

这是一些不同类型的3d tile模型数据:

• 倾斜模型
• BIM数据
• 点云
• 所有类型

这个项目中，使用 Cesium3DTileset 类添加整个纽约的真实建筑物模型，改进了可视化效果的真实性。

// 加载纽约建筑物模型
var city = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(3839) }));

你会发现这些建筑物的高度好像不正确。这个可以简单修正下。通过一个 modelMatrix，我们可以调整这个数据的位置。
把数据当前的包围球转为Cartographic，就能计算出模型现在相对于地面的偏移，然后增加这个偏移值，然后重设modelMatrix:

// 调整3dtile模型的高度，让他刚好放在地表
var heightOffset = -32;
city.readyPromise.then(function(tileset) {
    // Position tileset
    var boundingSphere = tileset.boundingSphere;
    var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
    var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
    var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);
    var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
    tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
});

现在我们有了110万个建筑物模型。
3D Tiles 支持使用3D Tiles样式语言去对一部分数据进行样式配置。
3D Tiles的样式依据一个表达式，根据Cesium3DTileFeature模型属性去修改某一部分甚至某一栋建筑物的颜色（RGB和透明度）。这些元素属性（feature property）通常存储在每个模型切片的batchtable中。元素属性可以是任意属性，比如高度，名称，坐标，创建日期等等。样式语言使用JSON格式定义，并且支持JavaScript的表达式（a small subset of JavaScript augmented）。另外，样式语言提供了一些内置的函数，支持数学计算。

Cesium3DTileStyle示例如下:

var defaultStyle = new Cesium.Cesium3DTileStyle({
    color : "color('white')",
    show : true
});

这个样式只是简单的让纽约的所有建筑都可见。把它设置到 city.style就可以看到可视化效果。

city.style = defaultStyle;

默认效果

下面这个样式让模型半透明：

var transparentStyle = new Cesium.Cesium3DTileStyle({
    color : "color('white', 0.3)",
    show : true
});

半透明效果

所有元素使用相同样式只是小儿科。我们可以使用属性对每个元素设置不同样式。下面是一个依据建筑高度去着色的示例：

var heightStyle = new Cesium.Cesium3DTileStyle({
    color : {
        conditions : [
            ["${height} >= 300", "rgba(45, 0, 75, 0.5)"],
            ["${height} >= 200", "rgb(102, 71, 151)"],
            ["${height} >= 100", "rgb(170, 162, 204)"],
            ["${height} >= 50", "rgb(224, 226, 238)"],
            ["${height} >= 25", "rgb(252, 230, 200)"],
            ["${height} >= 10", "rgb(248, 176, 87)"],
            ["${height} >= 5", "rgb(198, 106, 11)"],
            ["true", "rgb(127, 59, 8)"]
        ]
    }
});

依据高度着色

为了在这些样式之间切换，我们增加一点点代码去监听HTML的输入框变化：

var tileStyle = document.getElementById('tileStyle');
function set3DTileStyle() {
    var selectedStyle = tileStyle.options[tileStyle.selectedIndex].value;
    if (selectedStyle === 'none') {
        city.style = defaultStyle;
    } else if (selectedStyle === 'height') {
        city.style = heightStyle;
    } else if (selectedStyle === 'transparent') {
        city.style = transparentStyle;
    }
}

tileStyle.addEventListener('change', set3DTileStyle);

如果想学习更多关于3D Tiles如何配置样式，请查看这个 示例。

一些其他3D Tiles的示例:

• 格式
• 倾斜模型
• 样式配置
  如果你有各种三维数据需要转换为3D tiles，请下载我们的CesiumLab。

交互

最后，我们添加一些鼠标交互。我们改进下效果，当鼠标划过的时候，高亮图标。 为了做出这个效果，我们使用拾取技术（picking），它能够根据一个屏幕上的像素位置返回三维场景中的对象信息。

有好几种拾取：

• Scene.pick : 返回窗口坐标对应的图元的第一个对象。
• Scene.drillPick :返回窗口坐标对应的所有对象列表。
• Globe.pick : 返回一条射线和地形的相交位置点。

这是一些示例:

• 拾取示例
• 3D Tiles 对象拾取
  因为我们想实现鼠标滑过的高亮效果，首先需要创建一个鼠标事件处理器。 ScreenSpaceEventHandler是可以处理一系列的用户输入事件的处理器. ScreenSpaceEventHandler.setInputAction()``](/Cesium/Build/Documentation/ScreenSpaceEventHandler.html#setInputAction) 监听某类型的用户输入事件 -- [ScreenSpaceEventType`用户输入事件类型，做为一个参数传递过去。这里我们设置一个回调函数来接受鼠标移动事件:

var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(movement) {}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

下来我们写高亮函数。我们可以在回调函数里获得一个窗口坐标，并传递到pick()方法里。 如果拾取到一个billboard对象，我们就知道目前鼠标在一个图标上了。然后使用我们前面学过的相关Entity接口，去修改它的样式做高亮效果。

// 当鼠标移到了我们关注的图标上，修改entity 的billboard 缩放和颜色
handler.setInputAction(function(movement) {
    var pickedPrimitive = viewer.scene.pick(movement.endPosition);
    var pickedEntity = (Cesium.defined(pickedPrimitive)) ? pickedPrimitive.id : undefined;
    // Highlight the currently picked entity
    if (Cesium.defined(pickedEntity) && Cesium.defined(pickedEntity.billboard)) {
        pickedEntity.billboard.scale = 2.0;
        pickedEntity.billboard.color = Cesium.Color.ORANGERED;
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

高亮样式设置成功了。可是，当鼠标不在图标上，这个高亮样式依然有效。为了解决这个问题，我们使用一个变量来存储上次的高亮图标，当鼠标不在它上面的时候，恢复它原来的样式。
这是包含高亮和不高亮完整功能的代码：

var previousPickedEntity = undefined;
handler.setInputAction(function(movement) {
    var pickedPrimitive = viewer.scene.pick(movement.endPosition);
    var pickedEntity = (Cesium.defined(pickedPrimitive)) ? pickedPrimitive.id : undefined;
    // 取消上一个高亮对象的高亮效果
    if (Cesium.defined(previousPickedEntity)) {
        previousPickedEntity.billboard.scale = 1.0;
        previousPickedEntity.billboard.color = Cesium.Color.WHITE;
    }
    // 当前entity高亮
    if (Cesium.defined(pickedEntity) && Cesium.defined(pickedEntity.billboard)) {
        pickedEntity.billboard.scale = 2.0;
        pickedEntity.billboard.color = Cesium.Color.ORANGERED;
        previousPickedEntity = pickedEntity;
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

好了，我们添加了完整的图标entity的鼠标交互响应。

鼠标交互

相机模式

为了炫耀我们的无人机飞行，我们来实验下相机模式。在两种相机模式下可以简单的切换：

• 自由模式 :默认的相机控制方式
• 无人机模式 : 以一个固定距离跟随无人机
  自由模式下不需要任何代码。无人机跟随模式下，我们使用viewer内置的跟随函数，确保相机一直居中观察无人机。这种模式下，即便对象是移动的，相机也能和目标之间保持一个固定的偏移距离。只需要简单的设置
  viewer.trackedEntity。
  切换到自由模式，只需要把viewer.trackedEntity 设置为undefined，然后可以使用camera.flyTo()返回到初始位置。

这是相机模式代码:

function setViewMode() {
    if (droneModeElement.checked) {
        viewer.trackedEntity = drone;
    } else {
        viewer.trackedEntity = undefined;
        viewer.scene.camera.flyTo(homeCameraView);
    }
}

只需要把这个函数绑定到HTML元素的change事件上。

var freeModeElement = document.getElementById('freeMode');
var droneModeElement = document.getElementById('droneMode'); 
function setViewMode() {
    if (droneModeElement.checked) {
        viewer.trackedEntity = drone;
    } else {
        viewer.trackedEntity = undefined;
        viewer.scene.camera.flyTo(homeCameraView);
    }
}

freeModeElement.addEventListener('change', setCameraMode);
droneModeElement.addEventListener('change', setCameraMode);

当我们双击entity的时候，就会自动进行跟随模式。如果用户通过点击跟踪无人机，添加一些处理去自动更新UI界面：

viewer.trackedEntityChanged.addEventListener(function() {
    if (viewer.trackedEntity === drone) {
        freeModeElement.checked = false;
        droneModeElement.checked = true;
    }
});

我们可以通过界面自由切换相机模式了:

相机模式

其他

剩下的代码我们增加一些其他的可视化效果。如同前面提到的HTML元素交互方式，我们可以添加阴影的切换界面，以及行政区多边形的可见性控制。
首先，简单的控制下行政区划的可见性。通常，通过设置Entity.show 属性来隐藏entity。可是，这个仅仅设置一个entity，我们希望一次性控制所有行政区划面的可见性。
可以像这个示例一样，把所有行政区entity放在一个父entity中，或者通过设置EntityCollection的 show 属性来控制。只需要设置一次neighborhoods.show属性即可控制所有entity的可见性。

var neighborhoodsElement =  document.getElementById('neighborhoods');

neighborhoodsElement.addEventListener('change', function (e) {
    neighborhoods.show = e.target.checked;
});

如同切换阴影一样：

var shadowsElement = document.getElementById('shadows');

shadowsElement.addEventListener('change', function (e) {
    viewer.shadows = e.target.checked;
});

因为3D Tiles数据可能不是瞬间载入，可以添加一个载入指示器，当所有切片都载入后隐藏。

// 当城市数据初始化完成后，移除加载指示器
var loadingIndicator = document.getElementById('loadingIndicator');
loadingIndicator.style.display = 'block';
city.readyPromise.then(function () {
    loadingIndicator.style.display = 'none';
});

接下来

恭喜！你已经成功完成了CesiumJS项目。在Cesium的培训过程中，请随意使用我们提供的代码去测试和开发。我们很高兴欢迎你加入Cesium社区，并且期望看到你基于CesiumJS开发的酷炫程序。

开发资源

为了你的Cesium开发事业，我们鼓励你访问下面的资源：

• 官方文档 : 完整的CesiumAPI文档，包含一些示例代码
• Sandcastle :一个所见即所得的编码环境，包含大量的代码示例.
• 官方教程 :详细描述基于Cesium开发的方方面面。
• 官方论坛 : Cesium相关问题的主要讨论平台.
• Cesium实验室 : 中国最专业的Cesium的讨论学习QQ群：595512567。
  一旦有问题，上面的资源可能有你的答案。

在cesiumjs.org展示你的项目

我们很乐意去分享所有Cesium社区创建的酷炫项目。遍布世界的的开发者创建了很多有意思的我们从来没考虑过的项目。一旦你的项目准备分享给全世界，请跟我们联系放到[CesiumJS示例页面] (https://cesiumjs.org/demos)。具体请阅读 这个博客提交你的项目示例。

中国最专业的Cesium开发者社区

转载自：https://www.jianshu.com/p/24ffa692aac3

相关推荐

• Cesium官方教程10–高级粒子特效 高级粒子系统特效
• Cesium官方教程3 — 空间数据可视化
• Cesium官方教程9–粒子系统 粒子系统介绍
• Cesium官方教程8– 几何体和外观效果 几何体和外观效果（Geometry and Appearances）
• Cesium官方教程12–材质（Fabric）
• Cesium官方教程5–地形图层