cesium创建图标/图片

创建预警标志

    createWarnBill(uav, warnType) {
      this.$nextTick(() => {
          //避免重复加载
        const warnBillIndex = this.WarnBillList.findIndex(file => file.index === uav.warnId);
        if (warnBillIndex == -1) {
          warnIconDataSource = new Cesium.CustomDataSource('warnIconDataSource')
          this.WarnBillList.push({ dataSource: eqpDataSource, index: uav.warnId })
          window.cesiumViewer.dataSources.add(warnIconDataSource)

          warnIconDataSource.entities.add({
            position: Cesium.Cartesian3.fromDegrees(parseFloat(uav.longitude), parseFloat(uav.latitude), 1000.0),
            billboard: {
              id: `${uav.warnId}_${Math.random()}`,
              // 是否显示
              show: true,
              // 图像地址，URI或Canvas的属性
              image: `http://${window.location.host}/warn.png`,
              height: 32,
              width: 32,
              // 设置与相机的距离，在该距离处禁用深度测试
              disableDepthTestDistance: Number.POSITIVE_INFINITY,
              // 设置贴地
              heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            },
            label: {
              font: '900 16px MicroSoft YaHei',
              backgroundColor: Cesium.Color.fromCssColorString('#30415645'),
              showBackground: true,
              text: `${warnType}\n${uav.longitude} , ${uav.latitude}`,
              horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              pixelOffset: new Cesium.Cartesian2(20, 27),
              disableDepthTestDistance: Number.POSITIVE_INFINITY,
              heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            },
          });
        }
        this.setMapCenter(uav)
      })
    },