效果预览

组件特点

  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-pin :viewer="viewer" :position="Cartesian3.fromDegrees(121.5028, 31.2365)" :pinType="PIN_MODE.TEXT" text="商"
      :color="Color.YELLOW">
      <div style="width:140px;padding:6px;">
        <h6>上海国际环球中心</h6>
        <article>楼高：201米</article>
        <article>地点：浦东新区世纪大道100号</article>
      </div>
    </cp-pin>
    <cp-pin :viewer="viewer" :position="Cartesian3.fromDegrees(104.06, 30.65, 0)" :pinType="PIN_MODE.DEFAULT"
      :pinCategory="PIN_CATEGORY.HOSPITAL">
      <div style="width:120px;padding:6px;">
        四川大学华西医院
      </div>
    </cp-pin>
    <cp-pin :viewer="viewer" :position="Cartesian3.fromDegrees(116.441, 39.930, 0)" :pinType="PIN_MODE.ICON"
      :iconUrl="footballPng.src" :color="Color.GREEN">
      <div style="width:130px;padding:6px;">
        <h6>北京工人体育场</h6>
        <article>116.73, 39.94</article>
        <article>始建于1958年</article>
        <article>2023年3月复建竣工</article>
      </div>
    </cp-pin>
    <cp-pin :viewer="viewer" :position="Cartesian3.fromDegrees(114.214, 30.774, 0)" :pinType="PIN_MODE.DEFAULT"
      :pinCategory="PIN_CATEGORY.AIRPORT">
      <div style="width:180px;padding:4px 6px;letter-spacing: 0.1em;">
        <article>武汉天河国际机场，位于湖北省武汉市黄陂区天河街道机场大道，距武汉市中心25公里，为中国中部首家4F级民用国际机场
          、中国八大区域性枢纽机场之一、国际定期航班机场、对外开放的一类航空口岸。2019年1月，机场开始实行144小时过境免签政策。</article>
      </div>
    </cp-pin>
  </div>
</template>
import { onMounted, ref } from "vue";
import { cpPin } from 'cesium-pocket'
import { PIN_MODE, PIN_CATEGORY } from "cesium-pocket/pin";
import { Cartesian3, Color } from "cesium";
import footballPng from '@/assets/images/football.png'
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%;
  box-sizing: border-box;
  height: 100%;
}


.right-top-plugin {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 10;
}

组件参数列表

Component <cp-pin :viewer="viewer" :position="position">
Props 组件属性 Props
序号 名称 类型 必须? 默认值 含义 备注
1 position Cesium.Cartesian3 是 - pin的坐标 -
2 pinMode Symbol 否 PIN_MODE.DEFAULT pin的模式 参考PIN_MODE常量
3 pinCategory Object 否 PIN_CATEGORY.AIRPORT pin分类 pinMode为PIN_MODE.DEFAULT时生效
4 color Cesium.Color 否 - 自定义颜色 颜色权重最高
5 text string 否 '标' pin内文字 字数不宜过多，最优1个字
6 iconUrl string 否 '' 自定义图标 -