SatPicture出图工具组件

亮点

⚡️ 采用tui-image-editor作为图片编辑内核，功能丰富，dom-to-image-more作为辅助函数包
💡 场景更新功能支持选择是否包含除地图外的其他dom元素
🛠️ 支持插入图片
🔑 暴露代码更新场景、插入图片等方法

基础用法

vue

<template>
  <SatGlobe>
    <SatMenu>
      <SatPicture />
    </SatMenu>
  </SatGlobe>
</template>

1
2
3
4
5
6
7

代码方式上图

vue

<script setup lang="ts">
import { type SatPictureExpose, SatUtil } from 'sat-earth'
const satPicture = ref<SatPictureExpose>()
const testPicture = () => {
  // dom上图
  const imageEditorInstance = satPicture.value?.getImageEditor()
  const dom = document.getElementsByClassName('sat-panel-content-header')
  SatUtil.imageUtil.dom2Base64(dom[0] as HTMLDivElement).then(base64 => {
    imageEditorInstance?.value?.uploadImageBase64(base64)
  })
  // 插入图片
  SatUtil.imageUtil.getImgBase64('./cesium_credit.png').then(base64 => {
    imageEditorInstance?.value?.uploadImageBase64(base64)
  })
}
</script>
<template>
  <SatGlobe>
    <SatPicture
      ref="satPicture"
      :is-init-scene="false"
    />
  </SatGlobe>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

属性

参数	说明	类型	可选值	默认值
is-include-div	初始化场景更新是否包含除地图外的其他dom元素	boolean	true/false	false
div-child-filter	包含上图的div元素过滤规则	`(node: Element) => boolean`	-	`(node: Element) => true`

方法

方法名	说明	类型
getImageEditor	获取内置组件TheImageEditor实例方法	`() => Ref<TheImageEditorExpose 丨 undefined>`

interface TheImageEditorExpose {
  getInstance: () => ShallowRef<tuiImageEditor | undefined>
  loadScene:  (options?: {
    isIncludeDiv?: boolean,
    divChildFilter?: (node: Element)=>boolean
  }) => void
  uploadFile: (uploadFile: UploadFile) => void
  uploadImageBase64: (base64: string) => void
  download: (autoDownload?: boolean) => Promise<string> | undefined
}

1
2
3
4
5
6
7
8
9
10

事件

事件名	说明	回调参数
init-hooks	生命周期初始化钩子	-
destroy-hooks	生命周期销毁钩子	-

插槽

插槽名	说明
-	自定义内容