Cesium第四天

在上一篇中我们加载了公交车路线图，今天我们加载公交车站牌点并添加模型，在GeoJSON中，站牌是xy_coord属性，我们对该属性进行操作

  const pointArr:Array<Cesium.Cartesian3> = []
  load.stations.forEach((item) => {
    // console.log(item.xy_coords)
    const xyArr = item.xy_coords.split(';')
    // console.log(xyArr)
    pointArr.push(Cesium.Cartesian3.fromDegrees(Number(xyArr[0]),Number(xyArr[1])))
  })
  // console.log(pointArr)
  pointArr.forEach((item) => {
    viewer.entities.add({
      position:item,
      point:{
        pixelSize:10,
        color:Cesium.Color.RED
      }
    })
  })

在这里需要注意，如果使用load.stations.xy_coords是访问不到属性的，因为stations是一个对象，该对象里的每一个对象才有xy_coords属性，所以我们这里使用的是forEach方法，对其进行遍历，再通过split方法拿到数组，在这里补充一下，我们在后面可以加上.map((a) => Number(a))，后面再书写时就不用再进行转换了，这样就得到了一个点坐标的数组pointArr,然后在页面进行渲染，这里需要注意，因为点数据渲染需要的是单个点坐标，这边传入数组则会报错，我们需要再对pointArr进行遍历，最后就能在页面中渲染出来了。

点数据渲染以后，我们就在此基础上加载站台模型，通过entities.add方法添加，在添加模型前，为其设置航向，俯仰角和翻滚角，

  const degree = 90
  // 航向，俯仰角。翻滚角
  const heading = Cesium.Math.toRadians(degree)
  const pitch = 0
  const roll = 0

 然后通过cesium的headingPitchRoll方法对其进行转换，

  const hpr = new Cesium.HeadingPitchRoll(heading,pitch,roll)

由于模型也只能加载单个的坐标数据，我们也使用forEach方法进行遍历，然后添加position属性，orientation属性，

  pointArr.forEach((item) => {
    viewer.entities.add({
      position:item,
      orientation:Cesium.Transforms.headingPitchRollQuaternion(item,hpr),
      model:{
        uri:'/src/assets/model/model.gltf',
        minimumPixelSize:1,
        scale:0.5,
        // color:Cesium.Color.RED,
        heightReference:Cesium.HeightReference.CLAMP_TO_GROUND
      }
    })
  })

uri是我们的文件地址，记住不是url，minimumPixelSize:是最小缩放比例，scale是比例尺，设置heightReference设置模型贴地。