地域图谱

杨磊

2024-05-20 0f3805cc33bf479fc0f44d456dfb20eb8528fe92

 src/pages/territory/territory.vue

@@ -1,10 +1,7 @@
<template>
  <view class="pageBox">
    <!-- 顶部导航 -->
    <headNav
      :idIndex="idIndex"
      text="中医地域医谱"
    />
    <headNav :idIndex="idIndex" text="中医地域医谱" style="z-index: 999" />
    <view
      class="flex flex-center"
      style="width: 100%; margin: 0.2rem 0 0.34rem; justify-content: flex-start"
@@ -17,11 +14,7 @@
        :keyword="keyword"
      />
      <ul class="flex">
        <li
          style=""
          v-for="(item, index) in dynasty"
          :key="item.id"
        >
        <li style="" v-for="(item, index) in dynasty" :key="item.id">
          <view
            @click="SchoolClick(item.id)"
            class="flex flex-center font-family school"
@@ -49,10 +42,7 @@
                border-radius: 50%;
              "
            ></view>
            <view
              class=""
              style="color: #2c2c2c; font-size: 0.12rem"
            >{{
            <view class="" style="color: #2c2c2c; font-size: 0.12rem">{{
              item.name
            }}</view>
          </view>
@@ -72,10 +62,7 @@
        top: 2.2rem;
      "
    >
      <div
        slot="header"
        class="clearfix"
      >
      <div slot="header" class="clearfix">
        <span>人物 ({{ SearchArr.length }})</span>
        <el-button
          style="
@@ -86,12 +73,10 @@
          "
          @click="isSearch = false"
          type="text"
        >关闭</el-button>
          >关闭</el-button
        >
      </div>
      <view
        class=""
        style="overflow: auto; height: 2.5rem"
      >
      <view class="" style="overflow: auto; height: 2.5rem">
        <ul
          class="information"
          v-for="(item, index) in SearchArr"
@@ -125,10 +110,7 @@
      "
      :style="{ top: isTop, left: isLeft }"
    >
      <div
        slot="header"
        class="clearfix"
      >
      <div slot="header" class="clearfix">
        <span v-if="currentMark">{{
          currentMark.name ? currentMark.name : "-"
        }}</span>
@@ -141,12 +123,10 @@
          "
          @click="isEchTrue = false"
          type="text"
        >关闭</el-button>
          >关闭</el-button
        >
      </div>
      <ul
        class="information"
        v-if="currentMark"
      >
      <ul class="information" v-if="currentMark">
        <li>
          姓名:
          {{ currentMark.name ? currentMark.name : "-" }}
@@ -163,10 +143,9 @@
        @click="viewMoreClick"
        style="width: 100%; padding: 3px 0; font-size: 0.12rem; color: #597aa5"
        type="text"
      >查看更多>></el-button>
        >查看更多>></el-button
      >
    </el-card>
    <!-- echarts地图 -->
    <!-- <view id="main" style="width: 100vw; position: relative"></view> -->
    <div id="map"></div>
    <!-- 朝代 -->
    <view
@@ -183,7 +162,7 @@
            class="flex flex-center"
            style="height: 0.35rem; background-color: #fff; color: #244a7b"
          >
            {{ item.coord }}
            {{ item.start }}
          </view>
          <view
            class="flex flex-center font-family"
@@ -202,7 +181,7 @@
              background: dynasty1Color == item.id ? '#244A7B' : '#597AA5',
            }"
          >
            {{ item.name }}
            {{ item.dynastyChs }}
          </view>
        </li>
      </ul>
@@ -217,7 +196,7 @@
import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";
import "leaflet.chinatmsproviders";
import { getRetrieval } from "@/api/index.js";
import { getRetrieval, getDynasty } from "@/api/index.js";
export default {
  data() {
    return {
@@ -251,7 +230,7 @@
        },
      ],
      // 下面的朝代1
      dynasty1Color: 1,
      dynasty1Color: "",
      dynasty1: [
        {
          name: "夏朝",
@@ -334,12 +313,12 @@
      // 朝代
      dynasty: [
        {
          name: "夏朝",
          name: "夏",
          color: "#90BBD8",
          id: 1,
        },
        {
          name: "商朝",
          name: "商",
          color: "#EDD28B",
          id: 2,
        },
@@ -349,24 +328,29 @@
          id: 3,
        },
        {
          name: "秦朝",
          name: "秦",
          color: "#9CC27A",
          id: 4,
        },
        {
          name: "汉朝",
          name: "汉",
          color: "#5B6CB9",
          id: 5,
        },
        {
          name: "隋朝",
          name: "隋",
          color: "#8860A8",
          id: 6,
        },
        {
          name: "唐朝",
          name: "唐",
          color: "#DE8E66",
          id: 7,
        },
        {
          name: "明",
          color: "#DE8E66",
          id: 8,
        },
      ],
      // 搜索后是否显示弹框
@@ -393,64 +377,74 @@
    console.log("optionsoptionsoptions", options.id);
  },
  mounted() {
    // this.$nextTick(() => {
    // loadBMap("1NJdwrI1CfT6lrykVhDkmWgsO6O2bjQK").then(() => {
    //   this.innt();
    // });
    // })
    this.getDynastyList();

    this.getDataList();
  },
  methods: {
    getDynastyList() {
      getDynasty().then((res) => {
        console.log(res, "123123");
        this.dynasty1 = res.list;
      });
    },
    showCard(info) {
      console.log(info);
      console.log(this.markerList);
      const item = this.markerList.find((f) => f.id == info.id);
      console.log(item, "12312");
      this.currentMark = {
        name: item?.WEAK_NAME[0]?.content1,
        nikeName: item?.ALIAS[0]?.content2,
        nativePlace: item?.content1,
        barnch: item?.MEDICAL_BRANCH[0]?.content1,
        medical: item?.MEDICAL_EXPERTISE[0]?.content1,
      };
      console.log(this.currentMark);
      console.log(this.map);
      this.isEchTrue = true;
      const item = this.markerList.find((f) => f.id == info.id);
      var latlng = L.latLng(item.yCoord, item.xCoord);
      this.map.setView(latlng, 10);
    },
    getDataList() {
      getRetrieval({ keyword: this.keyword, dynasty: "" }).then((res) => {
        let markerList = [];
        const listData = res.object.personList;
        for (let i = 0; i < listData.length; i++) {
          const item = listData[i];
          if (item.NATIVE_PLACE?.length > 0) {
            item.NATIVE_PLACE.forEach((citem) => {
              if (citem.xCoord && citem.yCoord) {
                markerList.push({ ...citem, ...item });
      getRetrieval({ keyword: this.keyword, dynasty: this.dynasty1Color }).then(
        (res) => {
          if (res.object) {
            let markerList = [];
            const listData = res.object.personList;
            console.log(listData, "listData");
            for (let i = 0; i < listData.length; i++) {
              const item = listData[i];
              if (item.NATIVE_PLACE?.length > 0) {
                item.NATIVE_PLACE.forEach((citem) => {
                  if (citem.xCoord && citem.yCoord) {
                    const currentDynasty = this.dynasty1.find(
                      (f) => f.id == item.PERIOD[0].content1
                    );
                    if (currentDynasty) {
                      item.dynastyInfo = currentDynasty;
                    }
                    markerList.push({ ...citem, ...item });
                  }
                });
              }
            });
            }
            console.log(markerList, "markerList");
            this.initMap(markerList);
            this.SearchArr = markerList.map((item) => ({
              birthAndDeath: item?.BIRTH_YEAR[0]?.content1
                ? item?.BIRTH_YEAR[0]?.content1 +
                  "-" +
                  item?.DEATH_YEAR[0]?.content1
                : "-",
              name: item?.NAME[0]?.content1,
              source: "-",
              id: item.id,
            }));
            this.markerList = markerList;
          }
        }
        this.initMap(markerList);
        this.SearchArr = markerList.map((item) => ({
          birthAndDeath: item?.BIRTH_YEAR[0]?.content1
            ? item?.BIRTH_YEAR[0]?.content1 +
              "-" +
              item?.DEATH_YEAR[0]?.content1
            : "-",
          name: item?.NAME[0]?.content1,
          source: "-",
          id: item.id,
        }));
        this.markerList = markerList;
        console.log(markerList, "markerList");
      });
      );
    },
    //初始化地图
    initMap(markerList) {
      this.isEchTrue = false;
      if (this.map) {
        this.map.remove();
      }
      var map = L.map("map", {
        attributionControl: false,
        preferCanvas: true,
        attributionControl: false,
      }).setView([39.91667, 116.41667], 3);

      L.tileLayer
@@ -467,11 +461,49 @@
        popupAnchor: [1, -24], // 该点是相对于iconAnchor弹出信息的位置  这个是我手动调出来的，文档默认原始值是[-1，-76]，我是去一半值，取一半值调出来的
      });

      let icon = L.divIcon({
        html: "<div class='map-circle-name'></div>",
        iconSize: [80, 80],
        className: "map-circle",
      });
      this.map = map;
      if (markerList.length) {
        for (let i = 0; i < markerList.length; i++) {
          const item = markerList[i];
          let currentClassName = "map-circle-name";
          switch (item.dynastyInfo.dynastyChs) {
            case "夏":
              currentClassName = "map-circle-xia";
              break;
            case "商":
              currentClassName = "map-circle-shang";
              break;
            case "西周":
              currentClassName = "map-circle-zhou";
              break;
            case "秦":
              currentClassName = "map-circle-qin";
              break;
            case "汉":
              currentClassName = "map-circle-han";
              break;
            case "隋":
              currentClassName = "map-circle-sui";
              break;
            case "唐":
              currentClassName = "map-circle-tang";
              break;
            case "明":
              currentClassName = "map-circle-ming";
              break;
          }
          let icon = L.divIcon({
            html: `<div class='${currentClassName}'></div>`,
            iconSize: [80, 80],
            className: "map-circle",
          });
          const temp_mark = L.marker([item.yCoord, item.xCoord], {
            icon: DefaultIcon1,
            icon: icon,
          }).addTo(map);
          temp_mark.on("click", (e) => {
            this.isEchTrue = true;
@@ -501,6 +533,7 @@
    dynastyBottomClick(id) {
      console.log(id);
      this.dynasty1Color = id;
      this.getDataList();
    },
    onSearch(val) {
      this.isSearch = true;
@@ -524,6 +557,61 @@
</script>

<style>
::v-deep .map-circle-name {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(144, 187, 216);
}
::v-deep .map-circle-xia {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(144, 187, 216);
}
::v-deep .map-circle-shang {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(237, 210, 139);
}
::v-deep .map-circle-zhou {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(207, 116, 109);
}
::v-deep .map-circle-qin {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(156, 194, 122);
}
::v-deep .map-circle-han {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(91, 108, 185);
}
::v-deep .map-circle-sui {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(136, 96, 168);
}
::v-deep .map-circle-tang {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(136, 96, 168);
}
::v-deep .map-circle-ming {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(222, 142, 102);
}

.pageBox {
  width: 100%;
  height: 100%;
@@ -648,6 +736,6 @@
  width: 100%;
  margin: 0 auto;
  font-size: 14px !important;
  z-index: -1 !important;
  /* z-index: -1 !important; */
}
</style>