效果预览

组件特点

  1. 基于cesium PinBuilder封装，具备PinBuilder全部特点
  2. 单击pin，可开关自定义面板，面板实时跟随pin图标
  3. 有默认模式、图片模式和文字模式
  4. 可强行自定义颜色
  5. 当pin图标被地球遮挡时，自动隐藏图标及面板
  6. pinType为默认模式时，pinCategory可选范围参考右侧枚举
  7. 自定义图标推荐高宽比为1的图片

 const PIN_CATEGORY = {
  HOSPITAL,     // 医院；红色   
  SCHOOL,       // 学校；蓝色
  LIBRARY,      // 图书馆；蓝色
  BANK,         // 银行；蓝色
  AIRPORT,      // 机场；蓝色
  FIRE_STATION, // 消防站；红色
  BUS,          // 公交站；蓝色
  GAS_STATION,  // 加油站；蓝色
  PARKING,      // 停车场；蓝色
  POLICE,       // 派出所、警局；蓝色
  RAIL,         // 铁路线；黑色
  RESTAURANT,   // 餐馆；橙色
}

核心代码

<template>
  <div id="rootContainer" ref="rootContainer" class="root-container">
    <cp-overlay :viewer="viewer" :position="Cartesian3.fromDegrees(114.297, 30.5471, 0)" stickColor="#0e7fdb"
      textColor="#eeeeee" :layWidth="300" v-model:showLay="boo">
      <div class="demo-overlay">
        <header class="demo-overlay-title">黄鹤楼
        </header>
        <article class="demo-overlay-article">
          <img :src="hhlWebp.src" style="width:50px;float:right;margin:0 4px" />
          {{ overlays.description }}
        </article>
      </div>
    </cp-overlay>
  </div>
</template>
import { onMounted, ref } from "vue";
import { cpOverlay } from 'cesium-pocket'
import 'cesium/Build/Cesium/Widgets/widgets.css';


let viewer: any = ref(null)
const boo = ref(true)


const overlays = ref({
  longtitude: 114.297,
  latitude: 30.5471,
  height: 0,
  title: "黄鹤楼",
  description: "黄鹤楼，位于中国湖北省武汉市武昌蛇山之巅，濒临万里长江，是“江南三大名楼”之一，自古享有“天下江山第一楼”的盛誉。其始建于三国时代，历经多次毁建，现存建筑为1985年仿清代形制重建。楼高五层，飞檐翘角，金碧辉煌，融传统建筑美学与历史文化于一体。历代文人墨客如崔颢、李白等均在此留下千古名篇，其中“昔人已乘黄鹤去，此地空余黄鹤楼”更成为华夏文明的文化符号。登楼远眺，江城武汉三镇风光尽收眼底，既是建筑奇观，更是中华文脉的重要地标。"
});


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


.demo-overlay {
  padding: 5px 10px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  background-color: #0e7fdbd7;
  box-shadow: 0 0 5px 6px #0e7fdb8a;
}


.demo-overlay-title {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 5px;
}


.demo-overlay-article {
  padding-bottom: 5px;
  text-indent: 2em;
  letter-spacing: 0.04em;
  line-height: 20px;
  font-family: 'italic', 'SimSun', sans-serif;
}

组件参数列表

Component <cp-overlay :viewer="viewer" :position="position">
Props 组件属性 Props
序号 名称 类型 必须? 默认值 含义 备注
1 viewer Cesium.Viewer 是 - viewer对象 -
2 position Cesium.Cartesian3 是 - 坐标 -
3 layWidth number 否 200 坐标 单位px
4 offsetX number 否 0 左偏移 单位px
5 offsetY number 否 0 右偏移 单位px
6 textColor string 否 #EEEEEE 面板文字颜色 -
7 textColor string 否 #EEEEEE 面板文字颜色 -
8 stickColor string 否 #EEEEEE 标记棍颜色 -