有時我們在某些項目時會用到比如不同的城市用不同色塊的划分
1.最基本的顏色顯示，效果如下
實現方法；比較簡單，話不多說直接奉上代碼
// 設置相機的位置
viewer.camera.setView({
destination: new Cesium.Cartesian3(-2901829.875235737, 6563113.216422777, 2505746.0713313515),
orientation: {
heading: 6.246860670169031, // east, default value is 0.0 (north)
pitch: -1.31247449966936, // default value (looking down)
roll: 0.0 // default value
}
});
viewer.dataSources.add(Cesium.GeoJsonDataSource.load('./SampleData/guangdong.json', {
stroke: Cesium.Color.WHITE,//設置多邊形輪廓的默認顏色
fill: Cesium.Color.RED.withAlpha(0.5),//多邊形的內部默認顏色
strokeWidth: 20,//輪廓的寬度
clamToGround: true//讓地圖貼地
}));
2.加載顏色的同時顯示城市的標簽，便簽的信息是從json文件里獲取的，效果如下
// 設置相機的位置
viewer.camera.setView({
destination: new Cesium.Cartesian3(-2901829.875235737, 6563113.216422777, 2505746.0713313515),
orientation: {
heading: 6.246860670169031, // east, default value is 0.0 (north)
pitch: -1.31247449966936, // default value (looking down)
roll: 0.0 // default value
}
});
Cesium.GeoJsonDataSource.load('./SampleData/guangdong.json').then(function (dataSource) {
viewer.dataSources.add(dataSource);//// 先添加對象
var entities = dataSource.entities.values;// 獲取所有對象
//console.log(entities);
for (var i = 0; i < entities.length; i++) {
var entity = entities[i];
// 得到每塊多邊形的坐標集合
var polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
// 根據坐標集合構造BoundingSphere獲取中心點坐標
var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
// 將中心點拉回到地球表面
polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
viewer.entities.add({
position: polyCenter,
label: {
font: '24px sans-serif',
text: entity.properties.name,
showBackground: true,
scale: 0.6,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
}
})
}
});
3.不同的省份，不同的顏色塊，我使用的是隨機，也可自定義。效果如下
Cesium.GeoJsonDataSource.load('./SampleData/guangdong.json').then(function (dataSource) {
viewer.dataSources.add(dataSource);
var entities = dataSource.entities.values;//獲取區塊
for (var i = 0; i < entities.length; i++) {
var entity = entities[i];
var color = Cesium.Color.fromRandom({ alpha: 0.6 });//隨機生成一個顏色且透明度為0.6
entity.polygon.material = color;//將隨機產生的顏色賦予多邊形
entity.polygon.outline = false;//是否顯示多邊形的輪廓
}
})
4.在便簽上添加人口的數量
本次人口的數據我是在后台寫了個接口訪問數據，網上方法很多，具體方法可百度
代碼
var guangdongEntity = res.body;//獲取數據庫數據的數組對象
Cesium.GeoJsonDataSource.load('./SampleData/guangdong.json').then(function (dataSource) {
viewer.dataSources.add(dataSource);//添加實體（數據塊）對象 沒有將無法加載數據塊，標簽例外
var entities = dataSource.entities.values;//獲取數據里的所有對象
console.log(entities);
for (var i = 0; i < entities.length; i++) {
var entity = entities[i];
var persons = guangdongEntity[i].persons;//獲取數據庫里的人口值
var color = null;
if (persons <= 200) {
color = Cesium.Color.fromCssColorString("#fff2d3").withAlpha(0.6);
} else if (persons <= 400) {
color = Cesium.Color.fromCssColorString("#fed976").withAlpha(0.6);
} else if (persons <= 700) {
color = Cesium.Color.fromCssColorString("#feb337").withAlpha(0.6);
} else if (persons <= 1000) {
color = Cesium.Color.fromCssColorString("#fe9914").withAlpha(0.6);
} else if (persons <= 1600) {
color = Cesium.Color.fromCssColorString("#e56213").withAlpha(0.6);
} else {
color = Cesium.Color.fromCssColorString("#cb2f11").withAlpha(0.6);
}
entity.polygon.material = color;//將顏色賦予多邊形
entity.polygon.outline = false;//是否顯示邊框
var polyPositions = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
viewer.entities.add({
position: polyCenter,
label: {//標簽
font: "24px sans-serif",
text: entity.properties.name + "人口（" + persons + "w）",
showBackground: true,
scale: 0.6,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM
}
})
}
5.根據人口的大小設定顏色塊的高度(更直觀)
代碼如下
var guangdongEntity = res.body;//獲取數據庫數據的數組對象
console.log(guangdongEntity);
Cesium.GeoJsonDataSource.load('./SampleData/guangdong.json').then(function (dataSource) {
viewer.dataSources.add(dataSource);//添加對象
var entities = dataSource.entities.values;//獲取數據塊所有對象
for (var i = 0; i < entities.length; i++) {
var entity = entities[i];
var persons = guangdongEntity[i].persons;//獲取人數
// var color=null;
// if(persons<=500){
// color=Cesium.Color.fromCssColorString("#e35f1c").withAlpha(0.6);
// }else if(persons<=700){
// color=Cesium.Color.fromCssColorString("#9a8d25").withAlpha(0.6);
// }else if(persons<=900){
// color=Cesium.Color.fromCssColorString("#2d7d57").withAlpha(0.6);
// }else if(persons<=1100){
// color=Cesium.Color.fromCssColorString("#0fe8d9").withAlpha(0.6);
// }else if(persons<=1300){
// color=Cesium.Color.fromCssColorString("#003e78").withAlpha(0.6);
// }else if(persons<1500){
// color=Cesium.Color.fromCssColorString("#6f1f72").withAlpha(0.6);
// }else if(persons<=1700){
// color=Cesium.Color.fromCssColorString("#e77fb0").withAlpha(0.6);
// }
var color = Cesium.Color.fromRandom({ alpha: 0.6 });//隨機生成一個顏色且透明度為0.6
entity.polygon.material = color;//設置顏色
entity.polygon.outline = false;//是否顯示邊框
entity.polygon.extrudedHeight = (guangdongEntity[i].persons) * 100;//設置多邊形色塊的高度
var JulianDate = Cesium.JulianDate.now();//獲取朱利安時間（北京時間-8
var polyPositions = entity.polygon.hierarchy.getValue(JulianDate).positions;//
var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;//獲取多邊形的中心
polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
polyCenter = Cesium.Cartographic.fromCartesian(polyCenter);
polyCenter.height = (guangdongEntity[i].persons) * 100 + 10;//設置標簽高度
polyCenter = Cesium.Cartographic.toCartesian(polyCenter);
viewer.entities.add({
position: polyCenter,//多邊形中心點的位置
label: {//標簽
font: "20px sans-serif",
text: entity.properties.name + "人口（" + persons + "w）",
showBackground: true,
scale: 0.6,//標簽的大小的放大倍數
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM/
}
})
}
})