new mars3d.graphic.PolylineEntity({根据线来计算或固化好实现沿线标注沿轨迹方向的文字效果

142 篇文章 2 订阅
126 篇文章 0 订阅

new mars3d.graphic.PolylineEntity({根据线来计算或固化好实现沿线标注沿轨迹方向的文字效果

把new mars3d.graphic.LabelEntity({文字拆成一个字对应一个Label对象,对象的点位根据线来计算或固化好。

相关代码:

function addDemoGraphic5(graphicLayer) {
  const graphic = new mars3d.graphic.PolylineEntity({
    positions: [
      [117.313682, 31.7416, 10.85],
      [117.311934, 31.774753, 19.71],
      [117.305473, 31.800304, 23.86]
    ],
    style: {
      width: 5,
      materialType: mars3d.MaterialType.PolylineDash,
      materialOptions: {
        color: Cesium.Color.BLUE,
        gapColor: Cesium.Color.YELLOW,
        dashPattern: parseInt("1111000000", 2)
      }
    },
    attr: { remark: "示例5" }
  })
  graphicLayer.addGraphic(graphic)


  addSplitLabel({
    positions: graphic.positionsShow,
    text: "合肥火星科技有限公司",
    step: 200
  })
}

function addSplitLabel(options) {
  const positions = options.positions
  const len = positions.length
  const text = options.text.split("") // 文本
  const step = options.step ?? 100 // 间隔 米

  let allDistance = 0
  for (let i = 1; i < len; i++) {
    const distance = Cesium.Cartesian3.distance(positions[i - 1], positions[i])
    positions[i]._distance = distance
    allDistance += distance
  }
  let startDistance = (allDistance - (text.length - 1) * step) / 2
  let thisDistance = 0

  function getTextPoint(pt1, pt2) {
    const temp = startDistance - thisDistance
    if (temp > 0) {
      const newpt = mars3d.PointUtil.getOnLinePointByLen(pt1, pt2, temp)
      textPoints.push(newpt)
      startDistance += step
    } else if (temp === 0) {
      textPoints.push(pt2)
      startDistance += step
    }
  }

  const textPoints = []
  for (let i = 1; i < len; i++) {
    const pt1 = positions[i - 1]
    const pt2 = positions[i]
    const distance = pt2._distance
    while (thisDistance + distance >= startDistance && textPoints.length < text.length) {
      getTextPoint(pt1, pt2)
    }
    if (textPoints.length >= text.length) {
      break
    }
    thisDistance += distance
  }

  textPoints.forEach((position, index) => {
    const graphic = new mars3d.graphic.LabelEntity({
      position: position,
      style: {
        text: text[index],
        font_size: 46, // 字号放大一倍
        scale: 0.5, // scale传0.5
        font_family: "楷体",
        color: "#00ffff",
        outline: true,
        outlineColor: "#000000",
        outlineWidth: 2,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM
      }
    })
    graphicLayer.addGraphic(graphic)
  })
}

实现效果:

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值