易笔记易笔记
首页
文章
分类
标签
首页
文章
分类
标签
AI 1GitHub 1开源 1游戏开发 1Claude Code 1工作流 1AI 编程 1效率工具 1LangChain 1Prompt 1Frontend 1cesium 2CSS 10iOS 1Safari 1css 1font 1typography 1ide 1Flexbox 1JS 3ThreeJS 23D 2PHP 1Vue 8Windows 4KMS 1Vue3 5uni-app 1Form 1Modal 1虚拟滚动 1Vue 3 1Composition API 1ref 1reactive 1美食 1空气炸锅 1烤鱼 1减脂餐 1JavaScript 1浏览器 API 1requestIdleCallback 1性能优化 2组件 1异步组件 1
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
日期: 3/25/2023

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
日期: 7/22/2023