地图展示

wujingjing

2024-07-18 eb0460fbc34fda7906f2949d7dce0f08542e3c8c

 src/components/chat/chatComponents/mapCom/MapCom.vue

@@ -4,18 +4,45 @@

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { GaoDeMap } from '/@/model/map/GaoDeMap';
import { chatComProps } from '../common';
import type { MapData } from './types';
import type { GaoDePosition, LabelMarkerData } from '/@/model/map/GaoDeMap';
import { GaoDeMap } from '/@/model/map/GaoDeMap';
import monitorPointPic from './img/monitor-point.svg';

let gaoDeMap = new GaoDeMap();
const containerRef = ref<HTMLDivElement>(null);
const props = defineProps(chatComProps);

const props = defineProps(chatComProps) as {
   data: MapData;
};
const addMarkerLayer = () => {
   const dataList = (props.data?.values ?? []).map<LabelMarkerData>((item) => ({
      position: [item.posx, item.posy],
      textColor: item.color,
      extData: item,
      title: item.title,
   }));
   gaoDeMap.addMarkerLayer(dataList, {
      markerOpt: {
         icon: {
            url: monitorPointPic,
            size: 30,
         },
      },
      layerOpt: {
         // allowCollision:false
      },
   });
};
onMounted(async () => {
   await gaoDeMap.init({
      container: containerRef.value,
   });
   gaoDeMap.zoomToRect([116.319665, 39.855919], [116.468324, 39.9756]);
   const southWest: GaoDePosition = [props.data.minx, props.data.miny];
   const northEast: GaoDePosition = [props.data.maxx, props.data.maxy];
   gaoDeMap.zoomToRect(southWest, northEast);
   gaoDeMap.applyBasicPlugins();
   addMarkerLayer();
});
</script>
<style scoped lang="scss"></style>