xiangyuan-app/src/pages/home/components/LightMap.vue

<template>
  <div 
    class="light-map"
    :class="{ 
      'full': full ,
      'small': small
    }" 
  >
    <slot />
    <map 
      id="prevMap"
      map-id="prevMap"
      class="light-map-map"
      :enable-poi="false"
      :scale="12"
      :longitude="lonlat?.longitude"
      :latitude="lonlat?.latitude"
      @markertap="onMarkerTap" 
    />
    <FlexCol v-if="isEmptyRegion" 
      gap="gap.xl" 
      position="absolute" 
      inset="0" 
      padding="space.xl"
      center 
      backgroundColor="mask.default"
    > 
      <Text fontConfig="importantTitle" textAlign="center">您选择的地区还未开通亮乡源数据，可联系客服开通</Text>
      <button open-type="contact" class="remove-button-style">
        <FlexCol padding="space.md" radius="radius.lg" center backgroundColor="white">
          <Text fontConfig="primaryTitle">联系客服</Text>
        </FlexCol>
      </button>
    </FlexCol>
    <SimpleDropDownPicker 
      v-if="!isEmptyRegion"
      class="light-map-region-picker" 
      :modelValue="selectedRegion" 
      @update:modelValue="onSelectedRegion"
      :columns="regionLoader.content.value" 
    />
    <FlexCol
      v-if="isDev"
      :innerStyle="{
        position: 'absolute',
        bottom: '20rpx',
        left: '20rpx',
        zIndex: 100,
        backgroundColor: '#ffffff',
      }"
    >
      <Text :text="`lonlat:`" />
      <Text :text="`${lonlat?.longitude}`" />
      <Text :text="`${lonlat?.latitude}`" />
    </FlexCol>
    <NButton 
      :innerStyle="{
        position: 'absolute',
        bottom: '20rpx',
        right: '20rpx',
        zIndex: 100,
        backgroundColor: '#ffffff',
      }"
      text="定位"
      icon="navigation" 
      @click="emit('getCurrentLonlat')" 
    />
  </div>
</template>

<script setup lang="ts">
import { computed, getCurrentInstance, onMounted, ref, watch } from 'vue';
import { navTo } from '@/components/utils/PageAction';
import { waitTimeOut } from '@imengyu/imengyu-utils';
import { useSimpleDataLoader } from '@/components/composeabe/loader/SimpleDataLoader';
import LightVillageApi, { VillageListItem } from '@/api/light/LightVillageApi';
import type { MapMarker } from '@/types/Map';
import AppCofig, { isDev } from '@/common/config/AppCofig';
import SimpleDropDownPicker from '@/common/components/SimpleDropDownPicker.vue';
import NButton from '@/components/basic/Button.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import Text from '@/components/basic/Text.vue';
import CommonContent from '@/api/CommonContent';

const instance = getCurrentInstance();
const mapCtx = uni.createMapContext('prevMap', instance);
const selectedRegion = ref<number>();
const nextNeedAutoFocus = ref(false);
const villageData = new Map<number, VillageListItem>();
const emit = defineEmits([
  'getCurrentLonlat',
  'update:isLightMode', 
  'update:lonlat',
  'selectVillage',
  'regionChanged',
]);

const props = defineProps<{
  lonlat?: { longitude: number, latitude: number } | undefined;
  city?: string;
  isLightMode?: boolean;
  small?: boolean;
  full?: boolean;
}>();

const regionLoader = useSimpleDataLoader(async () => {
  if (!props.city)
    return [];
  return (await CommonContent.searchRegion(props.city)).map(p => ({
    id: p.id,
    name: p.title,
  }));
}, false);
const mapLoader = useSimpleDataLoader<MapMarker[]>(async () => {
  mapCtx.removeMarkers({
    markerIds: Array.from(villageData.keys()),
  })
  villageData.clear();
  if (!selectedRegion.value)
    return [];
  await waitTimeOut(200);
  const res = (await LightVillageApi.getVillageList(undefined, selectedRegion.value, undefined, 1, 100)).map((p, i) => {
    villageData.set(p.id, p);
    const maker : MapMarker = {
      id: p.id ?? i,
      title: p.name,
      longitude: Number(p.longitude),
      latitude: Number(p.latitude),
      width: 30,
      height: 30,
      iconPath: '',
      joinCluster: true,
      callout: {
        display: 'ALWAYS',
        content: p.name,
        color: '#000000',
        fontSize: 12,
        padding: 5,
        bgColor: '#ffffff',
        borderRadius: 5,
      },
    }

    if (p.isLight) {
      if (p.lightValue >= 1) {
        maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/Light3.png`;
      } else if (p.lightValue >= 0.5) {
        maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/Light2.png`;
      } else if (p.lightValue >= 0.25) {
        maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/Light1.png`;
      } else {
        maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/Light1.png`;
      }
      const size = Math.floor(35 +(p.lightValue) * 10);
      maker.width = size;
      maker.height = size;
      
    } else {
      maker.width = 35;
      maker.height = 35;
      maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/LightUnLight.png`;
    }

    return maker as MapMarker;
  });

  mapCtx.addMarkers({
    clear: true,
    markers: res, 
  })

  if (nextNeedAutoFocus.value) {
    setTimeout(() => {
      mapCtx.includePoints({
        points: res.map(p => {
          if (!p.longitude || !p.latitude) {
            p.longitude = AppCofig.defaultLonLat[0];
            p.latitude = AppCofig.defaultLonLat[1];
          }
          return {
            latitude: p.latitude,
            longitude: p.longitude,
          }
        }),
        padding: [20, 20, 20, 20],
      });
    }, 200);
  }

  return res;
}, false, false, true);

const isEmptyRegion = computed(() => {
  return !selectedRegion.value || !mapLoader.content.value?.length;
});

function onMarkerTap(e: any) {
  if (props.isLightMode) {
    emit('update:isLightMode', false);
    navTo('/pages/home/light/submit', {
      villageId: e.markerId,
    });
    return;
  }
  const village = villageData.get(e.markerId);
  if (village) {
    emit('selectVillage', village);
  }
}
function onSelectedRegion(regionId: number) {
  selectedRegion.value = regionId;
  nextNeedAutoFocus.value = true;
  mapLoader.reload();
  emit('regionChanged', regionId);
}
function setCurrentRegion(regionName: string) {
  selectedRegion.value = regionLoader.content.value?.find(p => p.name == regionName)?.id || 
    regionLoader.content.value?.[0]?.id || undefined;
  emit('regionChanged', selectedRegion.value);
  mapLoader.reload();
}

watch(() => props.city, async (newVal) => {
  await regionLoader.reload();
  setCurrentRegion(newVal || '');
  await mapLoader.reload();
}, { immediate: true });

onMounted(async () => {
  mapCtx.initMarkerCluster({
    enableDefaultStyle: false,
    zoomOnClick: true,
    gridSize: 40,
  });
  mapCtx.on('markerClusterCreate', (e: { clusters: any[] }) => {
    const customClusters = e.clusters.map((cluster) => {
      const { center, clusterId, markerIds } = cluster;
      return {
        ...center,
        width: 0,
        height: 0,
        clusterId,
        label: {
          content: markerIds.length.toString(), // 聚合点的数量
          fontSize: 16,
          color: '#fff',
          width: 30,
          height: 30,
          bgColor: '#8bb346', // 背景颜色
          borderRadius: 25,
          textAlign: 'center',
          anchorX: -10,
          anchorY: -35,
        },
      };
    });
    mapCtx.addMarkers({
      markers: customClusters,
      clear: false,
    });
  });
  await regionLoader.reload();
});
</script>

<style lang="scss">
.light-map {
  position: relative;
  width: 100%;
  height: 600rpx;
  border-radius: 30rpx;
  overflow: hidden;

  &.full {
    height: 100vh;
    border-radius: 0;

    .light-map-map {
      height: 100vh;
    }
  }
  &.small {
    height: 500rpx;
    border-radius: 20rpx;
    .light-map-map {
      height: 500rpx;
    }
  }

  .light-map-map {
    width: 100%;
    height: 600rpx;
  }

  .light-map-region-picker {
    position: absolute;
    bottom: 20rpx;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
  }

  .light-map-address {
    position: absolute;
    bottom: 20rpx;
    right: 20rpx;
    z-index: 100;
  }
}
</style>