航线绘制封装、kmz文件操作封装、航线编辑修改

GuLiMmo

2024-03-04 d20068f8f1c0d1f7f4077c2fdd7d46e0f5216285

 src/utils/cesium/mapUtils.ts

@@ -1,11 +1,11 @@
import * as Cesium from 'cesium'

export function getLngLatDistance (
export const getLngLatDistance = (
  lat1: number,
  lng1: number,
  lat2: number,
  lng2: number,
) {
) => {
  const radLat1 = (lat1 * Math.PI) / 180.0
  const radLat2 = (lat2 * Math.PI) / 180.0
  const a = radLat1 - radLat2
@@ -24,7 +24,7 @@
}

// 获取限polyline长度
export function getPolylineLength (entity: any) {
export const getPolylineLength = (entity: any) => {
  let length = 0

  // 获取Polyline的所有顶点位置
@@ -43,3 +43,23 @@

  return length
}

// 创建三角广告牌
export const createTriangleMarker = (title: string | number, color: string) => {
  // 创建canvas绘制广告牌
  const billboard = document.createElement('canvas')
  billboard.width = 30
  billboard.height = 30
  const ctx: HTMLCanvasElement | any = billboard.getContext('2d')
  ctx.beginPath()
  ctx.moveTo(0, 0)
  ctx.lineTo(30, 0)
  ctx.lineTo(15, 22)
  ctx.fillStyle = color
  ctx.fill()
  ctx.font = '18px serif'
  ctx.fillStyle = '#ffffff'
  ctx.fillText(title, 10, 15)
  ctx.closePath()
  return billboard
}