Cesium 加载区域块

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

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

三、添加区域块

区域块的数据格式是geojson格式

区域块中的信息点击的默认样式会直接显示这个地方的经纬度,我们通过下一篇中的kml数据可以将信息自定义,也更加地完善。

同时,这个添加的方式是异步的,我们还应该设置其中心点的海拔,以及文字内容,通过遍历实现

//加载代码区块
var geojsonOptions = {
//贴地选项
clampToGround:true
};

// Load neighborhood boundaries from a GeoJson file
// Data from : https://data.cityofnewyork.us/City-Government/Neighborhood-Tabulation-Areas/cpf4-rkhq
var neighborhoodsPromise = Cesium.GeoJsonDataSource.load('/Assets/SampleData/sampleNeighborhoods.geojson', geojsonOptions);

// Save an new entity(实体) collection(收藏品) of neighborhood data
var neighborhoods;

// 在回调函数中进行操作
neighborhoodsPromise.then(function(dataSource) {
// Add the new data as entities to the viewer
viewer.dataSources.add(dataSource);
neighborhoods = dataSource.entities;

// Get the array of entities(提取出每个区块)
var neighborhoodEntities = dataSource.entities.values;
for (var i = 0; i < neighborhoodEntities.length; i++) {
var entity = neighborhoodEntities[i];

if (Cesium.defined(entity.polygon)) {
// Use kml neighborhood value as entity name
entity.name = entity.properties.neighborhood;
// Set the polygon material to a random, translucent color(修改多边形材质)
entity.polygon.material = Cesium.Color.fromRandom({
red : 0.1,
maximumGreen : 0.5,
minimumBlue : 0.5,
alpha : 0.6
});

// Tells the polygon to color the terrain. ClassificationType.CESIUM_3D_TILE will color the 3D tileset, and ClassificationType.BOTH will color both the 3d tiles and terrain (BOTH is the default)
entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN;

// Generate Polygon center(将中心点移到海拔为0的位置)
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;

// Generate labels(文字标签)
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
};
}
}
});

你可能感兴趣的:(Cesium)