Cesium第五天

在之前的文章中我们加载了站牌模型，现在我们来把站牌的名称加载显示出来，

    viewer.entities.add({
      position: item,
      label: {
        text: pointName[index],
        font: '10px',
        fillColor: Cesium.Color.YELLOW.withAlpha(0.8),
        backgroundColor: Cesium.Color.PURPLE.withAlpha(0.7),
        showBackground: true,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
      }
    })

font是字体大小，fillcolor是字体颜色，backgroundcolor是背景颜色，verticalOrigin是设置位置垂直，我们也可以把这段代码加入到我们的模型代码中，具体的完整代码如下

<script setup lang="ts">
import * as Cesium from 'cesium'
import { onMounted } from 'vue'
import load from '@/assets/load.json'
// import o from '@/assets'
let viewer:Cesium.Viewer
const layer = new Cesium.UrlTemplateImageryProvider({
  url:'http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
  minimumLevel:4,
  maximumLevel:18
})
onMounted(() => {
  viewer = new Cesium.Viewer('cesiumContainer', {
    geocoder: false,
    homeButton: false,
    baseLayerPicker: false,
    navigationHelpButton: false,
    animation: false,
    timeline: false,
    fullscreenButton: false,
    imageryProvider:layer
  })
  viewer.imageryLayers.addImageryProvider(layer)
  initData()
})
const initData = () => {
  // 线路
  const positions:Array<Cesium.Cartesian3> = []
  const xArr = load.xs.split(',')
  // console.log(xArr)
  const yArr = load.ys.split(',')
  // console.log(yArr)
  xArr.forEach((item,index) => {
    positions.push(Cesium.Cartesian3.fromDegrees(Number(item),Number(yArr[index])))
  })
  // console.log(positions)
  const line = viewer.entities.add({
    polyline: {
      positions,
      width:5,
      material:Cesium.Color.GREEN.withAlpha(0.6),
      clampToGround:true
    }
  })
  viewer.flyTo(line)
  // 站牌
  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.BLUE.withAlpha(0.5)
      }
    })
  })
  // console.log('@@@@@@@@@',load.stations)
  const degree = 90
  // 航向，俯仰角。翻滚角
  const heading = Cesium.Math.toRadians(degree)
  const pitch = 0
  const roll = 0
  const hpr = new Cesium.HeadingPitchRoll(heading,pitch,roll)
  // console.log(hpr)
  // 拿出站牌名称
  const pointName:Array<string> = []
  load.stations.forEach((item) => {
    const name = item.name
    // console.log(name)
    pointName.push(name)
  })
  // console.log(pointName)
  pointArr.forEach((item,index) => {
    // console.log(item)
    // 站牌模型
    viewer.entities.add({
      position:item,
      orientation:Cesium.Transforms.headingPitchRollQuaternion(item,hpr),
      model:{
        uri:'/src/assets/model/model.gltf',
        minimumPixelSize:1,
        scale:0.5,
        heightReference:Cesium.HeightReference.CLAMP_TO_GROUND
      },
      // 站牌名称
      label:{
        text:pointName[index],
        font:'10px',
        fillColor:Cesium.Color.YELLOW.withAlpha(0.8),
        backgroundColor:Cesium.Color.PURPLE.withAlpha(0.7),
        showBackground:true,
        verticalOrigin: Cesium.VerticalOrigin.TOP
      }
    })

    // viewer.entities.add({
    //   position: item,
    //   label: {
    //     text: pointName[index],
    //     font: '10px',
    //     fillColor: Cesium.Color.YELLOW.withAlpha(0.8),
    //     backgroundColor: Cesium.Color.PURPLE.withAlpha(0.7),
    //     showBackground: true,
    //     verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    //   }
    // })
  })
}
</script>
<template>
  <div id="cesiumContainer"></div>
</template>



<style>
#cesiumContainer{
  width: 100%;
  height: 100vh;
}

</style>