📌效果预览

📌组件特点

  1. 基于天地图官方提供的GIS服务，请参考官方网站 ：天地图官网
  2. 该组件包括影像图层、地形图层以及矢量图层，各个图层都包含有注记图层，注记图层默认关闭
  3. 矢量图层包括白、蓝、黑三种模式，后续将提供自定义模式
  4. 可通过css样式自由选择组件布局位置
  5. 图层可自定义选取和顺序，参考右侧枚举

layers枚举

white : 矢量图层（白）

blue: 矢量图层（蓝）

black: 矢量图层（黑）

terrain： 地形图层

image： 影像图层

📌核心代码

<template>
  <div id="rootContainer" ref="rootContainer" class="root-container">
    <cp-tianmap :viewer="viewer" style="bottom:40px;right:40px;" class="map-plugin" v-if="viewer">
    </cp-tianmap>
  </div>
</template>
import { onMounted, ref } from "vue";
import { cpTianmap } from 'cesium-pocket'
import { CesiumPocket } from '@/core/CesiumPocket'
import 'cesium/Build/Cesium/Widgets/widgets.css';


let viewer: any = ref(null)
const rootContainer: any = ref({});


onMounted(() => {
  viewer.value = //你获取的viewer
});
.root-container {
  position: relative;
  width: 100%;
  height: 500px;
}


.map-plugin {
  position: absolute;
  bottom: 120px;
  right: 120px;
  z-index: 10;
}

📌API参数列表

序号 名称 类型 必须? 默认值 含义 备注
1 viewer Cesium.Viewer 是 - viewer对象 -
2 token string 是 - 天地图token -
3 layers Array<TianmapType> 否 ['white', 'blue', 'black', 'terrain', 'image'] 图层数组 -