易笔记易笔记
首页
文章
分类
标签
首页
文章
分类
标签
cesium 2JS 2前端 1Electron 1PHP 1CSS 6ThreeJS 1Vue 3Vue3 3Windows 4
Cesium:为图形添加边框

翻遍Cesium文档未能发现border相关内容,但src支持canvas格式索性通过canvas添加图片。

/**
 * 为图形添加边框
 * @param entity cesium实体
 * @param url 图片地址
 * @param color 边框颜色
 */
export const addBorderToImage = (entity, url,color = 'green') => {
  const canvas = document.createElement('canvas');
  canvas.width = entity.billboard.width
  canvas.height = entity.billboard.height
  const ctx = canvas.getContext('2d')
  let image = new Image()
  image.crossOrigin = "anonymous";
  image.width = canvas.width
  image.height = canvas.height
  image.onload = () => {
    ctx.drawImage(image,0,0, canvas.width, canvas.height)
    ctx.strokeStyle = color
    ctx.lineWidth = 6
    ctx.rect(0,0,canvas.width,canvas.height)
    ctx.stroke()
    entity.billboard.image = canvas
  }
  image.src = url
}
分类: cesium标签: cesium
日期: 2023/3/25

Cesium:向固定方向平移

/**
 * 获取移动位置
 * @param {Cesium.Cartesian3} start 开始位置
 * @param {Cesium.Cartesian3} direction 移动方向和距离
 * @returns {*}
 */
export const getMovePosition = (start, direction) => {
  return Cesium.Matrix4.multiplyByPoint(
    Cesium.Transforms.eastNorthUpToFixedFrame(
      start
    ),
    direction,
    new Cesium.Cartesian3()
  )
}
分类: cesium标签: cesium
日期: 2023/7/22