setting.ts 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. import { setting, sysTiles } from "@/store";
  2. import { nextTick, watchEffect } from "vue";
  3. import { SDK, SettingResourceType } from "../sdk";
  4. import { setPose } from ".";
  5. import { MapTile } from "@/api/map-tile";
  6. import { params } from "@/env";
  7. export const associationSetting = (sdk: SDK, mountEl: HTMLDivElement) => {
  8. watchEffect(() => {
  9. setting.value?.fov && sdk.setCameraFov(setting.value.fov);
  10. });
  11. sdk.hideGrid();
  12. const stopWatchPose = watchEffect(() => {
  13. if (!setting.value?.pose) return;
  14. setPose(setting.value?.pose);
  15. nextTick(() => stopWatchPose());
  16. });
  17. watchEffect(() => {
  18. if (setting.value) {
  19. // const direEl = document.querySelector("#direction") as HTMLDivElement;
  20. // direEl.style.display = setting.value.openCompass ? "block" : "none";
  21. }
  22. });
  23. watchEffect(() => {
  24. let tile: MapTile | undefined;
  25. if (setting.value?.mapId) {
  26. tile = sysTiles.value.find((item) => item.id === setting.value?.mapId);
  27. }
  28. if (!tile && setting.value?.back) {
  29. const back = setting.value!.back;
  30. sdk.setBackdrop(
  31. back,
  32. back === "map" ? SettingResourceType.map : SettingResourceType.envImage,
  33. {}
  34. );
  35. return;
  36. } else if (!tile) {
  37. tile = sysTiles.value[0];
  38. }
  39. // sdk.changeMapTile && sdk.changeMapTile([
  40. // 谷歌-栅格瓦片
  41. // {tempUrl: 'https://mt0.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', maximumLevel: 18},
  42. // 谷歌-卫星图
  43. // {tempUrl: 'https://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', maximumLevel: 18},
  44. // 谷歌-卫星图+标签
  45. // {tempUrl: 'https://mt0.google.com/vt/lyrs=y&x={x}&y={y}&z={z}', maximumLevel: 18},
  46. // 地形图
  47. // {tempUrl: 'https://mt0.google.com/vt/lyrs=t&x={x}&y={y}&z={z}', maximumLevel: 18},
  48. // 仅道路
  49. // {tempUrl: 'https://mt0.google.com/vt/lyrs=h&x={x}&y={y}&z={z}', maximumLevel: 18},
  50. // ])
  51. if (tile) {
  52. console.log("切换瓦片图", tile.mapUrls);
  53. if (params.testMap) {
  54. sdk.changeMapTile([
  55. {
  56. tempUrl: `//wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=6&x={x}&y={y}&z={z}&layer=6&token=YOUR_API_KEY`, //style=6是卫星,7是标准
  57. maximumLevel: 18,
  58. },
  59. {
  60. tempUrl: `//wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}&layer=6&token=YOUR_API_KEY`, //style=6是卫星,7是标准
  61. maximumLevel: 18,
  62. },
  63. ]);
  64. } else {
  65. sdk.changeMapTile && sdk.changeMapTile(tile.mapUrls);
  66. }
  67. sdk.setBackdrop("map", SettingResourceType.map, {});
  68. }
  69. });
  70. };