Cesium中對geojson的處理
阿新 • • 發佈：2018-11-09
最近關注到cesium對json處理，有點小收穫，記錄下來，有不對的請指正。
Cesium讀取geojson
cesium支援topojson,GEOjson和普通的json格式，方法可以共用
一.topojson
<body> <div id="cesiumContainer"></div> <script> //載入topojson var viewer = new Cesium.Viewer('cesiumContainer'); //整體讀取 var promise= viewer.dataSources.add(Cesium.GeoJsonDataSource.load('../../Apps/china.topojson', { stroke: Cesium.Color.BLACK, fill: Cesium.Color.RED, strokeWidth: 3, markerSymbol: '?' })); viewer.flyTo(promise); </script> </body>
二.geojson
<body> <div id="cesiumContainer"></div> <script> var viewer = new Cesium.Viewer('cesiumContainer'); //Seed the random number generator for repeatable results. Cesium.Math.setRandomNumberSeed(0); var promise=Cesium.GeoJsonDataSource.load('../../Apps/testone.json'); promise.then(function(dataSource) { viewer.dataSources.add(dataSource); var entities = dataSource.entities.values; var colorHash = {}; //可對單個實體進行設定 for (var i = 0; i < entities.length; i++) { var entity = entities[i]; var name = entity.name; var color = colorHash[name]; if (!color) { color = Cesium.Color.fromRandom({ alpha : 1.0 }); colorHash[name] = color; } entity.polygon.material = color; entity.polygon.outline = false; entity.polygon.extrudedHeight =5000.0; } }); viewer.flyTo(promise); </script> </body>
三.普通json
<body> <div id="cesiumContainer"></div> <script> var viewer = new Cesium.Viewer('cesiumContainer'); Cesium.Math.setRandomNumberSeed(0); Cesium.loadJson('/../Apps/Points.json').then(function(jsonData) { for (var i =0 ;i<=jsonData.features.length-10; i++) { var ifeature=jsonData.features[i]; for (var k = 0;k<ifeature.geometry.paths[0].length-10; k++) { if (ifeature.geometry.paths[0][k].length==2) { viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(ifeature.geometry.paths[0][k] [0],ifeature.geometry.paths[0][k][1]), point : { pixelSize : 10, color :Cesium.Color.YELLOW } }); } } } }).otherwise(function(error) { }); </script> </body>
給geojson設定顏色與拉伸高度
//Seed the random number generator for repeatable results.
Cesium.Math.setRandomNumberSeed(0);
var promise = Cesium.GeoJsonDataSource.load('../../SampleData/test.json');
promise.then(function(dataSource) {
viewer.dataSources.add(dataSource);
//Get the array of entities
var entities = dataSource.entities.values;
var colorHash = {};
for (var i = 0; i < entities.length; i++) {
//For each entity, create a random color based on the state name.
//Some states have multiple entities, so we store the color in a
//hash so that we use the same color for the entire state.
var entity = entities[i];
var name = entity.name;
var color = colorHash[name];
if (!color) {
color = Cesium.Color.fromRandom({
alpha : 1.0
});
colorHash[name] = color;
}
//Set the polygon material to our random color.
entity.polygon.material = color;
//Remove the outlines.
entity.polygon.outline = false;
//Extrude the polygon based on the state's population. Each entity
//stores the properties for the GeoJSON feature it was created from
//Since the population is a huge number, we divide by 50.
entity.polygon.extrudedHeight = entity.properties.Shape_Area / 100000.0;
}
}
viewer.zoomTo(promise);
geojson按時間顯示
Cesium.GeoJsonDataSource.load('data/earthquake.geojson').then(function(dataSource) {
viewer.dataSources.add(dataSource);
var entities = dataSource.entities.values;
for (var i = 0; i < entities.length; i++) {
var entity = entities[i];
entity.billboard = undefined;
entity.point = new Cesium.PointGraphics({
color: Cesium.Color.RED,
pixelSize: 10
});
entity.availability = new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
start: Cesium.JulianDate.fromIso8601(entity.properties.date),
stop: addDay(Cesium.JulianDate.fromIso8601(entity.properties.date))
})]);
}
});
}); 可以看到只是多加了 entity.availability = ... 一項，這樣就能夠按照時間顯示，主要是其中的 start 和 stop 屬性，控制顯示的時間範圍。date 是 GeoJSON 中資料的一個欄位，格式為 '2008-01-01'，當然你也可以使用其他格式，在此處進行自定義處理即可，addDay 用於控制顯示一天，此處不用多考慮。
Cesium移除geojson資料
//移除全部
var len = viewer.dataSources.length;
if(len > 0){
console.log(len)
for(var n = 0; n < len; n++){
//每刪除一條viewer.dataSources，len就會減少1
viewer.dataSources.remove(viewer.dataSources.get(0));
}
}
//移除某一條
var dataSources = viewer.dataSources;
for (var i = 0; i < viewer.dataSources.length; i++) {
if (viewer.dataSources.get(i).name.indexOf("dz")!= -1) {
viewer.dataSources.remove(viewer.dataSources.get(i));
i--;
}
}
//看看viewer.dataSources.get(i)獲取到資料來源沒有