Cesium学习笔记（17）

Cesium加载各种各种数据

Cesium加载GeoJSON数据

使用GeoJsonDataSource的load加载geojson（在线的geojson也可以，填入url就行）

  let geoj = Cesium.GeoJsonDataSource.load('./Geojson/江西省.json', {
    stroke: Cesium.Color.RED,
    fill: Cesium.Color.PINK.withAlpha(0.5),
    strokeWidth: 3,
  });
  //geoj是一个promise对象      
  geoj.then((data) => {
    viewer.dataSources.add(geoj);
  })

我们国家的geojson数据可以从这里下载DataV.GeoAtlas地理小工具系列

修改GeoJson数据的样式

  let geoj = Cesium.GeoJsonDataSource.load('./Geojson/江西省.json', {
    stroke: Cesium.Color.RED,
    fill: Cesium.Color.PINK.withAlpha(0.5),
    strokeWidth: 3,
  });
  //geoj是一个promise对象    可以使用then方法获取到数据源
  geoj.then((data) => {
    viewer.dataSources.add(data);
    let entities = data.entities.values;
    console.log(entities)
    entities.forEach((entity)=>{
      console.log(entity)
      //给每个entity的polygon设置一个随机颜色
   entity.polygon.material=Cesium.Color.fromRandom({alpha:0.5});
      entity.polygon.outline=false;
      let randNum=parseInt(Math.random()*entities.length)
      entity.polygon.extrudedHeight=10000*randNum;
    })
    viewer.dataSources.add(geoj);
    viewer.zoomTo(entities);
  })

打印data,有一个entities属性。其实就是Entity数组

打印data.entities。其中的values属性存储了Entity数据，每个Entity里面包含着一个图形（Graphics）

polygonGraphics的属性

挤出高度、填充、高度、轮廓、轮廓颜色、轮廓宽度等等

加载KML数据

和geojson加载方式差不多，不过是使用KmlDataSource

  let kmldata=Cesium.KmlDataSource.load('./kml/facilities/facilities.kml')
  kmldata.then((data)=>{
    // console.log(data.entities.values[0])
    viewer.dataSources.add(data);
  })

需要注意的是kml文件夹组成 图标需要放在kml文件一个目录下，kml中包含了图标路径

加载kmz数据

和kml数据加载一样，不过kmz包含的东西好像比kml多。

  let kmldata=Cesium.KmlDataSource.load('./kml/gdpPerCapita2008.kmz')
  kmldata.then((data)=>{
    // console.log(data.entities.values[0])
    viewer.dataSources.add(data);
    // viewer.zoomTo(data.entities);
  })

kml和kmz数据介绍

xxxxx

加载CZML数据

可以直接加载对象形式的czml变量

  const czml = [
  {
    id: "document",
    name: "box",
    version: "1.0",
  },
  {
    id: "shape1",
    name: "Blue box",
    position: {
      cartographicDegrees: [-114.0, 40.0, 300000.0],
    },
    box: {
      dimensions: {
        cartesian: [400000.0, 300000.0, 500000.0],
      },
      material: {
        solidColor: {
          color: {
            rgba: [0, 0, 255, 255],
          },
        },
      },
    },
  },
];

const dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);

也可以本地加载czml文件

const czmlurl="./CZML/box.czml"

const dataSourcePromise = Cesium.CzmlDataSource.load(czmlurl);
dataSourcePromise.then((dataSource) =>{
  viewer.dataSources.add(dataSource);
  viewer.flyTo(dataSource);
})

czml文件 里面的内容和上面的一样

使用CZML创建动态场景

const czml=[
  {
    id:"document",
    name:"CZML Point",
    version:"1.0"
  },
  {
    id:"point",
    //该point运动的时间范围
    availability:"2012-08-04T16:00:00Z/2012-08-04T16:05:00Z",
    position:{
      //point运动的起始时间
      epoch:"2012-08-04T16:00:00Z",
      //point运动的轨迹  什么时间点什么坐标  四个值为一组  第一个为规定的时间范围内的第0秒  第二个为经度  第三个为纬度  第四个为高度
      cartographicDegrees:[0,-70, 20, 150000,100,-80,44,150000,200,-90,18,150000,300,-98,52,150000]
    },
    point:{
      pixelSize:10,
      color:Cesium.Color.RED,
      outlineColor:Cesium.Color.YELLOW,
      outlineWidth:2
    }
  }
]

const dataSourcePromise = Cesium.CzmlDataSource.load(czml);
dataSourcePromise.then((dataSource) =>{
  viewer.dataSources.add(dataSource);
  // viewer.flyTo(dataSource);
})

点击动画开启

也可以使用Viewer的属性 shouldAnimate