sdk.ts 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554
  1. import cover from "./cover/index";
  2. import { createLoadPack, loadLib } from "@/utils";
  3. import {
  4. FuseModelAttrs,
  5. FuseModel,
  6. GuidePath,
  7. MeasureType,
  8. Measure as StoreMeasure,
  9. MeasurePosition,
  10. SceneType,
  11. scenes,
  12. Scene,
  13. } from "@/store";
  14. import type { Emitter } from "mitt";
  15. import {
  16. AnimationModel,
  17. AnimationModelAction,
  18. AnimationModelFrame,
  19. AnimationModelPath,
  20. TaggingPositionType,
  21. } from "@/api";
  22. import { Pos } from "@/components/drawing/dec";
  23. export enum SettingResourceType {
  24. map = "map",
  25. color = "color",
  26. envImage = "img",
  27. bottomImage = "bimg",
  28. icon = "icon",
  29. }
  30. type SceneModelAttrs = FuseModelAttrs & { select: boolean };
  31. export type SceneModel = ToChangeAPI<SceneModelAttrs> & {
  32. bus: Emitter<
  33. Pick<SceneModelAttrs, "select"> & {
  34. loadError: void;
  35. loadDone: void;
  36. loadProgress: number;
  37. changeSelect: boolean;
  38. transformChanged: {
  39. position?: SceneLocalPos;
  40. scale?: number;
  41. rotation?: SceneLocalPos;
  42. bottom?: number;
  43. };
  44. }
  45. >;
  46. destroy: () => void;
  47. moveModelTo: (mouse: { x: number; y: number }, pos?: Pos) => void;
  48. enterScaleMode: () => void;
  49. enterRotateMode: () => void;
  50. enterMoveMode: () => void;
  51. leaveTransform: () => void;
  52. getDefaultRotation: () => SceneLocalPos;
  53. enterAlignment: () => void;
  54. leaveAlignment: () => void;
  55. enterScaleSet: () => ScaleSet;
  56. leaveScaleSet: () => void;
  57. supportPano: () => boolean;
  58. flyInPano: () => void;
  59. flyOutPano: () => void;
  60. };
  61. export interface ScaleSet {
  62. setLength: (length: number) => void;
  63. startMeasure: () => void;
  64. }
  65. export type ModelAttrRange = {
  66. [key in "opacity" | "bottom" | "scale" as `${key}Range`]: {
  67. min: number;
  68. max: number;
  69. step: number;
  70. };
  71. };
  72. export type AddModelProps = Pick<FuseModel, "url" | "id"> &
  73. FuseModelAttrs & {
  74. type: string;
  75. isDynamicAdded: boolean;
  76. mode: "many" | "single";
  77. fromType: any;
  78. } & ModelAttrRange;
  79. export type SceneGuidePath = Pick<GuidePath, "speed" | "time"> & Pose;
  80. export interface SceneGuide {
  81. bus: Emitter<{ changePoint: number; playComplete: void }>;
  82. play: () => void;
  83. pause: () => void;
  84. clear: () => void;
  85. }
  86. export type ScenePos = { localPos: SceneLocalPos; modelId: FuseModel["id"] };
  87. export type ScreenPos = {
  88. trueSide: boolean;
  89. pos: ScreenLocalPos;
  90. modelId: FuseModel["id"];
  91. };
  92. export interface CameraComeToProps {
  93. position: SceneLocalPos;
  94. target?: SceneLocalPos;
  95. dur?: number;
  96. modelId?: FuseModel["id"];
  97. distance?: 1 | 2 | 3;
  98. maxDis?: number;
  99. isFlyToTag?: boolean;
  100. }
  101. export type CalcPathProps = [
  102. [SceneGuidePath, SceneGuidePath],
  103. Partial<Pick<SceneGuidePath, "time" | "speed">>
  104. ];
  105. export interface MeasureBase {
  106. destroy?: () => void;
  107. show: () => void;
  108. hide: () => void;
  109. fly: () => void;
  110. bus: Emitter<{
  111. update: [MeasurePosition["point"][], MeasurePosition["modelId"][]];
  112. highlight: boolean;
  113. }>;
  114. changeSelect: (isHight: boolean) => void;
  115. setPositions: (
  116. points: MeasurePosition["point"][],
  117. modelIds: MeasurePosition["modelId"][]
  118. ) => void;
  119. }
  120. export type Measure<T extends StoreMeasure["type"] = StoreMeasure["type"]> =
  121. MeasureBase &
  122. (T extends MeasureType.area
  123. ? { getArea: () => { value: number } }
  124. : { getDistance: () => { value: number } });
  125. export type StartMeasure<T extends StoreMeasure["type"]> = Measure<T> & {
  126. bus: Emitter<{
  127. submit: [MeasurePosition["point"][], MeasurePosition["modelId"][]];
  128. cancel: void;
  129. invalidPoint: string;
  130. }>;
  131. };
  132. export type Pose =
  133. | {
  134. position: SceneLocalPos;
  135. target: SceneLocalPos;
  136. }
  137. | {
  138. panoId: any;
  139. // model: SceneModel;
  140. modelId: string;
  141. posInModel: SceneLocalPos;
  142. rotInModel: SceneLocalPos;
  143. position: SceneLocalPos;
  144. target: SceneLocalPos;
  145. };
  146. export interface SDK {
  147. layout: HTMLDivElement;
  148. sceneBus: Emitter<{
  149. cameraChange: SceneLocalPos;
  150. monitorError: void
  151. watchMonitor: void;
  152. panoModelChange: SceneModel;
  153. modeChange: { mode: "pano" | "fuse"; active: SceneModel; model: SceneModel };
  154. }>;
  155. changeMapTile: (args: { tempUrl: string; maximumLevel: number }[]) => void;
  156. exitWatchMonitor: () => void;
  157. setBackdrop: (
  158. drop: string,
  159. type: SettingResourceType,
  160. tb: { scale?: number; rotate?: number }
  161. ) => void;
  162. switchScene: (
  163. scene: { type: SceneType; num: string } | null
  164. ) => Promise<void>;
  165. startAddSth: () => void;
  166. endAddSth: () => void;
  167. addModel: (props: AddModelProps) => SceneModel;
  168. setCameraFov: (fov: number) => void;
  169. enableMap(dom: HTMLDivElement, latlng: number[]): void;
  170. switchMapType: (type: string) => void;
  171. showGrid: () => void;
  172. compassVisibility: (visibility: boolean) => void;
  173. canTurnToPanoMode: () => { model: SceneModel };
  174. hideGrid: () => void;
  175. calcPathInfo: (
  176. paths: CalcPathProps[0],
  177. info: CalcPathProps[1]
  178. ) => Required<CalcPathProps[1]>;
  179. getPositionByScreen: (
  180. screenPos: ScreenLocalPos,
  181. modelId?: FuseModel["id"]
  182. ) =>
  183. | (ScenePos & { worldPos: SceneLocalPos; localNormal: SceneLocalPos })
  184. | null;
  185. getScreenByPosition: (
  186. localPos: SceneLocalPos,
  187. modelId?: FuseModel["id"]
  188. ) => ScreenPos | null;
  189. screenshot: (width: number, height: number) => Promise<string>;
  190. getPose: (tag?: { modelId?: string; isFlyToTag: boolean }) => Pose;
  191. comeTo: (pos: CameraComeToProps) => void;
  192. comeToByLatLng: (pos: number[]) => void;
  193. enterSceneGuide: (data: SceneGuidePath[]) => SceneGuide;
  194. drawMeasure<T extends StoreMeasure["type"]>(
  195. type: T,
  196. points: MeasurePosition["point"][],
  197. modelIds: MeasurePosition["modelId"][]
  198. ): Measure<T>;
  199. startMeasure<T extends StoreMeasure["type"]>(type: T): StartMeasure<T>;
  200. createTagging: (props: Tagging3DProps) => Tagging3D;
  201. createPath: (props: PathProps) => Path;
  202. createAnimationGroup: () => AnimationGroup;
  203. }
  204. export type PathProps = {
  205. // 线段名称
  206. name: string;
  207. // 是否显示名称,
  208. showName: boolean;
  209. // 文字大小
  210. fontSize: number;
  211. // 是否显示方向,
  212. showDirection: boolean;
  213. // 方向是否反向
  214. reverseDirection: boolean;
  215. line: {
  216. width: number;
  217. color: string;
  218. altitudeAboveGround: number;
  219. position?: SceneLocalPos;
  220. modelId?: string;
  221. };
  222. points: {
  223. // 点位名称
  224. name: string;
  225. position: SceneLocalPos;
  226. modelId: string;
  227. }[];
  228. };
  229. export type Path = {
  230. bus: Emitter<{
  231. changeLineHeight: number;
  232. activePoint: number;
  233. // 标注点击事件
  234. click: void;
  235. // 鼠标移入标注事件
  236. enter: void;
  237. // 鼠标移出标注事件
  238. leave: void;
  239. // 线段坐标更改事件
  240. linePositionChange: {
  241. pos: SceneLocalPos;
  242. modelId: string;
  243. };
  244. focus: boolean;
  245. // 路径点位置变更
  246. changePoints: PathProps["points"];
  247. drawed: void;
  248. }>;
  249. changeDirection: (show: boolean, reverse: boolean) => void;
  250. changeFontSize: (fontSize: number) => void;
  251. focus: (f: boolean) => void;
  252. highlight: (f: boolean) => void;
  253. changeVisibilityRange: (range: number) => void;
  254. changePointName: (index: number, name: string) => void;
  255. // 飞向路径
  256. fly: () => void;
  257. // 更改路径点
  258. changePathPoints: (
  259. points: Omit<PathProps["points"][number], "name">[]
  260. ) => void;
  261. // 播放路径,相机沿着路径运动,传入播放完毕回调
  262. play: (playedHandler: () => void) => void;
  263. // 停止播放路径
  264. pause: () => void;
  265. // 是否可编辑
  266. changeCanEdit: (canMove: boolean) => void;
  267. deletePoint: (index: number) => void;
  268. changeEditMode: (editMode: boolean) => void;
  269. // 可见性
  270. visibility: (visibility: boolean) => void;
  271. // 气泡是否可见
  272. visibilityName: (visibility: boolean) => void;
  273. // 更改标题气泡属性
  274. changeLine: (props: Partial<PathProps["line"]>) => void;
  275. // 更改标题气泡属性
  276. changeName: (name: string) => void;
  277. // 线段销毁
  278. destroy: () => void;
  279. };
  280. export type Tagging3DProps = {
  281. lineHeight: number;
  282. fontSize: number;
  283. // 标题
  284. title: string;
  285. // 标注类型 2d | 3d
  286. type: TaggingPositionType;
  287. // 模型id
  288. modelId: string;
  289. // 贴地射线获取的位置
  290. position: SceneLocalPos;
  291. normal: SceneLocalPos;
  292. // 是否可以移动
  293. canMove: boolean;
  294. // 贴地图片url
  295. image: string;
  296. // 贴地图片的变换
  297. mat: {
  298. scale: number;
  299. rotation: number;
  300. };
  301. };
  302. export type Tagging3D = {
  303. bus: Emitter<{
  304. // 标注点击事件
  305. click: void;
  306. // 鼠标移入标注事件
  307. enter: void;
  308. // 鼠标移出标注事件
  309. leave: void;
  310. // 位置变更
  311. changePosition: {
  312. pos: SceneLocalPos;
  313. modelId: string;
  314. normal: SceneLocalPos;
  315. };
  316. changeLineHeight: number;
  317. transformChanged: boolean
  318. scaleChanged: boolean
  319. }>;
  320. changePosition: (position: {
  321. modelId: string;
  322. // 贴地射线获取的位置
  323. position: SceneLocalPos;
  324. normal: SceneLocalPos;
  325. }) => void;
  326. changeFontSize: (fontSize: number) => void;
  327. changeLineHeight: (lineHeight: number) => void;
  328. // 设置标题
  329. changeTitle: (title: string) => void;
  330. // 标题是否可见
  331. visibilityTitle: (visibility: boolean) => void;
  332. // 更改可拖拽移动
  333. changeCanMove: (canMove: boolean) => void;
  334. // 获取图标中心三维坐标
  335. getImageCenter: () => SceneLocalPos;
  336. // 更改图标
  337. changeImage: (url: string) => void;
  338. // 标注可见性
  339. visibility: (visibility: boolean) => void;
  340. // 标注图片变换,传入变换
  341. changeMat: (props: Tagging3DProps["mat"]) => void;
  342. // 更改热点类型
  343. changeType: (val: TaggingPositionType) => void;
  344. // 距离相机位置
  345. getCameraDisSquared: () => number;
  346. // 标注销毁
  347. destroy: () => void;
  348. };
  349. // 动画组对象
  350. export type AnimationGroup = {
  351. enterEditPannel: () => void,
  352. exitEditPannel: () => void,
  353. // 播放
  354. play: () => void;
  355. // 暂停
  356. pause: () => void;
  357. // 添加动画模型
  358. addAnimationModel: (data: any) => AnimationModel3D;
  359. delayEndTime: () => number;
  360. // 设置当前时间, 单位为秒
  361. setCurrentTime: (s: number) => void;
  362. bus: Emitter<{
  363. currentTime: number;
  364. }>;
  365. };
  366. export type AnimationModel3D = {
  367. getSupportActions: () => { name: string; duration: number }[];
  368. changePosition: (pos: Pos) => void;
  369. changeScale: (num: number) => void;
  370. changeRotation: (pos: SceneLocalPos) => void;
  371. // 销毁动画模型
  372. destroy: () => void;
  373. changeShow: (focus: boolean) => void;
  374. // 更改动画模型可见性
  375. changeSelect: (show: boolean) => void;
  376. // 更改动画可见范围 不传为全局可见
  377. changeVisibilityRange: (range?: number) => void;
  378. // 更改模型名称
  379. changeTitle: (name: string) => void;
  380. // 更改名称字体大小
  381. changeFontSize: (size: number) => void;
  382. // 更改名称可见性
  383. visibilityTitle: (show: boolean) => void;
  384. setDefaultPose: (data: {
  385. position?: SceneLocalPos;
  386. scale?: number;
  387. rotation?: SceneLocalPos;
  388. originPosition?: SceneLocalPos;
  389. }) => void;
  390. getModelPose: () => {
  391. position?: SceneLocalPos;
  392. scale?: number;
  393. rotation?: SceneLocalPos;
  394. originPosition?: SceneLocalPos;
  395. };
  396. moveModelTo: (mouse: { x: number; y: number }, pos?: Pos) => void;
  397. // 添加模型帧
  398. addFrame: (frame: AnimationModelFrame) => AnimationModelFrame3D;
  399. // 添加模型动作
  400. addAction: (frame: AnimationModelAction) => AnimationModelAction3D;
  401. // 添加模型路径
  402. addPath: (
  403. frame: Omit<AnimationModelPath, "pathId"> & { path: Path }
  404. ) => AnimationModelPath3D;
  405. // 获取当前模型字幕出现的适合位置,传入旁边dom的宽高,返回像素位置
  406. getCurrentSubtitlePixel: (size: { width: number; height: number }) => {
  407. x: number;
  408. y: number;
  409. };
  410. // 获取当前时间改模型的姿态
  411. getCurrentMat: () => {
  412. position?: SceneLocalPos;
  413. scale?: number;
  414. rotation?: SceneLocalPos;
  415. originPosition?: SceneLocalPos;
  416. };
  417. // 进入旋转
  418. enterRotateMode: () => void;
  419. enterMoveMode: () => void;
  420. enterScaleMode: () => void;
  421. leaveTransform: () => void;
  422. putInFrontOfCam: () => void
  423. // 动画帧姿态修改数据
  424. bus: Emitter<{
  425. loadDone: void;
  426. changeSelect: boolean;
  427. transformChanged: {
  428. byControl: boolean;
  429. position?: SceneLocalPos;
  430. scale?: number;
  431. rotation?: SceneLocalPos;
  432. originPosition?: SceneLocalPos;
  433. };
  434. }>;
  435. };
  436. export type AnimationModelFrame3D = {
  437. // 销毁动画模型帧
  438. destroy: () => void;
  439. // 修改帧播放时间 单位为秒
  440. changeTime: (s: number) => void;
  441. setMat: (mat: any) => void;
  442. };
  443. export type AnimationModelAction3D = {
  444. // 销毁动画模型动作
  445. destroy: () => void;
  446. // 修改动作播放时间 单位为秒
  447. changeTime: (s: number) => void;
  448. // 修改动作幅度
  449. changeAmplitude: (n: number) => void;
  450. // 修改动作速度
  451. changeSpeed: (n: number) => void;
  452. // 修改动持续时间 单位为秒
  453. changeDuration: (n: number) => void;
  454. chose: (b: boolean) => void;
  455. };
  456. export type AnimationModelPath3D = {
  457. // 销毁动画模型路径
  458. destroy: () => void;
  459. // 修改路径 传入参数为你之前返回的路径对象
  460. changePath: (path: Path | undefined) => void;
  461. // 修改播放是否要反向
  462. changeReverse: (reverse: boolean) => void;
  463. // 修改路径播放时间 单位为秒
  464. changeTime: (s: number) => void;
  465. // 修改路径续时间 单位为秒
  466. changeDuration: (n: number) => void;
  467. };
  468. export let sdk: SDK;
  469. export type InialSDKProps = {
  470. laserRoot?: string;
  471. ossRoot?: string;
  472. laserOSSRoot?: string;
  473. panoOSSRoot?: string;
  474. layout: HTMLDivElement;
  475. scenes: Scene[];
  476. lonlat?: number[];
  477. };
  478. export let initialed = false;
  479. export const initialSDK = async (props: InialSDKProps) => {
  480. if (initialed) return sdk;
  481. initialed = true;
  482. const libs = [
  483. `./lib/proj4/proj4.js`,
  484. `./lib/jquery/jquery-3.1.1.min.js`,
  485. `./lib/other/BinaryHeap.js`,
  486. `./lib/other/hls.js`,
  487. `./lib/tween/tween.min.js`,
  488. `./lib/plasio/js/laslaz.js`,
  489. `./lib/plasio/vendor/bluebird.js`,
  490. `./lib/plasio/workers/laz-loader-worker.js`,
  491. `./lib/plasio/workers/laz-perf.js`,
  492. `./lib/Cesium/Cesium.js`,
  493. `./lib/shapefile/shapefile.js`,
  494. ];
  495. await Promise.all(libs.map(loadLib));
  496. await loadLib(`./lib/potree/potree.js`);
  497. console.log(props);
  498. const localSdk = cover({
  499. ...props,
  500. dom: props.layout,
  501. isLocal: false,
  502. scenes: props.scenes,
  503. lonlat: props.lonlat,
  504. mapDom: null,
  505. } as any) as unknown as SDK;
  506. (window as any).sdk = sdk = localSdk;
  507. sdk.layout = props.layout;
  508. return sdk;
  509. };
  510. export default sdk!;