cesium-pocket/README.md

cesium的插件库；基于vue3的开发

# cesium-pocket
 这是一个基于vue3（3.3以上版本）的cesium（1.126以上版本）应用组件库。作者联系方式 微信：brilliant201306

 ## 1.安装方式：
```  
npm i cesium-pocket 
pnpm i cesium-pocket //推荐
```

 ## 2.依赖资源：
``` 
npm i vue //vue3版本
npm i cesium
npm i vite-plugin-cesium
npm i three
npm i @types/three  //ts语言需要


/* 推荐pnpm */
pnpm i vue //vue3版本
pnpm i cesium
pnpm i vite-plugin-cesium
pnpm i three
pnpm i @types/three  //ts语言需要
```

 ## 3.导入方式：
按需导入：
```
import 'cesium-pocket/index.css'
import { mfCompass, mfRuler, mfCoord，mfOverlay, mfPin } from 'cesium-pocket' //罗盘、比例尺、中心点实时坐标,覆盖面板,大头针
```
 

 ## 4.使用方式：
```
<!--html代码-->
<!--罗盘组件-->
<mf-compass class="right-top-plugin" :viewer="viewer"></mf-compass>
<!--比例尺组件-->
<mf-ruler class="right-bottom-plugin" :viewer="viewer"></mf-ruler>
<!--中心点坐标组件-->
<mf-coord class="left-bottom-plugin" :viewer="viewer"></mf-coord>
<!--覆盖面板组件-->
<mf-overlay :viewer="homeStore.viewer" :longtitude="【经度】" :latitide="【维度】" :height="【高度】" stickColor="#0e7fdb"
  textColor="【文字颜色】" :layWidth="300" v-model:showLay="boo">
</mf-overlay>
<!--大头针组件-->
<mf-pin :viewer="homeStore.viewer" :pinData="pinData" v-slot="{ item }">
  <div>
    <article>坐标：{{ item.longtitude }}, {{ item.latitude }}</article>
    <article>地点：{{ item.description }}</article>
   </div>
</mf-pin>

<script setup lang="ts">
import 'cesium-pocket/index.css'
import { mfCompass, mfRuler, mfCoord，mfOverlay, mfPin} from 'cesium-pocket' //罗盘、比例尺、中心点实时坐标,覆盖面板,大头针
import { PIN_TYPES, type PinObjectTypeExtend, PIN_CATEGORY } from "cesium-pocket/pin";

let viewer = Cesium.viewer  //获取viewer对象
...  //以下定义各个组件所需参数

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

const pinData: Array<PinObjectTypeExtend> = [{
  pinType: PIN_TYPES.DEFAULT,
  pinCategory: PIN_CATEGORY.AIRPORT,
  position: Cartesian3.fromDegrees(114.214, 30.774, 0),
  longtitude: 114.214,
  latitude: 30.774,
  description: '武汉天河国际机场',
}, {
  pinType: PIN_TYPES.DEFAULT,
  pinCategory: PIN_CATEGORY.HOSPITAL,
  position: Cartesian3.fromDegrees(104.06, 30.65, 0),
  longtitude: 104.06,
  latitude: 30.65,
  description: '四川大学华西医院',
}, {
  pinType: PIN_TYPES.ICON,
  iconUrl: footballPng,
  color: Color.GREEN,
  position: Cartesian3.fromDegrees(117.719, 39.0304, 0),
  longtitude: 117.73,
  latitude: 39.04,
  description: '天津泰达足球场',
}, {
  pinType: PIN_TYPES.TEXT,
  position: Cartesian3.fromDegrees(121.5028, 31.2365, 0),
  text: '商',
  color: Color.YELLOW,
  longtitude: 121.5028,
  latitude: 31.2365,
  description: '上海国际环球中心',
}]

</script>

//css代码，根据自己项目设置，以下仅供参考
<style scoped>
.right-top-plugin {
  top: 20px;
  right: 5px;
}

.right-bottom-plugin {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.left-bottom-plugin {
  position: absolute;
  left: 0;
  bottom: 0;
}
</style> 
```