替换图片和地图层级

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"
@@ -14,7 +18,11 @@
        :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"
@@ -42,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>
@@ -62,7 +73,10 @@
        top: 2.2rem;
      "
    >
      <div slot="header" class="clearfix">
      <div
        slot="header"
        class="clearfix"
      >
        <span>人物 ({{ SearchArr.length }})</span>
        <el-button
          style="
@@ -73,11 +87,18 @@
          "
          @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">
      <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>
@@ -105,7 +126,10 @@
      "
      :style="{ top: isTop, left: isLeft }"
    >
      <div slot="header" class="clearfix">
      <div
        slot="header"
        class="clearfix"
      >
        <span v-if="currentMark">{{
          currentMark.name ? currentMark.name : "-"
        }}</span>
@@ -118,10 +142,12 @@
          "
          @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 : "-" }}
@@ -138,16 +164,13 @@
        @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
@@ -377,6 +400,14 @@
    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 = [];
@@ -393,30 +424,32 @@
        }
        this.initMap(markerList);
        this.SearchArr = markerList.map((item) => ({
          birthAndDeath: item?.BIRTH_YEAR[0]?.content1 ?
            item?.BIRTH_YEAR[0]?.content1 + "-" + item?.DEATH_YEAR[0]?.content1 :'-',
          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,
        }));
        console.log(markerList, "markerList");
        this.markerList = markerList;
      });
    },
    //初始化地图
    initMap(markerList) {
      var map = L.map("map", {
        attributionControl: false,
        preferCanvas: true,
        withPopup: L.latLng(34.261, 108.96),
        attributionControl: false,
      }).setView([39.91667, 116.41667], 3);

      L.tileLayer
        .chinaProvider("TianDiTu.Normal.Map", {
          key: "76bc34ead7e30e663a4eded8aeaf5860",
          // maxZoom: 18,
          // minZoom: 5,
          maxZoom: 18,
          minZoom: 3,
        })
        .addTo(map);
      this.map = map;
      let DefaultIcon1 = L.icon({
        iconUrl: this.icoName,
        iconSize: [24, 41], //  图标的大小    【值1，值2】 为具体你自定义图标的尺寸，比如我图标尺寸是32×52，表示该图标：宽度32像素，高度：52像素，那么值1:就是32，值2：就是52
@@ -424,11 +457,20 @@
        popupAnchor: [1, -24], // 该点是相对于iconAnchor弹出信息的位置  这个是我手动调出来的，文档默认原始值是[-1，-76]，我是去一半值，取一半值调出来的
      });

      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: DefaultIcon1,
            icon: icon,
          }).addTo(map);
          temp_mark.on("click", (e) => {
            this.isEchTrue = true;
@@ -481,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%;
@@ -601,10 +649,10 @@
}

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