cesium + vue学习之加载和样式化实体
cesium + vue学习之加载和样式化实体
Cesium中的所有空间数据都使用Entity API来表示。Entity API以一种有效提供灵活的可视化的方式，以便对Cesium进行渲染。Cesium Entity是可以与样式化图形表示配对并定位在空间和时间上的数据对象。
1.不同entity类型的例子：
（1）Polygon ：https://sandcastle.cesium.com/index.html?src=Polygon.html&label=Geometries
（2）Polyline ： https://sandcastle.cesium.com/index.html?src=Polyline.html&label=Geometries
（3）Billboard ：https://sandcastle.cesium.com/index.html?src=Billboards.html
（4）Labe ：https://sandcastle.cesium.com/index.html?src=Labels.html&label=Beginner
var Cesium = this.$Cesium;
// 访问令牌
Cesium.Ion.defaultAccessToken = 'your token';
// 使用' cesiumContainer ' ID将HTML元素中的Cesium查看器nitialize
var viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: Cesium.createWorldTerrain()
});
var blueBox = viewer.entities.add({
name: "Blue box",
position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
box: {
dimensions: new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),
material: Cesium.Color.BLUE,
},
});
viewer.zoomTo(viewer.entities);
- 要读取数据文件，需要创建适合于数据格式的数据源DataSource，该数据源将解析在指定URL中承载的数据文件，并为数据集中的每个地理空间对象创建包含Entity的EntityCollection。DataSource只是定义了一个接口——您需要的数据源的确切类型将取决于数据格式。比如：
ar Cesium = this.$Cesium;
// 访问令牌
Cesium.Ion.defaultAccessToken = ‘your token’;
// 使用' cesiumContainer ' ID将HTML元素中的Cesium查看器nitialize
var viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: Cesium.createWorldTerrain()
});
var kmlOptions = {
camera : viewer.scene.camera,
canvas : viewer.scene.canvas,
clampToGround : true
};
// 使用异步函数的PromiseAPI
var geocachePromise = Cesium.KmlDataSource.load('https://gist.githubusercontent.com/rahwang/bf8aa3a46da5197a4c3445c5f5309613/raw/04e17770dd552fd2694e2597986fd480b18b5014/sampleGeocacheLocations.kml', kmlOptions);
// 从geocachePromise中解析标记点 并转化为 Cesium中的 实体对象（entity)
geocachePromise.then(function(dataSource) {
// 将新数据作为实体添加到查看器
viewer.dataSources.add(dataSource);
});
- 手动设计我们的实体:
（1）先等待我们的数据源加载，然后迭代数据源集合中的所有实体，修改和添加属性。默认情况下，我们的geocache点标记被创建为Billboards和Label
（2）改进信息框Infobox，显示为HTML，更新它们来显示点的经度和纬度，首先，我们将实体的位置转换成地图，然后从Cartographic中读取经度和纬度，并将其添加到HTML表中的描述中。在单击时，我们的geocache 实体现在将显示一个格式良好的信息框Infobox，只需要我们所需要的数据。
（3）视化特定点的邻域，为每个纽约街区记载一个包含多边形的GeoJson文件，调整neighborhood多边形样式
（4）我们为每个实体生成一个带有一些基本样式选项的标签Label。为了保持整洁，我们可以使用disableDepthTestDistance让Cesium总是把标签放在任何3D物体可能遮挡的地方。
（5）最后，让我们通过在城市上空添加无人机飞行来增加我们的NYC geocaches 的高科技视角。CZML是一种用于描述时间动态图形场景的格式，主要用于在运行Cesium的Web浏览器中显示。它描述了线、点、billboards、模型和其他图形原语，并指定它们如何随时间变化。
mounted() {
var Cesium = this.$Cesium;
// 访问令牌
Cesium.Ion.defaultAccessToken = 'your token';
// 使用' cesiumContainer ' ID将HTML元素中的Cesium查看器nitialize
var viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: Cesium.createWorldTerrain()
});
/* ======== 1、设置地形 ========= */
viewer.terrainProvider = Cesium.createWorldTerrain({
requestWaterMask : true, // 是否需要请求额外的水数据
requestVertexNormals : true //是否需要请求额外的光数据
});
viewer.scene.globe.depthTestAgainstTerrain=true;//深度显示（用于湖泊河流 水深对周围景观的影响）
viewer.scene.globe.enableLighting=true;//全局日照（受太阳，月亮的位置而影响光照信息）
/* ====== 2、配置视窗 ======= */
// 光照将会随着每天时间的变化而变化
viewer.scene.globe.enableLighting = true;
// 创建一个初始的相机视图，使用Cartesian3和HeadingpitchRoll指定相机的位置和方向:
var initialPosition = new Cesium.Cartesian3.fromDegrees(-73.998114468289017509, 40.674512895646692812, 2631.082799425431);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(7.1077496389876024807, -31.987223091598949054, 0.025883251314954971306);
var homeCameraView = {
destination : initialPosition,
orientation : {
heading : initialOrientation.heading,
pitch : initialOrientation.pitch,
roll : initialOrientation.roll
}
}
// 设置初始视图，俯瞰曼哈顿
viewer.scene.camera.setView(homeCameraView);
// 修改home按钮默认视角为俯瞰曼哈顿的初始视角
// 添加一些相机飞行动画选项
homeCameraView.duration = 2.0;
homeCameraView.maximumHeight = 2000;
homeCameraView.pitchAdjustHeight = 2000;
homeCameraView.endTransform = Cesium.Matrix4.IDENTITY;
// 覆盖默认的主页按钮
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function(e) {
e.cancel = true;
viewer.scene.camera.flyTo(homeCameraView);
});
// 设置时间和时间表。
viewer.clock.shouldAnimate = true; // 使动画播放时，观众开始
viewer.clock.startTime = Cesium.JulianDate.fromIso8601("2020-11-25T09:00:00Z");
viewer.clock.stopTime = Cesium.JulianDate.fromIso8601("2020-11-25T11:20:00Z");
viewer.clock.currentTime = Cesium.JulianDate.fromIso8601("2020-11-25T09:00:00Z");
viewer.clock.multiplier = 200; // 设置一个加速
viewer.clock.clockStep = Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER; // computation的计算模式
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; // 循环结束
viewer.timeline.zoomTo(viewer.clock.startTime, viewer.clock.stopTime); // 组可见范围
/* ==== 3、加载和样式化实体 ==== */
var kmlOptions = {
camera : viewer.scene.camera,
canvas : viewer.scene.canvas,
clampToGround : true
};
// 使用异步函数的PromiseAPI
var geocachePromise = Cesium.KmlDataSource.load('https://gist.githubusercontent.com/rahwang/bf8aa3a46da5197a4c3445c5f5309613/raw/04e17770dd552fd2694e2597986fd480b18b5014/sampleGeocacheLocations.kml', kmlOptions);
// 从geocachePromise中解析标记点 并转化为 Cesium中的 实体对象（entity)
geocachePromise.then(function(dataSource) {
// 将新数据作为实体添加到查看器
viewer.dataSources.add(dataSource);
// 获取实体数组
var geocacheEntities = dataSource.entities.values;
for (var i = 0; i < geocacheEntities.length; i++) {
var entity = geocacheEntities[i];
if (Cesium.defined(entity.billboard)) {
// 这里的实体样式代码：调整它们的锚点、去除标签来减少clutter和设置isplayDistanceCondition来改善标记的外观，使得只有在距相机的一定距离内的点是可见的。
// 调整垂直原点，使pin位于地形上
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 = '' +
'' + "Longitude" + ' ' + longitude.toFixed(5) + ' ' + "Latitude" + ' ' + latitude.toFixed(5) + ' ' +
'' + "Longitude" + ' ' + longitude.toFixed(5) + ' ' + "Latitude" + ' ' + latitude.toFixed(5) + '
';
entity.description = description;
}
}
});
/* 加载GeoJson数据 ，添加邻近区图形 从GeoJson文件中获取数据 由GeoJsonDataSource数据加载器加载 */
var geojsonOptions = {
clampToGround : true
};
// 从Geojson文件中获取 多边形 边界信息数据
var neighborhoodsPromise = Cesium.GeoJsonDataSource.load('https://gist.githubusercontent.com/rahwang/2c421916bb955ca722a4dbc8ab079c76/raw/ae8a1c5680fbd2fc6940dd3a8f941ad397bdc085/sampleNeighborhoods.geojson', geojsonOptions);
//从neighborhoodsPromise 数据源转化为Cesium中的数据实体entity
var neighborhoods;
neighborhoodsPromise.then(function(dataSource) {
// 数据源添加到实际场景viewer 中的dataSources数据源中
viewer.dataSources.add(dataSource);
neighborhoods = dataSource.entities;
// 遍历neighborhood 数据源实体
var neighborhoodEntities = dataSource.entities.values;
for (var i = 0; i < neighborhoodEntities.length; i++) {
var entity = neighborhoodEntities[i];
if (Cesium.defined(entity.polygon)) {
// 使用geojson邻居值作为实体名称
entity.name = entity.properties.neighborhood;
// 将多边形材质设置为随机的半透明颜色。
entity.polygon.material = Cesium.Color.fromRandom({
red : 0.1,
maximumGreen : 0.5,
minimumBlue : 0.5,
alpha : 0.6
});
// 告诉多边形给地形着色。ClassificationType。CESIUM_3D_TILE将为3D tileset着色，和ClassificationType。都将为3d贴片和地形着色(都是默认值)
entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;
// 计算生成polygon的中心位置
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.CzmlDataSource 数据加载器加载飞行路径信息**/
// 从czml文件中加载数据
var dronePromise = Cesium.CzmlDataSource.load('https://gist.githubusercontent.com/rahwang/0d1afa6f9e5aa342cb699d26851d97df/raw/5fec1c0cebc097661579143096e796a097c9b629/sampleFlight.czml');
dronePromise.then(function(dataSource) {
viewer.dataSources.add(dataSource);
// 使用在CZML数据中定义的id获取实体
drone = dataSource.entities.getById('Aircraft/Aircraft1');
// drone = dataSource.entities.values[0];
// 加载一个gtlf格式的3D模型
drone.model = {
uri : 'https://gist.githubusercontent.com/rahwang/9843cb77fc1c6d07c287566ed4e08ee3/raw/dc3a9ff6fc73b784519ac9371c0e2cbd3ab3dc47/CesiumDrone.gltf',
minimumPixelSize : 128,
maximumScale : 1000,
silhouetteColor : Cesium.Color.WHITE,
silhouetteSize : 2
};
// 实时计算飞行时，模型的巡航角度
drone.orientation = new Cesium.VelocityOrientationProperty(drone.position);
// 圆滑路径，使路径相对平滑过渡 插值过渡
drone.position.setInterpolationOptions({
interpolationAlgorithm : Cesium.HermitePolynomialApproximation, //插值算法
interpolationDegree : 2
});
//3D笛卡尔坐标点
drone.viewFrom = new Cesium.Cartesian3(-30, 0, 0);
});
},
你可能感兴趣的:(cesium,vue)