替换图片和地图层级

YM

2024-05-20 5111f3f9c1c31b81af25cb737ec9608d9ff09f42

 src/pages/territory/territory.vue

@@ -1,7 +1,11 @@
<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"
@@ -11,9 +15,14 @@
        placehold="输入姓名/别名/朝代/传主职业搜索"
        @onSearch="onSearch"
        :isAvancedTrue="false"
        :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"
@@ -41,7 +50,10 @@
                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>
@@ -61,7 +73,10 @@
        top: 2.2rem;
      "
    >
      <div slot="header" class="clearfix">
      <div
        slot="header"
        class="clearfix"
      >
        <span>人物 ({{ SearchArr.length }})</span>
        <el-button
          style="
@@ -72,14 +87,26 @@
          "
          @click="isSearch = false"
          type="text"
          >关闭</el-button
        >
        >关闭</el-button>
      </div>
      <view class="" style="overflow: auto; height: 2.5rem">
        <ul class="information" v-for="(item, index) in SearchArr" :key="index">
          <li style="font-size: 0.18rem; font-weight: 700">{{ item.name }}</li>
          <li>生卒年: {{ item.birthAndDeath }}</li>
          <li>来源: {{ item.source }}</li>
      <view
        class=""
        style="overflow: auto; height: 2.5rem"
      >
        <ul
          class="information"
          v-for="(item, index) in SearchArr"
          :key="index"
          @click="showCard(item)"
        >
          <li style="font-size: 0.18rem; font-weight: 700">
            {{ item.name ? item.name : "-" }}
          </li>
          <li>
            生卒年:
            {{ item.birthAndDeath ? item.birthAndDeath : "-" }}
          </li>
          <li>来源: {{ item.source ? item.source : "-" }}</li>
          <li
            v-if="SearchArr.length - 1 !== index"
            style="margin: 0.1rem 0; border-bottom: 1px solid #d8d8d8"
@@ -99,8 +126,13 @@
      "
      :style="{ top: isTop, left: isLeft }"
    >
      <div slot="header" class="clearfix">
        <span>{{ information[0].content }}</span>
      <div
        slot="header"
        class="clearfix"
      >
        <span v-if="currentMark">{{
          currentMark.name ? currentMark.name : "-"
        }}</span>
        <el-button
          style="
            float: right;
@@ -110,29 +142,35 @@
          "
          @click="isEchTrue = false"
          type="text"
          >关闭</el-button
        >
        >关闭</el-button>
      </div>
      <ul class="information">
        <li v-for="(item, index) in information" :key="index">
          {{ item.label }}: {{ item.content }}
      <ul
        class="information"
        v-if="currentMark"
      >
        <li>
          姓名:
          {{ currentMark.name ? currentMark.name : "-" }}
        </li>
        <li>别名: {{ currentMark.nikeName ? currentMark.nikeName : "-" }}</li>
        <li>
          籍贯: {{ currentMark.nativePlace ? currentMark.nativePlace : "-" }}
        </li>
        <li>医学分科: {{ currentMark.barnch ? currentMark.barnch : "-" }}</li>
        <li>小传: {{ currentMark.medical ? currentMark.medical : "-" }}</li>
      </ul>
      <el-button
        class="flex"
        @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
      class="flex flex-center"
      style="width: 100%; position: fixed; bottom: 0.33rem; left: 0"
      style="width: 100%; position: fixed; bottom: 0.33rem; left: 0; z-index: 99;"
    >
      <ul class="flex">
        <li
@@ -177,10 +215,13 @@
import L from "leaflet";
import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";
import "leaflet.chinatmsproviders";
import { getRetrieval } from "@/api/index.js";
export default {
  data() {
    return {
      // echarts元素点击时出来的弹窗和坐标
      keyword: "",
      isEchTrue: false,
      isLeft: 0,
      isTop: 0,
@@ -329,6 +370,7 @@
      ],
      // 搜索后是否显示弹框
      isSearch: false,
      currentMark: null,
      SearchArr: [
        {
          id: 1,
@@ -355,101 +397,103 @@
    //   this.innt();
    // });
    // })
    this.initMap();
    this.getDataList();
  },
  methods: {
    showCard(info) {
      console.log(info);
      console.log(this.markerList);
      console.log(this.map);
      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 });
              }
            });
          }
        }
        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;
      });
    },
    //初始化地图
    initMap() {
      // var map = L.map("map", {

      //   center: [34.26, 108.96],

      //   zoom: 4,

      //   maxZoom: 18, //最大缩放层级

      //   minZoom: 1, //最小缩放层级

      //   tileSize: 256, //切片大小

      //   attributionControl: false, // 移除右下角leaflet标识

      //   zoomControl: false, //禁用 + - 按钮

      //   maxBounds: bounds, //设置边界

      //   preferCanvas: true, //默认使用svg渲染，设置canvas渲染

      //   doubleClickZoom: false, //关闭双击缩放

      //   // dragging: false, //鼠标移动事件
      // });
    initMap(markerList) {
      var map = L.map("map", {
        attributionControl: false,
        preferCanvas: true,
        withPopup: L.latLng(34.261, 108.96),
      }).setView([39.91667, 116.41667], 4);

      // L.tileLayer(
      //   "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"
      // ).addTo(map);
      L.tileLayer(
        "http://t0.tianditu.gov.cn/vec_c/wmts?tk=36ef7d20eba483627b043f0909c493ee"
      ).addTo(map);
        attributionControl: false,
      }).setView([39.91667, 116.41667], 3);

      L.tileLayer
        .wmts(
          "http://t{s}.tianditu.gov.cn/vec_c/wmts?tk=36ef7d20eba483627b043f0909c493ee",
          {
            layer: "vec", // 矢量图层
            style: "default",
            tilematrixset: "c", // 缩放级别
            format: "tiles",
            attribution: "Map Data &copy; 2023 Tencent",
            subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"],
          }
        )
        .chinaProvider("TianDiTu.Normal.Map", {
          key: "76bc34ead7e30e663a4eded8aeaf5860",
          maxZoom: 18,
          minZoom: 3,
        })
        .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";
        });
      let htmlStr = '<p><span class="map-circle-name">';
      ('</span><br><span class="map-circle-count">');
      ("</span><p/>");
      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];
          const temp_mark = L.marker([item.yCoord, item.xCoord], {
            icon: icon,
          }).addTo(map);
          temp_mark.on("click", (e) => {
            this.isEchTrue = true;
            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,
            };
            this.$nextTick(() => {
              this.isTop =
                e.containerPoint.y -
                document.querySelector(".echartsTrue").offsetHeight / 2 +
                "px";
              this.isLeft =
                e.containerPoint.x -
                document.querySelector(".echartsTrue").offsetWidth / 2 +
                "px";
            });
          });
        }
      }
    },

    // 点击下面的朝代按钮
@@ -458,9 +502,11 @@
      this.dynasty1Color = id;
    },
    onSearch(val) {
      console.log(val);
      //
      this.isSearch = true;
      this.keyword = val.text;
      this.map.invalidateSize();

      this.getDataList();
    },
    // 点击上面的朝代按钮
    SchoolClick(id) {
@@ -477,6 +523,12 @@
</script>

<style>
::v-deep .map-circle-name {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #2070bc;
}
.pageBox {
  width: 100%;
  height: 100%;
@@ -597,9 +649,10 @@
}

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