cesium-pocket

效果预览

组件特点

仿照百度地图图层切换器，鼠标悬浮在上时展开所有图块，鼠标移开时显示已选中图块。
依赖图层管理器LayersManager类，统一管理所有图层，每个图块只需关联相关图层对应的code值。
可通过自定义css样式自由选择图层切换器组件布局位置。
每个图块由图层和仅注记图层共同组成，注记图层是可选的。

核心代码

1
<template>
2
  <div id="rootContainer" ref="rootContainer" class="root-container">
3
     <cp-layers :viewer="viewer" :layersManager="layersManagerRef" :layersData="layersDataRef" v-if="layersManagerRef"
4
      style="bottom:40px;right:40px;"></cp-layers>
5
  </div>
6
</template>

1
import { onMounted, ref } from "vue";
2
import 'cesium/Build/Cesium/Widgets/widgets.css';
3
import { CP_LAYER, LayersManager, type LayersDataType } from "cesium-pocket";
4

5
let viewer: any = ref(null)
6
const rootContainer: any = ref(null);
7
const viewer = ref<Viewer | null>(null)
8
const loading = ref(true)
9
let layersManagerRef = ref<LayersManager>()
10
let layersDataRef = ref<Array<LayersDataType>>([])
11

12

13
onMounted(() => {
14
  viewer.value = //你获取的viewer
15
  init()
16
  loading.value = false
17
});
18

19
const init = async () => {
20
  let layersManager = new LayersManager(viewer.value as Viewer)
21
  await layersManager.addCPLayer(CP_LAYER.BING_IMG, { code: 'bing' })
22
  await layersManager.addCPLayer(CP_LAYER.BING_IMG_S, { code: 'bing_s' })
23
  await layersManager.addCPLayer(CP_LAYER.BING_IMG_NIGHT, { code: 'bing_night' })
24
  await layersManager.addCPLayer(CP_LAYER.AMAP_IMG, { code: 'amap' })
25
  await layersManager.addCPLayer(CP_LAYER.AMAP_IMG_S, { code: 'amap_s' })
26
  await layersManager.addCPLayer(CP_LAYER.TDT_IMG, { code: 'tdt' })
27
  await layersManager.addCPLayer(CP_LAYER.TDT_IMG_S, { code: 'tdt_s' })
28
  layersManagerRef.value = layersManager
29

30
  let obj: LayersDataType = {
31
    name: '必应地图',
32
    code: 'bing',
33
    signCode: 'bing_s',
34
    imgSrc: bingPng,
35
    checked: false
36
  }
37

38
  let obj1: LayersDataType = {
39
    name: '必应夜图',
40
    code: 'bing_night',
41
    signCode: null,
42
    imgSrc: bing_nightPng,
43
    checked: false
44
  }
45

46
  let obj2: LayersDataType = {
47
    name: '高德地图',
48
    code: 'amap',
49
    signCode: 'amap_s',
50
    imgSrc: amapPng,
51
    checked: false
52
  }
53

54
  let obj3: LayersDataType = {
55
    name: '天地图',
56
    code: 'tdt',
57
    signCode: 'tdt_s',
58
    imgSrc: tdtPng,
59
    checked: false
60
  }
61

62
  layersDataRef.value.push(obj)
63
  layersDataRef.value.push(obj1)
64
  layersDataRef.value.push(obj2)
65
  layersDataRef.value.push(obj3)
66
}

1
.root-container {
2
  position: relative;
3
  width: 100%;
4
  height: 500px;
5
}
6

7
.map-plugin {
8
  position: absolute;
9
  bottom: 120px;
10
  right: 120px;
11
  z-index: 10;
12
}

组件参数列表

Component <cp-layers :viewer="viewer" :layersManager="layersManager" :layersData="layersData">

Props 组件属性 Props

序号	名称	类型	必须?	默认值	含义	备注
1	viewer	Cesium.Viewer	是	-	viewer对象	-
2	layersData	Array<LayersDataType>	是	-	切换器数组	-
3	layersManager	LayersManager	是	-	图层管理器类	-

Type 接口 LayersDataType Interface

序号	名称	类型	必须?	默认值	含义	备注
1	name	string	是	-	现实的中文名称	-
2	code	string	是	-	图层对应LayersManager图层管理器添加的的标识码	-
3	signCode	string	否	-	注记图层对应LayersManager图层管理器添加的的标识码	-
4	imgSrc	string	是	-	切换器上对应图层的图片地址	-
5	checked	boolean	是	-	注记图层是否默认show	signCode存在的前提下有效