CaiYuanYiTiHua/src/components/MapboxMaps/index.vue

<template>
  <div class="map-container">
    <div id="mapContainer" class="map-box"></div>
    <div class="map-control">
      <img
        v-for="(item, index) in nextMapControl"
        :key="index"
        :src="item.icon"
        :title="item.title"
        @click="handlerMapControlClick(item.handler)"
      />
      <img v-show="nextMapControl.length > 0" @click="handlerUnDraw" src="/del.png" title="清除" />
    </div>
    <LayerComponent @changeOpenModal="changeOpenModal" @changeOpenInsertShpModal="changeOpenInsertShpModal"/>
    <LayerControl />
    <UseModal v-model:openModal="openModal" @changeOpenModal="changeOpenModal"/>
    <InsertShp v-model:openModal="insertShpModal" />
    <DataListComponent />
    <RightShowInfo />
  </div>
</template>

<script lang="ts" setup>
  import { onMounted, onUnmounted, defineProps, reactive, ref, h } from 'vue';
  import mapboxgl, { Map } from 'mapbox-gl';
  import U from 'mapbox-gl-utils';
  import 'mapbox-gl/dist/mapbox-gl.css';
  import './src/index.less';
  import { MapboxConfig, MapboxDefaultStyle, MapControlConfig } from './src/config';
  import { MP } from './src/MP';
  import { DrawingType } from '@/enums/mapEnum';
  import LayerComponent from './LayerComponent/index.vue'
  import LayerControl from './LayerControl/index.vue'
  import UseModal from './Modal/index.vue'
  import InsertShp from './InsertShp/index.vue'
  import DataListComponent from './DataListComponent/index.vue'
  import RightShowInfo from './RightShowInfo/index.vue'

  const openModal = ref(false);
  const insertShpModal = ref(false)
  const changeOpenModal = (value) => {
    openModal.value = value
  }
  const changeOpenInsertShpModal = (value) => {
    console.log(2222222)
    insertShpModal.value = value
    console.log(insertShpModal.value)
  }

  // map参数类型
  interface MapboxOptionsInterface {
    mapOptions: mapboxgl.MapboxOptions;
    control: DrawingType[];
  }
  const props = defineProps<MapboxOptionsInterface>();

  let nextMapControl: Array<any> = reactive([]);
  nextMapControl = props.control
    ? props.control.map((item) => {
        console.log('item::: ', item);
        return MapControlConfig[item];
      })
    : [];
  console.log('nextMapControl::: ', nextMapControl);

  // 定义地图容器
  let map: Map;
  let mp: any = null;
  // 定义地图回调emit
  // 地图加载完成回调
  const emit = defineEmits(['mapOnLoad', 'mapDraw']);
  onMounted(() => {
    mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
    map = initMap();
    map.on('load', () => {
      //挂载mapbox-gl-utils
      U.init(map);
      mp = new MP(map);
      emit('mapOnLoad', map);
    });
  });
  // 销毁地图
  // 移除地图实例
  onUnmounted(() => {
    map ? map.remove() : null;
  });
  // 初始化地图
  // 返回地图实例
  const initMap = () => {
    return new mapboxgl.Map({
      container: 'mapContainer',
      language: 'zh-cmn',
      projection: 'equirectangular', // wgs84参考系
      style: MapboxDefaultStyle,
      maxZoom: 22,
      minZoom: 6,
      ...props.mapOptions,
    });
  };

  const handlerMapControlClick = (handler: string) => {
    handler === 'handlerDrawPoint' && handlerDrawPoint();
    handler === 'handlerDrawLineString' && handlerDrawLineString();
    handler === 'handlerDrawPolygon' && handlerDrawPolygon();
  };
  //绘制点
  const handlerDrawPoint = () => {
    mp.draw('Point');
    mp.on('Point', function (e) {
      emit('mapDraw', 'Point', e);
    });
  };
  //绘制线
  const handlerDrawLineString = () => {
    mp.draw('LineString');
    mp.on('LineString', function (e) {
      emit('mapDraw', 'LineString', e);
    });
  };
  //绘制面
  const handlerDrawPolygon = () => {
    mp.draw('Polygon');
    mp.on('Polygon', function (e) {
      emit('mapDraw', 'Polygon', e);
    });
  };
  //删除标记
  const handlerUnDraw = () => {
    mp.deleteDraw();
    emit('mapDraw', 'cancel');
  };
</script>