Merge branch 'master' of http://182.92.203.7:2001/r/TCM_CharacterLibrary

YM

2024-05-17 e33eb0eb98aa0a88d2b3a7163abf92e4e028fb31

 src/pages/territory/territory.vue

@@ -18,7 +18,7 @@
            @click="SchoolClick(item.id)"
            class="flex flex-center font-family school"
            :style="{
              marginRight: index === dynasty.length - 1 ? '0' : '0.03rem'
              marginRight: index === dynasty.length - 1 ? '0' : '0.03rem',
            }"
            style="
              font-weight: 500;
@@ -90,7 +90,7 @@
    <!-- echarts里面的数据点击后弹框 -->
    <el-card
      class="box-card echartsTrue"
      v-if="isEchTrue"
      v-show="isEchTrue"
      style="
        overflow: inherit;
        width: 3rem;
@@ -127,8 +127,8 @@
      >
    </el-card>
    <!-- echarts地图 -->
    <view id="main" style="width: 100vw; position: relative"></view>

    <!-- <view id="main" style="width: 100vw; position: relative"></view> -->
    <div id="map"></div>
    <!-- 朝代 -->
    <view
      class="flex flex-center"
@@ -160,7 +160,7 @@
            "
            :style="{
              marginRight: index === dynasty1.length - 1 ? '0' : '0.03rem',
              background: dynasty1Color == item.id ? '#244A7B' : '#597AA5'
              background: dynasty1Color == item.id ? '#244A7B' : '#597AA5',
            }"
          >
            {{ item.name }}
@@ -174,8 +174,10 @@
<!-- 5USVDAhhS4ssz44HLq3gNPZai7naXf4Q -->
<script>
import { loadBMap } from "@/static/map.js";
import L from "leaflet";
import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";
import "leaflet.chinatmsproviders";
export default {
  data() {
    return {
@@ -187,25 +189,25 @@
      information: [
        {
          label: "姓名",
          content: "李时珍"
          content: "李时珍",
        },
        {
          label: "别名",
          content: "东丽先生"
          content: "东丽先生",
        },
        {
          label: "籍贯",
          content: "湖北"
          content: "湖北",
        },
        {
          label: "医学分科",
          content: "中药,针灸"
          content: "中药,针灸",
        },
        {
          label: "小传",
          content:
            "李时珍(约1518年~1593 年)， 字东璧， 晚年自号濒湖山人， 湖广黄州府薪州(今湖北省薪春县) 人， 明代著名医药学家。 与“ 医圣” 万密斋齐名， 古有“ 万密斋的方， 李时珍的药” 之说。 后为楚干府..."
        }
            "李时珍(约1518年~1593 年)， 字东璧， 晚年自号濒湖山人， 湖广黄州府薪州(今湖北省薪春县) 人， 明代著名医药学家。 与“ 医圣” 万密斋齐名， 古有“ 万密斋的方， 李时珍的药” 之说。 后为楚干府...",
        },
      ],
      // 下面的朝代1
      dynasty1Color: 1,
@@ -213,78 +215,78 @@
        {
          name: "夏朝",
          coord: "2070BC",
          id: 1
          id: 1,
        },
        {
          name: "商朝",
          id: 2,
          coord: "1600BC"
          coord: "1600BC",
        },
        {
          name: "西周",
          id: 3,
          coord: "1600BC"
          coord: "1600BC",
        },
        {
          name: "春秋战国",
          id: 4,
          coord: "770BC"
          coord: "770BC",
        },
        {
          name: "秦朝",
          id: 5,
          coord: "221BC"
          coord: "221BC",
        },
        {
          name: "汉朝",
          id: 6,
          coord: "202BC"
          coord: "202BC",
        },
        {
          name: "三国两晋南北朝",
          id: 7,
          coord: "184"
          coord: "184",
        },
        {
          name: "隋朝",
          id: 8,
          coord: "581"
          coord: "581",
        },
        {
          name: "唐朝",
          id: 9,
          coord: "618"
          coord: "618",
        },
        {
          name: "五代十国",
          id: 10,
          coord: "907"
          coord: "907",
        },
        {
          name: "辽夏金",
          id: 11,
          coord: "907"
          coord: "907",
        },
        {
          name: "宋朝",
          id: 12,
          coord: "960"
          coord: "960",
        },
        {
          name: "元朝",
          id: 13,
          coord: "1271"
          coord: "1271",
        },
        {
          name: "明朝",
          id: 14,
          coord: "1368"
          coord: "1368",
        },
        {
          name: "清朝",
          id: 15,
          coord: "1636"
        }
          coord: "1636",
        },
      ],
      // 标题顶部栏需要的东西
      idIndex: 0,
@@ -293,38 +295,38 @@
        {
          name: "夏朝",
          color: "#90BBD8",
          id: 1
          id: 1,
        },
        {
          name: "商朝",
          color: "#EDD28B",
          id: 2
          id: 2,
        },
        {
          name: "西周",
          color: "#CF746D",
          id: 3
          id: 3,
        },
        {
          name: "秦朝",
          color: "#9CC27A",
          id: 4
          id: 4,
        },
        {
          name: "汉朝",
          color: "#5B6CB9",
          id: 5
          id: 5,
        },
        {
          name: "隋朝",
          color: "#8860A8",
          id: 6
          id: 6,
        },
        {
          name: "唐朝",
          color: "#DE8E66",
          id: 7
        }
          id: 7,
        },
      ],
      // 搜索后是否显示弹框
      isSearch: false,
@@ -333,15 +335,15 @@
          id: 1,
          name: "李时珍",
          birthAndDeath: "1518-1593",
          source: "国图规范档，CBDB，上图古籍数据库 籍贯：湖北"
          source: "国图规范档，CBDB，上图古籍数据库 籍贯：湖北",
        },
        {
          id: 2,
          name: "李时珍",
          birthAndDeath: "1518-1593",
          source: "国图规范档，CBDB，上图古籍数据库 籍贯：湖北"
        }
      ]
          source: "国图规范档，CBDB，上图古籍数据库 籍贯：湖北",
        },
      ],
    };
  },
  onLoad(options) {
@@ -349,14 +351,71 @@
    console.log("optionsoptionsoptions", options.id);
  },
  mounted() {
    console.log("ss");
    // this.$nextTick(() => {
    loadBMap("1NJdwrI1CfT6lrykVhDkmWgsO6O2bjQK").then(() => {
      this.innt();
    });
    // loadBMap("1NJdwrI1CfT6lrykVhDkmWgsO6O2bjQK").then(() => {
    //   this.innt();
    // });
    // })
    this.initMap();
  },
  methods: {
    //初始化地图
    initMap() {
      var map = L.map("map", {
        attributionControl: false,
        preferCanvas: true,
        withPopup: L.latLng(34.261, 108.96),
      }).setView([39.91667, 116.41667], 4);

      L.tileLayer
        .chinaProvider("TianDiTu.Normal.Map", {
          key: "76bc34ead7e30e663a4eded8aeaf5860",
          // maxZoom: 18,
          // minZoom: 5,
        })
        .addTo(map);

      let DefaultIcon1 = L.icon({
        iconUrl: this.icoName,
        iconSize: [24, 41], //  图标的大小    【值1，值2】 为具体你自定义图标的尺寸，比如我图标尺寸是32×52，表示该图标：宽度32像素，高度：52像素，那么值1:就是32，值2：就是52
        iconAnchor: [24, 41], //  图标将对应标记点的位置 这个是重点， 【值1，值2】，值1：为图标坐标第一个值(即32)的一半，值2：为图标坐标第二个值(即52)
        popupAnchor: [1, -24], // 该点是相对于iconAnchor弹出信息的位置  这个是我手动调出来的，文档默认原始值是[-1，-76]，我是去一半值，取一半值调出来的
      });
      const marker1 = L.marker([34.261, 108.96], {
        icon: DefaultIcon1,
      }).addTo(map);
      L.marker([39.90609, 116.38543], {
        icon: DefaultIcon1,
      })
        .addTo(map)
        .bindPopup(this.popContent); //北京
      L.marker([29.55546, 106.5448], {
        icon: DefaultIcon1,
      }).addTo(map); // 重庆
      L.marker([30.56781, 114.30222], {
        icon: DefaultIcon1,
      }).addTo(map); //湖北
      L.marker([18.23522, 109.51085], {
        icon: DefaultIcon1,
      }).addTo(map); //海南

      marker1.on("click", (e) => {
        this.isEchTrue = true;
        console.log(document.querySelector(".echartsTrue").offsetWidth);
        console.log(document.querySelector(".echartsTrue").offsetHeight);
        this.$nextTick(() => {
          this.isTop =
            e.containerPoint.y -
            document.querySelector(".echartsTrue").offsetHeight / 2 +
            "px";
          this.isLeft =
            e.containerPoint.x -
            document.querySelector(".echartsTrue").offsetWidth / 2 +
            "px";
        });
      });
    },

    // 点击下面的朝代按钮
    dynastyBottomClick(id) {
      console.log(id);
@@ -371,268 +430,13 @@
    SchoolClick(id) {
      console.log(id);
    },
    innt() {
      this.$nextTick(() => {
        var chartDom = document.getElementById("main");
        var myChart = echarts.init(chartDom);
        var option;

        const data = [
          {
            name: "海门",
            value: [121.15, 31.89]
          },
          {
            name: "鄂尔多斯",
            value: [109.781327, 39.608266]
          },
          {
            name: "招远",
            value: [120.38, 37.35]
          },
          {
            name: "舟山",
            value: [122.207216, 29.985295]
          },
          {
            name: "齐齐哈尔",
            value: [123.97, 47.33]
          }
        ];
        option = {
          title: {
            text: "",
            subtext: "",
            sublink: "",
            left: "center"
          },
          tooltip: {
            trigger: "item"
          },
          bmap: {
            center: [104.114129, 37.550339],
            zoom: 5,
            roam: true,
            mapStyle: {
              styleJson: [
                {
                  featureType: "water",
                  elementType: "all",
                  stylers: {
                    color: "#86a1ac"
                  }
                },
                {
                  featureType: "land",
                  elementType: "all",
                  stylers: {
                    color: "#f1d99d"
                  }
                },
                {
                  featureType: "railway",
                  elementType: "all",
                  stylers: {
                    visibility: "off"
                  }
                },
                {
                  featureType: "highway",
                  elementType: "all",
                  stylers: {
                    color: "#f1d99d"
                  }
                },
                {
                  featureType: "highway",
                  elementType: "labels",
                  stylers: {
                    visibility: "off"
                  }
                },
                {
                  featureType: "arterial",
                  elementType: "geometry",
                  stylers: {
                    color: "#f1d99d"
                  }
                },
                {
                  featureType: "arterial",
                  elementType: "geometry.fill",
                  stylers: {
                    color: "#f1d99d"
                  }
                },
                {
                  featureType: "poi",
                  elementType: "all",
                  stylers: {
                    visibility: "off"
                  }
                },
                {
                  featureType: "green",
                  elementType: "all",
                  stylers: {
                    visibility: "off"
                  }
                },
                {
                  featureType: "subway",
                  elementType: "all",
                  stylers: {
                    visibility: "off"
                  }
                },
                {
                  featureType: "manmade",
                  elementType: "all",
                  stylers: {
                    color: "#f1d99d"
                  }
                },
                {
                  featureType: "local",
                  elementType: "all",
                  stylers: {
                    color: "#f1d99d"
                  }
                },
                {
                  featureType: "local",
                  elementType: "labels",
                  stylers: {
                    visibility: "off"
                  }
                },
                {
                  featureType: "arterial",
                  elementType: "labels",
                  stylers: {
                    visibility: "off"
                  }
                },
                {
                  featureType: "boundary",
                  elementType: "all",
                  stylers: {
                    color: "#f1d99d"
                  }
                },
                {
                  featureType: "building",
                  elementType: "all",
                  stylers: {
                    color: "#f1d99d"
                  }
                },
                {
                  featureType: "label",
                  elementType: "labels.text.fill",
                  stylers: {
                    color: "#000"
                  }
                }
              ]
            }
          },
          series: [
            {
              name: "",
              type: "scatter",
              coordinateSystem: "bmap",
              data: data,
              symbolSize: 0,
              encode: {
                value: 2
              },
              label: {
                formatter: "{b}",
                position: "right",
                show: false
              },
              emphasis: {
                label: {
                  show: true
                }
              }
            },
            {
              name: "",
              type: "effectScatter",
              coordinateSystem: "bmap",
              data: data,
              symbolSize: 20,
              encode: {
                value: 2
              },
              showEffectOn: "render",
              rippleEffect: {
                brushType: "stroke"
              },
              label: {
                formatter: "{b}",
                position: "right",
                show: false
              },
              itemStyle: {
                color: "#ec7b43",
                shadowBlur: 10,
                shadowColor: "#333"
              },
              emphasis: {
                scale: false
              },
              zlevel: 1
            }
          ]
        };
        // 设置点击事件监听
        myChart.on("click", (params) => {
          console.log(params.event.offsetX, params.event.offsetY);
          if (params.componentType === "series") {
            var dataName = params.data.name; // 获取点击的数据名称
            var dataValue = params.data.value; // 获取点击的数据值
            // 在这里可以根据需要处理点击事件，比如弹出对应数据的详细信息等操作
            console.log("点击了", dataName, "数据，数值为", dataValue);
            // 这里可以编写触发时间获取对应数据信息的逻辑
            this.spaceTimeArr(params);
          }
        });

        option && myChart.setOption(option);
      });
    },
    // 时空地图点击时获取的数据
    spaceTimeArr(Arr) {
      // 修改 Vue 组件的数据，例如显示菜单导航
      // 时空地图的数据
      console.log(Arr);

      this.isEchTrue = true;
      this.$nextTick(() => {
        this.isTop =
          Arr.event.offsetY -
          0.18 -
          document.querySelector(".echartsTrue").offsetHeight / 2.1 +
          "px";
        this.isLeft =
          Arr.event.offsetX -
          document.querySelector(".echartsTrue").offsetWidth / 2.1 +
          "px";
        console.log(
          document.querySelector(".echartsTrue").offsetHeight / 2 / 100
        );
      });
    },
    // 查看更多>>
    viewMoreClick() {
      uni.navigateTo({
        url: "/pages/character/detail"
        url: "/pages/character/detail",
      });
    }
  }
    },
  },
};
</script>

@@ -755,4 +559,11 @@
  line-height: 1;
  margin-left: 0.19rem;
}

#map {
  height: 600px;
  width: 100%;
  margin: 0 auto;
  font-size: 14px !important;
}
</style>