Cesium 加载KML数据,显示标签信息

一、创建服务器(看第一篇笔记)

二、加载影像和地形数据(看视角篇)

三、添加区域块 (区域块篇)

四、加载KML

数据格式是kml格式

自定义KML数据和其显示的样式,我们要求

在description属性中添加想要表示的信息

 // 加载kml数据,更改description信息,多了黄色的标签里面包含的
 var kmlOptions = {
 camera : viewer.scene.camera,
 canvas : viewer.scene.canvas,
 clampToGround : true
 };
 // Load geocache points of interest from a KML file
 // Data from : http://catalog.opendata.city/dataset/pediacities-nyc-neighborhoods/resource/91778048-3c58-449c-a3f9-365ed203e914
 var geocachePromise = Cesium.KmlDataSource.load('/Assets/SampleData/sampleGeocacheLocations.kml', kmlOptions);

// Add geocache billboard entities to scene and style them
geocachePromise.then(function(dataSource) {
// Add the new data as entities to the viewer
viewer.dataSources.add(dataSource);

// Get the array of entities
var geocacheEntities = dataSource.entities.values;

for (var i = 0; i < geocacheEntities.length; i++) {
var entity = geocacheEntities[i];
if (Cesium.defined(entity.billboard)) {
// Adjust the vertical origin so pins sit on terrain
entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
// Disable the labels to reduce clutter
entity.label = undefined;
// Add distance display condition
entity.billboard.distanceDisplayCondition = new Cesium.DistanceDisplayCondition(10.0, 20000.0);
// Compute latitude and longitude in degrees
var cartographicPosition = Cesium.Cartographic.fromCartesian(entity.position.getValue(Cesium.JulianDate.now()));
var latitude = Cesium.Math.toDegrees(cartographicPosition.latitude);
var longitude = Cesium.Math.toDegrees(cartographicPosition.longitude);

// Modify description(将信息添加到description描述信息中,我们这里只添加经纬度)
var description = ''+''+''+'
' + "Longitude" + '' + longitude.toFixed(5) + '
' + "Latitude" + '' + latitude.toFixed(5) + '
'
; entity.description = description; } } });

你可能感兴趣的:(Cesium)