初始影像

框架支持超过30种几何的态势标绘

几何类型

INFO

支持

代码实例

初始场景

let map: any
LarkExplorer.ready({
    baseUrl: './dist/resources/',
  }).then(initMap)

function initMap() {
  // 默认谷歌影像地图
  const baseImagery = LarkExplorer.BaseLayer.DefaultTdtImg
  // 默认全球地形
  const baseTerrain = LarkExplorer.BaseLayer.DefaultTerrain
  map = new LarkExplorer.Map('map', baseImagery, baseTerrain)
  mp = map.MilitaryPlotting
  initView()
}
function initView() {
  const status = {
    position: {
      x: -947707.6526854301,
      y: 5525655.629629169,
      z: 3043025.882299652,
    },
    hpr: {
      heading: 3.862207334800405,
      pitch: -0.3624409974692644,
      roll: 0.0001087727106403591,
    },
  }
  map.Navigation.flyToPos(status, 3)
}

点-标绘


// 标绘点
const createPoint = () => {
  const options = {
    color: '#ffff00',
    pixelSize: 50,
    outlineColor: '#ff0000',
    outlineWidth: 10,
  }
  mp.DrawPoint(options, (res: any) => {
    console.log('点-标绘成功', res)
  })
}

广告版-标绘

// 标绘广告版
const createBillboard = () => {
  const options = {
    image: new URL('../assets/images/point.png', import.meta.url).href,
    scale: 2,
  }
  mp.DrawBillboard(options, (res: any) => {
    console.log('广告版-标绘成功', res)
  })
}

折线-标绘

// 标绘折线
const createPolyline = () => {
  const options = { color: '#000', width: 10 }
  mp.DrawPolyline(options, (res: any) => {
    console.log('折线-标绘成功', res)
  })
}

自由曲线-标绘

// 标绘自由曲线
const createCurve = () => {
  const options = { color: '#000', width: 10 }
  mp.DrawCurve(options, (res: any) => {
    console.log('圆滑曲线-标绘成功', res)
  })
}

自由线-标绘

// 标绘自由线
const createFreeLine = () => {
  const options = { color: '#000', width: 10 }
  mp.DrawFreeLine(options, (res: any) => {
    console.log('自由线-标绘成功', res)
  })
}

多边形-标绘

// 标绘多边形
const createPolygon = () => {
  const options = {
    fill: '#fff00040',
    outline: true,
    outlineColor: '#ff0000',
    outlineWidth: 5,
  }
  mp.DrawPolygon(options, (res: any) => {
    console.log('多边形-标绘成功', res)
  })
}

自由多边形-标绘

// 标绘自由多边形
const createFreePolygon = () => {
  const options = {
    fill: '#fff00040',
    outline: true,
    outlineColor: '#ff0000',
    outlineWidth: 5,
  }
  mp.DrawFreePolygon(options, (res: any) => {
    console.log('自由多边形-标绘成功', res)
  })
}

正多边形-标绘

// 标绘正多边形
const createRegularPolygon = () => {
  const options = {
    fill: '#fff00040',
    outline: true,
    outlineColor: '#ff0000',
    outlineWidth: 5,
    counts: 6, // 边数量，要求≥3
  }
  mp.DrawRegularPolygon(options, (res: any) => {
    console.log('正多边形-标绘成功', res)
  })
}

弓形-标绘

// 标绘弓形
const createBow = () => {
  const options = { color: '#000', width: 10 }
  mp.DrawBow(options, (res: any) => {
    console.log('弓形-标绘成功', res)
  })
}

椭圆-标绘

// 标绘椭圆
const createElliptic = () => {
  const options = { color: '#000' }
  mp.DrawElliptic(options, (res: any) => {
    console.log('椭圆-标绘成功', res)
  })
}

圆-标绘

// 标绘圆
const createCircle = () => {
  const options = { color: '#000' }
  mp.DrawCircle(options, (res: any) => {
    console.log('圆-标绘成功', res)
  })
}

扇形-标绘

// 标绘扇形
const createSector = () => {
  const options = {
    fill: '#fff00040',
    outline: true,
    outlineColor: '#ff0000',
    outlineWidth: 5,
  }
  mp.DrawSector(options, (res: any) => {
    console.log('扇形-标绘成功', res)
  })
}

矩形-标绘

// 标绘矩形
const createRectangle = () => {
  const options = { color: '#000' }
  mp.DrawRectangle(options, (res: any) => {
    console.log('矩形-标绘成功', res)
  })
}

圆角矩形-标绘

// 标绘圆角矩形
const createRoundRectangle = () => {
  const options = {
    fill: '#fff00040',
    outline: true,
    outlineColor: '#ff0000',
    outlineWidth: 5,
  }
  mp.DrawRoundRectangle(options, (res: any) => {
    console.log('圆角矩形-标绘成功', res)
  })
}

集结地-标绘

// 标绘集结地
const createAssemble = () => {
  const options = {
    fill: '#fff00040',
    outline: true,
    outlineColor: '#ff0000',
    outlineWidth: 5,
  }
  mp.DrawAssemble(options, (res: any) => {
    console.log('集结地-标绘成功', res)
  })
}

简单箭头-标绘

// 标绘简单箭头（直线+曲线）
const createLineArrow = () => {
  const options = { color: '#000', width: 10 }
  mp.DrawLineArrow(options, (res: any) => {
    console.log('简单箭头-标绘成功', res)
  })
}

直角箭头-标绘

// 标绘直角箭头
const createRightAngleArrow = () => {
  const options = {
    fill: '#fff00040',
    outline: true,
    outlineColor: '#ff0000',
    outlineWidth: 5,
  }
  mp.DrawRightAngleArrow(options, (res: any) => {
    console.log('直角箭头-标绘成功', res)
  })
}

直线箭头-标绘

// 标绘直线箭头
const createStraightArrow = () => {
  const options = {
    fill: '#fff00040',
    outline: true,
    outlineColor: '#ff0000',
    outlineWidth: 5,
  }
  mp.DrawStraightArrow(options, (res: any) => {
    console.log('直线箭头-标绘成功', res)
  })
}

攻击箭头-标绘

// 标绘攻击箭头
const createAttackArrow = () => {
  const options = {
    fill: '#fff00040',
    outline: true,
    outlineColor: '#ff0000',
    outlineWidth: 5,
  }
  mp.DrawAttackArrow(options, (res: any) => {
    console.log('攻击箭头-标绘成功', res)
  })
}

燕尾箭头-标绘

// 标绘燕尾箭头
const createSwallowArrow = (type: number) => {
  const options = {
    fill: '#fff00040',
    outline: true,
    outlineColor: '#ff0000',
    outlineWidth: 5,
    geo: type,
  }
  mp.DrawSwallowtailArrow(options, (res: any) => {
    console.log('燕尾箭头-标绘成功', res)
  })
}

钳击箭头-标绘

// 标绘钳击箭头
const createPincerArrow = () => {
  const options = {
    fill: '#fff00040',
    outline: true,
    outlineColor: '#ff0000',
    outlineWidth: 5,
  }
  mp.DrawPincerArrow(options, (res: any) => {
    console.log('钳击箭头-标绘成功', res)
  })
}

旗标-标绘

// 标绘旗标
const createFlag = (type: number) => {
  const options = {
    fill: '#fff00040',
    outline: true,
    outlineColor: '#ff0000',
    outlineWidth: 5,
    geo: type,
  }
  mp.DrawFlag(options, (res: any) => {
    console.log('旗标-标绘成功', res)
  })
}

阵型-标绘

// 标绘阵型
const createFormation = (type: number) => {
  const options = { color: '#ffff00', width: 10, geo: type }
  mp.DrawFormation(options, (res: any) => {
    console.log('阵型-标绘成功', res)
  })
}

移除标绘

// 移除所有
const removeAll = () => mp.removeAll()

运行效果 更多示例

初始影像 ​

几何类型 ​

代码实例 ​

初始影像

几何类型

代码实例