@

cesium添加自定义点位图片TOC

cesium添加自定义点位图片

实现效果

1.点位图片获取：

链接地址

.

2.实现代码

import clusterBlue from '@/assets/map/cluster-point-blue.png'
import clusterYellow from '@/assets/map/cluster-point-yellow.png'
import clusterRed from '@/assets/map/cluster-point-red.png'
import clusterGreen from '@/assets/map/cluster-pont-green.png'

const clusterBlueImg = new Image(64, 64)
const clusterGreenImg = new Image(64, 64)
const clusterYellowImg = new Image(64, 64)
const clusterRedImg = new Image(64, 64)
clusterBlueImg.src = clusterBlue
clusterGreenImg.src = clusterGreen
clusterYellowImg.src = clusterYellow
clusterRedImg.src = clusterRed

function combineIconAndLabel (clusterNum: number, label: string, size: number) {
  // 创建画布对象
  const canvas = document.createElement('canvas')
  canvas.width = size
  canvas.height = size
  let clusterImg = clusterGreenImg
  if (clusterNum > 25 && clusterNum < 50) {
    clusterImg = clusterBlueImg
  } else if (clusterNum > 50 && clusterNum < 75) {
    clusterImg = clusterYellowImg
  } else if (clusterNum > 75) {
    clusterImg = clusterRedImg
  }
  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
  ctx.drawImage(clusterImg, 0, 0)
  ctx.fillStyle = Cesium.Color.WHITE.toCssColorString()
  ctx.font = 'bold 20px Microsoft YaHei'
  if (label.length > 2) {
    ctx.font = 'bold 16px Microsoft YaHei'
  }
  ctx.textAlign = 'center'
  ctx.textBaseline = 'middle'
  ctx.fillText(label, size / 2, size / 2)
  return canvas
}