cesium-pocket

效果预览

组件特点

LayersDataType类实现图层的添加、删除、清除、排序的管理。
可自定义UI组件
可通过自定义code获取到图层，解决Cesium官方无id获取图层的麻烦
可使用本站官方提供的地图服务快速出底图。包含天地图、高德地图、必应地图在内的影像、矢量、注记等地图瓦片服务
用本站官方地图服务通过addCpLayers添加，其中参数cpLayer的值可参考以下枚举

BING_IMG：必应影像图

BING_IMG_NIGHT：必应夜间影像图

BING_IMG_S：必应影像注记

GOOGLE_IMG： google影像地图

GOOGLE_IMG_S： google影像注记

AMAP_IMG：高德影像图

AMAP_IMG_S：高德影像注记

AMAP_VEC：高德矢量图

AMAP_VEC：高德矢量图注记

TDT_IMG：天地图影像图

TDT_IMG_S：天地图影像注记

TDT_VEC：天地图矢量图

TDT_VEC_S：天地图矢量注记

TDT_TER：天地图地势图

TDT_TER_S：天地图地势注记

核心代码

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
}

核心类

Class new LayersManager(viewer)

Params 构造函数参数列表 Constructor

序号	名称	类型	必须?	默认值	含义	备注
1	addLayer	void	是	-	viewer对象	-

Methods 方法列表 API

序号	方法名	入参	返回值	含义	备注
1	addLayer	imageryProvider [ Cesium.ImageryProvider ] ; options [ undefined \| LayerOption ]	void	添加图层	-
2	addCPLayer	cpLayer [ CP_LAYER_TYPE ] ; options [ undefined \| LayerOption ]	void	添加系统已有图层	async同步方法
3	getLayerByCode	code [string]	Cesium.ImageryLayer	根据code得到图层	-
4	getMetaByLayer	layer [Cesium.ImageryLayer]	{ code: string, name: string }	根据图层得到元数据	-
5	removeAllLayers	-	void	清除所有图层	-
6	clearLayer	layer [ Cesium.ImageryLayer ]	void	删除指定图层	-
7	raise	layer [ Cesium.ImageryLayer ]	void	图层上移一层	-
8	raiseToTop	layer [ Cesium.ImageryLayer ]	void	图层顶置	-
9	lower	layer [ Cesium.ImageryLayer ]	void	图层下移一层	-
10	lowerToBottom	layer [ Cesium.ImageryLayer ]	void	图层底置	-

Type 接口 LayerOption Interface

序号	名称	类型	必须?	默认值	含义	备注
1	code	string	否	-	自定义图层编码	-
2	show	boolean	否	-	是否显示	-
3	alpha	number	否	-	图层alpha值	-
4	brightness	number	否	-	图层brightness值	-
5	contrast	number	否	-	图层contrast值	-
6	hue	number	否	-	图层hue值	-
7	saturation	number	否	-	图层saturation值	-
8	gamma	number	否	-	图层gamma值	-