SatSource数据源组件

亮点

⚡️ 内置默认数据源
💡 可通过SatGlobe主入口组件的Props入参控制数据源
🛠️ 可通过SatSource数据源组件的Props入参添加数据源
🔑 已加载数据源可通过拖拽控制图层显示层级
✨ 已加载数据源可通过图层配置面板控件调整图层Style配置

基础用法

vue

<template>
  <SatGlobe>
    <SatMenu>
      <SatSource />
    </SatMenu>
  </SatGlobe>
</template>

1
2
3
4
5
6
7

自定义图层集成

vue

<script setup lang="ts">
import type { SatLayer } from 'sat-earth'

// test 传入图层
const layers: SatLayer[] = [
  { 'id': 'test-custom', 'name': '自定义图层引入', 'type': 'group' },
  {
    'pid': 'test-custom',
    'name': '天地图影像',
    'icon': 'http://mars3d.cn/img/basemaps/tdt_img.png',
    'type': 'group',
    'layers': [
      { 'name': '底图', 'type': 'tdt', 'layer': 'img_d' },
      { 'name': '注记', 'type': 'tdt', 'layer': 'img_z' }
    ],
  },
  {
    'pid': 'test-custom',
    'name': '天地图电子',
    'icon': 'http://mars3d.cn/img/basemaps/tdt_vec.png',
    'type': 'group',
    'layers': [
      { 'name': '底图', 'type': 'tdt', 'layer': 'vec_d' },
      { 'name': '注记', 'type': 'tdt', 'layer': 'vec_z' }
    ],
    'show': true
  }
]
</script>
<template>
  <SatGlobe>
    <SatMenu>
      <SatSource :layers="layers" />
    </SatMenu>
  </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
25
26
27
28
29
30
31
32
33
34
35
36

属性

参数	说明	类型	可选值	默认值
layers	自定义图层集合	`Array<SatLayer>`	-	-

事件

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

插槽

插槽名	说明
-	自定义内容

注意事项

WARNING

图层构造参数在组件库内是响应式的，如果作为构造参数传到图层创建类中，会让响应式变的非常复杂，可能卡到浏览器崩溃；因此我的内部处理逻辑是在添加图层的时候会克隆一个新的对象作为构造参数防止出现因为响应式引起的卡顿的问题；但是 new 出来的复杂对象在克隆后可能会出现问题，导致传入构造参数的属性设置无效，因此需要开发者在这里把复杂参数写到 addedHooks 中赋值，如：
ts
```
  {
    pid: auxiliaryLayersDefaultId,
    type: 'osmBuildings',
    name: '全球城市白膜',
    highlight: { type: 'click', color: '#00FF00' },
    popup: 'all',
    // style: ...
    addedHooks: (layer) => {
      if (layer) {
        layer.style = new SatMap.Cesium.Cesium3DTileStyle({
          color: {
            conditions: [['true', 'color("#BF3DCE")']],
          },
        })
      }
    },
  }
```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17