szzs/src/views/base/shopManage/components/mapRang.vue

<template>
  <div class="rang">
    <div class="mapRang" :id="_id" :style="{height:attrs.height?attrs.height+'px':'300px'}"></div>
    <el-button type="primary" class="clear" @click="clearValue">清除</el-button>
  </div>
</template>

<script setup>
  import { computed,getCurrentInstance,nextTick, ref  } from "vue";
  const { proxy } = getCurrentInstance();
  import $bus from '@/benyun/utils/bus.js'
  const value = ref('')
  const config = ref({})
  const lnglat = ref([])
  // const lng = ref(null) // 经度
  // const lat = ref(null) //纬度
  const map = ref(null) //地图
  const zoom = ref(13) //地图层级
  const emit = defineEmits();
  const geocoder = ref('');
  const area = ref('') //区域值
  const address = ref('') //详情值
  const _id = ref('')
  const handler = ref(null)
  const props = defineProps({
    propConfig:{},
    propValue:{},
    parentValue:{}
  })
  const attrs = computed({
    get() {
      return config.value.attr ? config.value.attr : {};
    }
  })

  const onChange = () => {
    emit('onChange',getValue());
  }
  //设置配置
  const setConfig = c => {
    if(c){
      config.value = c;
    }
  }

  //获取配置
  const getConfig = () => {
    return lodash.cloneDeep(config.value)
  }

  const getValue = () => {
    let obj = proxy.lodash(lnglat.value);
    // if(obj.length > 2){
    //   if(obj[obj.length - 1].lat === obj[obj.length - 2].lat && obj[obj.length - 1].lng === obj[obj.length - 2].lng){
    //     obj.splice(obj.length - 1,1)
    //   }
    // }
    return JSON.stringify(obj)
  }

  const getUuid = () => {
    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
  }

  const clearValue = () => {
    lnglat.value = []
    map.value.clearOverLays();
    openHandler()
    onChange()
  }

  const openHandler = () => {
    handler.value = new T.PolygonTool(map.value);
    handler.value.open();
    handler.value.on("draw",getLngLat);
  }
  //初始化地图
  const initMap = callb => {
    if(map.value) return
    map.value = new T.Map(_id.value);
    map.value.centerAndZoom(new T.LngLat(109.411030,24.328160), zoom.value);
    geocoder.value = new T.Geocoder();
    openHandler()
    if(callb) {
      callb()
    }
  }

  const getLngLat = e => {
    lnglat.value=e.currentLnglats
    onChange()
  }
  const setValue = v => {
    nextTick(() => {
      if(v) {
        try{
          lnglat.value = JSON.parse(v)
          zoom.value = 17
          if(!map.value){
            initMap(() => {
              initPoint()
            })
          }else{
            initPoint()
          }
        }catch(e) {}
      } else {
        let pointArea = () => {
          let address = ''
          if(props.parentValue.addrCodeInfo){
            address = props.parentValue.addrCodeInfo
          }
          if(props.parentValue.addrInfo){
            address = address + props.parentValue.addrInfo
          }
          if(address){
            zoom.value = 17;
            geocoder.value.getPoint(address, searchResult);
          }
        }
        if(!map.value){
          initMap(() => {
            pointArea()
          })
        }else{
          pointArea()
        }
      }
    })
  }

  const initPoint = () => {
    let points = [];
    let totalLng = 0;
    let totalLat = 0;
    if(lnglat.value.length == 0) return
    for(const item of lnglat.value){
      if(Number(item.lng)){
        totalLng = totalLng + Number(item.lng)
      }
      if(Number(item.lat)){
        totalLat = totalLat + Number(item.lat)
      }
      points.push(new T.LngLat(item.lng, item.lat));
    }
    //创建面对象
    let polygon = new T.Polygon(points);
    //向地图上添加面
    map.value.addOverLay(polygon);
    handler.value.close()
    map.value.centerAndZoom(new T.LngLat(totalLng/lnglat.value.length,totalLat/lnglat.value.length), zoom.value);
  }
  const searchResult = result => {
    if(result.getStatus() == 0){
			map.value.panTo(result.getLocationPoint(), zoom.value);
		}
  }
  // 接收数据
  onMounted(()=>{
    $bus.on('areaEvent',(data)=>{
      let areaValue = data.area ? data.area : '';
      if(area){
        area.value = areaValue.replaceAll('/','');
        if(geocoder.value){
          if(address.value){
            zoom.value = 17;
          }else if(props.parentValue.addrInfo) {
            address.value = props.parentValue.addrInfo
            zoom.value = 17;
          }
          geocoder.value.getPoint(area.value + address.value, searchResult);
        }
      }
    })
    $bus.on('addressEvent',data => {
      address.value = data;
      if(address.value && geocoder.value){
        if(!area.value && props.parentValue.addrCodeInfo) {
          area.value = props.parentValue.addrCodeInfo.replaceAll('/','');
        }
        zoom.value = 17;
        geocoder.value.getPoint(area.value + address.value, searchResult);
      }
    })
  })

  defineExpose({
    getValue,getConfig,setConfig,clearValue,setValue
  })

  _id.value = getUuid()

  if(props.propConfig){
    setConfig(props.propConfig)
  }
  if(props.propValue){
    setValue(props.propValue)
  }

  nextTick(() => {
    initMap()
  })
  

</script>

<style lang="scss" scoped>
.rang{
  width: 100%;
  position: relative;
}
.mapRang{
  width: 100%;
  height: 300px;
}
.clear{
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 999;
}
</style>