简柏林 / thingskit-front · Commits

Commit fd12ae039af965f3a98bd90f4f8b9b0626ac6bdc

Authored by ww
1 parent 30d58ef1

feat: add map component

Inline Side-by-side
Showing 2 changed files with 39 additions and 0 deletions
  1 +<script lang="ts" setup>
  2 + import { nextTick, onMounted, ref, unref } from 'vue';
  3 + import { useScript } from '/@/hooks/web/useScript';
  4 + import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
  5 +
  6 + const wrapRef = ref<HTMLDivElement | null>(null);
  7 + const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
  8 +
  9 + async function initMap() {
  10 + await toPromise();
  11 + await nextTick();
  12 + const wrapEl = unref(wrapRef);
  13 + if (!wrapEl) return;
  14 + const BMap = (window as any).BMap;
  15 + const map = new BMap.Map(wrapEl);
  16 + const point = new BMap.Point(116.404, 39.915);
  17 + map.centerAndZoom(point, 15);
  18 + map.enableScrollWheelZoom(true);
  19 + }
  20 +
  21 + onMounted(() => {
  22 + initMap();
  23 + });
  24 +</script>
  25 +
  26 +<template>
  27 + <div class="w-full h-full flex justify-center items-center">
  28 + <div ref="wrapRef" class="w-[95%] h-[95%]"></div>
  29 + </div>
  30 +</template>
@@ -27,6 +27,7 @@ import DigitalDashBoard from './InstrumentComponent/DigitalDashBoard.vue'; @@ -27,6 +27,7 @@ import DigitalDashBoard from './InstrumentComponent/DigitalDashBoard.vue';
27 import ToggleSwitch from './ControlComponent/ToggleSwitch.vue'; 27 import ToggleSwitch from './ControlComponent/ToggleSwitch.vue';
28 import SlidingSwitch from './ControlComponent/SlidingSwitch.vue'; 28 import SlidingSwitch from './ControlComponent/SlidingSwitch.vue';
29 import SwitchWithIcon from './ControlComponent/SwitchWithIcon.vue'; 29 import SwitchWithIcon from './ControlComponent/SwitchWithIcon.vue';
  30 +import MapComponent from './MapComponent/MapComponent.vue';
30 31
31 export enum FrontComponentCategory { 32 export enum FrontComponentCategory {
32 TEXT = 'text', 33 TEXT = 'text',
@@ -57,6 +58,7 @@ export enum FrontComponent { @@ -57,6 +58,7 @@ export enum FrontComponent {
57 CONTROL_COMPONENT_TOGGLE_SWITCH = 'control-component-toggle-switch', 58 CONTROL_COMPONENT_TOGGLE_SWITCH = 'control-component-toggle-switch',
58 CONTROL_COMPONENT_SWITCH_WITH_ICON = 'control-component-switch-with-icon', 59 CONTROL_COMPONENT_SWITCH_WITH_ICON = 'control-component-switch-with-icon',
59 CONTROL_COMPONENT_SLIDING_SWITCH = 'control-component-sliding-switch', 60 CONTROL_COMPONENT_SLIDING_SWITCH = 'control-component-sliding-switch',
  61 + MAP_COMPONENT_TRACK = 'map-component-track',
60 } 62 }
61 63
62 export interface ComponentConfig { 64 export interface ComponentConfig {
@@ -164,6 +166,13 @@ frontComponentMap.set(FrontComponent.CONTROL_COMPONENT_TOGGLE_SWITCH, { @@ -164,6 +166,13 @@ frontComponentMap.set(FrontComponent.CONTROL_COMPONENT_TOGGLE_SWITCH, {
164 transformConfig: transformControlConfig, 166 transformConfig: transformControlConfig,
165 }); 167 });
166 168
  169 +frontComponentMap.set(FrontComponent.MAP_COMPONENT_TRACK, {
  170 + Component: MapComponent,
  171 + ComponentKey: FrontComponent.MAP_COMPONENT_TRACK,
  172 + ComponentCategory: FrontComponentCategory.MAP,
  173 + transformConfig: () => {},
  174 +});
  175 +
167 frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_1, TextComponentDefaultConfig); 176 frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_1, TextComponentDefaultConfig);
168 frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_3, TextComponentDefaultConfig); 177 frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_3, TextComponentDefaultConfig);
169 frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_4, TextComponentDefaultConfig); 178 frontComponentDefaultConfigMap.set(FrontComponent.TEXT_COMPONENT_4, TextComponentDefaultConfig);