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

<template>
  <div class="light-map">
    <map 
      id="prevMap"
      map-id="prevMap"
      class="light-map-map"
      :markers="mapLoader.content.value || []"
      :polygons="polygon"
      :polyline="polyline"
      :enable-poi="false"
      :scale="10"
      :longitude="AppCofig.defaultLonLat[0]"
      :latitude="AppCofig.defaultLonLat[1]"
    />
    <SimpleDropDownPicker 
      class="light-map-region-picker" 
      v-model:modelValue="selectedRegion" 
      :columns="regionLoader.content.value" 
    />
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, ref, watch } from 'vue';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import { geoJsonToWechatMapShapes } from '@/common/utils/geoJsonToWechatMap';
import LightVillageApi from '@/api/light/LightVillageApi';
import MapApi from '@/api/map/MapApi';
import AppCofig from '@/common/config/AppCofig';
import type { MapMarker, MapPolygon, MapPolyline } from '@/types/Map';
import SimpleDropDownPicker from '@/common/components/SimpleDropDownPicker.vue';

const instance = getCurrentInstance();
const mapCtx = uni.createMapContext('prevMap', instance);
const selectedRegion = ref<number>();

const regionLoader = useSimpleDataLoader(async () => {
  return [
    {
      id: undefined as any,
      name: '厦门市 · 湖里区',
    },
  ]
});
const mapLoader = useSimpleDataLoader<MapMarker[]>(async () => {
  const res = (await LightVillageApi.getVillageList(undefined, selectedRegion.value, undefined, 1, 12)).map((p, i) => {
    const maker : MapMarker = {
      ...p,
      id: p.id ?? i,
      title: p.villageName,
      longitude: Number(p.longitude),
      latitude: Number(p.latitude),
      width: 30,
      height: 30,
      iconPath: '',
      callout: {
        content: p.villageName,
        color: '#000000',
        fontSize: 12,
        bgColor: '#ffffff',
        borderRadius: 5,
      },
    }

    if (p.isLight) {
      if (p.lightValue >= 1) {
        maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/LightSun.png`;
      } else if (p.lightValue >= 0.5) {
        maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/LightMoon.png`;
      } else if (p.lightValue >= 0.25) {
        maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/LightStar.png`;
      } else {
        maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/LightStar.png`;
      }
      const size = (p.lightValue + 0.5) * 36;
      maker.width = size;
      maker.height = size;
    } else {
      maker.width = 15;
      maker.height = 15;
      maker.iconPath = `https://mncdn.wenlvti.net/app_static/xiangyuan/images/map/StarNotLight.png`;
    }

    return maker as MapMarker;
  });

  /* const countryGeoJsonData = await MapApi.loadCountryGeoJsonData();
  const { polygons, polylines: geoPolylines } = geoJsonToWechatMapShapes(countryGeoJsonData, {
    fillColor: '#344A41',
    strokeColor: '#4AB58A',
    strokeWidth: 2,
    level: 'abovebuildings',
  });
  polygon.value.push(...polygons);
  polyline.value = geoPolylines; */

  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;
});

const polygon = ref<MapPolygon[]>([
  /* {
    fillColor: '#000',
    level: 'abovebuildings',
    points: [
      { latitude: -89, longitude: 0 },
      { latitude: 89, longitude: 0 },
      { latitude: 89, longitude: 179.999 },
      { latitude: -89, longitude: 179.999 },
    ]
  } */
]);
const polyline = ref<MapPolyline[]>([]);

watch(selectedRegion, async () => {
  mapLoader.loadData(undefined, true);
});

</script>

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

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

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