mingnan/src/pages/inhert/map/index.vue

<template>
  <view class="d-flex flex-col bg-base">
    
    <u-tabs 
      :list="tabs" 
      lineWidth="30"
      lineColor="#d9492e"
      :activeStyle="{
        color: '#000',
        fontWeight: 'bold',
        transform: 'scale(1.05)'
      }"
      :inactiveStyle="{
        color: '#606266',
        transform: 'scale(1)'
      }"
      :scrollable="false"
      class="top-tab"
      @click="(e: any) => tab = e.index"
    />
    <view class="d-flex flex-col p-2">
      <uni-search-bar 
        v-model="searchValue"
        radius="100" 
        bgColor="#fff" 
        placeholder="搜索文物" 
        clearButton="auto" 
        cancelButton="none"
        @confirm="doSearch"
      />
    </view>
    <view class="d-flex flex-row justify-around p-2 pt-0">
      <SimpleDropDownPicker v-if="tab == 0" v-model="selectedTag" :columns="categoryData.content.value" />
      <SimpleDropDownPicker v-model="selectedLevel" :columns="levelData.content.value" />
      <SimpleDropDownPicker v-model="selectedRegion" :columns="regionData.content.value" />
    </view>
    <view class="d-flex flex-row flex-wrap justify-between">
      <map 
        id="map"
        class="w-100"
        style="height:80vh"
        :makers="[]"
        :scale="13"
        @markertap="onMarkerTap"
      />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useSimplePageListLoader } from '@/common/composeabe/SimplePageListLoader';
import { navTo } from '@/common/utils/PageAction';
import { useSimpleDataLoader } from '@/common/composeabe/SimpleDataLoader';
import SimpleDropDownPicker from '@/common/components/SimpleDropDownPicker.vue';
import SeminarContent from '@/api/inheritor/SeminarContent';
import CommonContent, { GetContentListParams } from '@/api/CommonContent';
import UnmoveableContent from '@/api/inheritor/UnmoveableContent';
import ProjectsContent from '@/api/inheritor/ProjectsContent';
import { onLoad } from '@dcloudio/uni-app';

const tab = ref(0)
const tabs = [
  {
    name: '文物'
  },
  {
    name: '非遗'
  },
  {
    name: '非遗传习所'
  },
];
const mapCtx = uni.createMapContext('map');
const categoryData = useSimpleDataLoader(async () => 
  [{
    id: 0, 
    name: '全部分类'
  }].concat((await CommonContent.getCategoryList(3)).map((item) => ({
    id: item.id,
    name: item.title,
  })))
, true);
const levelData = useSimpleDataLoader(async () => 
  [{
    id: 0, 
    name: '全部级别'
  }].concat((await CommonContent.getCategoryList(2)).map((item) => ({
    id: item.id,
    name: item.title,
  })))
, true);
const regionData = useSimpleDataLoader(async () => 
  [{
    id: 0, 
    name: '全部区域'
  }].concat((await CommonContent.getCategoryList(1)).map((item) => ({
    id: item.id,
    name: item.title,
  })))
, true);
const selectedTag = ref(0);
const selectedLevel = ref(0);
const selectedRegion = ref(0);
const searchValue = ref('');
const listLoader = useSimplePageListLoader(50, async (page, pageSize) => {
  let list;
  switch (tab.value) {
    default:
    case 0:
      list = (await UnmoveableContent.getContentList(new GetContentListParams().setSelfValues({
        crType: selectedTag.value == 0 ? undefined: selectedTag.value,
        level: selectedLevel.value == 0 ? undefined: selectedLevel.value,
        region: selectedRegion.value == 0 ? undefined: selectedRegion.value,
        keywords: searchValue.value,
      }), page, pageSize)).list;
      break;
    case 1:
      list = (await ProjectsContent.getContentList(new GetContentListParams().setSelfValues({
        level: selectedLevel.value == 0 ? undefined: selectedLevel.value,
        region: selectedRegion.value == 0 ? undefined: selectedRegion.value,
        keywords: searchValue.value,
      }), page, pageSize)).list;
      break;
    case 2:
      list = (await SeminarContent.getContentList(new GetContentListParams().setSelfValues({
        level: selectedLevel.value == 0 ? undefined: selectedLevel.value,
        region: selectedRegion.value == 0 ? undefined: selectedRegion.value,
        keywords: searchValue.value,
      }), page, pageSize)).list;
      break;
  }
  
  const res = list.map((p) => {
    return {
      //...p,
      id: p.id,
      longitude: Number(p.longitude),
      latitude: Number(p.latitude),
      iconPath: p.thumbnail,
      width: 40,
      height: 40,
      joinCluster: true,
      callout: {
        content: p.title,
        color: "#ffffff",
        fontSize: 15,
        borderRadius: 15,
        padding: "10",
        bgColor: "#d9492e",
        display: "ALWAYS",
      },
    }
  })
  mapCtx.includePoints({
    points: res.map(p => ({
      latitude: p.latitude,
      longitude: p.longitude,
    })),
    padding: [20, 20, 20, 20],
  });
  mapCtx.addMarkers({
    clear: true,
    markers: res, 
  })

  return res;
}, true);

watch(selectedLevel, () => {
  listLoader.loadData(undefined, true);
});
watch(selectedRegion, () => {
  listLoader.loadData(undefined, true);
});
watch(selectedTag, () => {
  listLoader.loadData(undefined, true);
});
watch(tab, () => {
  listLoader.loadData(undefined, true);
});

function doSearch() {
  listLoader.loadData(undefined, true);
}
function onMarkerTap(e: { markerId: number }) {
  goDetails(e.markerId);
}
function goDetails(id: number) {
  switch (tab.value) {
    case 0: navTo('/pages/inhert/artifact/details', { id }); break;
    case 1: navTo('/pages/inhert/intangible/details', { id }); break;
    default:
    case 2: navTo('/pages/article/details', { id }); break;
  }
}

onLoad(() => {
  mapCtx.initMarkerCluster({
    enableDefaultStyle: false,
    zoomOnClick: true,
    gridSize: 60,
  });
  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: 50,
          height: 50,
          bgColor: '#419afcD9', // 背景颜色
          borderRadius: 25,
          textAlign: 'center',
          anchorX: -10,
          anchorY: -35,
        },
      };
    });
    mapCtx.addMarkers({
      markers: customClusters,
      clear: false,
    });
  })
  listLoader.loadData(undefined, true);
})
</script>