天地图

杨磊

2024-05-16 10117425c0a0f660105eb1674de89503533a2465

天地图

 package-lock.json

@@ -36,6 +36,8 @@
        "flyio": "^0.6.2",
        "js-cookie": "^3.0.5",
        "js-export-excel": "^1.1.4",
        "leaflet": "^1.9.4",
        "leaflet-tilelayer-wmts": "^1.0.0",
        "querystring": "^0.2.1",
        "sass": "^1.74.1",
        "uview-ui": "^2.0.37",
@@ -14944,6 +14946,16 @@
      "engines": {
        "node": ">=8"
      }
    },
    "node_modules/leaflet": {
      "version": "1.9.4",
      "resolved": "https://registry.npmmirror.com/leaflet/-/leaflet-1.9.4.tgz",
      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
    },
    "node_modules/leaflet-tilelayer-wmts": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/leaflet-tilelayer-wmts/-/leaflet-tilelayer-wmts-1.0.0.tgz",
      "integrity": "sha512-8VzMOXEJtC89aUKKBSNgsM9vYBp9G229tozqhevZS/hg9fyd0l1J6zcmwTOzQxnEXKtWesUHf1ylp0QHAd356Q=="
    },
    "node_modules/leven": {
      "version": "3.1.0",
@@ -34358,6 +34370,16 @@
        "invert-kv": "^3.0.0"
      }
    },
    "leaflet": {
      "version": "1.9.4",
      "resolved": "https://registry.npmmirror.com/leaflet/-/leaflet-1.9.4.tgz",
      "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA=="
    },
    "leaflet-tilelayer-wmts": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/leaflet-tilelayer-wmts/-/leaflet-tilelayer-wmts-1.0.0.tgz",
      "integrity": "sha512-8VzMOXEJtC89aUKKBSNgsM9vYBp9G229tozqhevZS/hg9fyd0l1J6zcmwTOzQxnEXKtWesUHf1ylp0QHAd356Q=="
    },
    "leven": {
      "version": "3.1.0",
      "resolved": "https://registry.npmmirror.com/leven/-/leven-3.1.0.tgz",

 package.json

@@ -76,6 +76,8 @@
    "flyio": "^0.6.2",
    "js-cookie": "^3.0.5",
    "js-export-excel": "^1.1.4",
    "leaflet": "^1.9.4",
    "leaflet-tilelayer-wmts": "^1.0.0",
    "querystring": "^0.2.1",
    "sass": "^1.74.1",
    "uview-ui": "^2.0.37",

 src/main.js

@@ -6,7 +6,12 @@
// 引入elementUI开发
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';    
import 'leaflet/dist/leaflet.css'
import icon from "leaflet/dist/images/marker-icon.png" // 引入leaflet默认图标
import iconShadow from "leaflet/dist/images/marker-shadow.png" // 引入leaflet默认图标

Vue.prototype.icoName = icon
Vue.prototype.iconShadowName = iconShadow
Vue.use(ElementUI);
App.mpType = 'app'


 src/pages/character/detail.vue

@@ -647,7 +647,7 @@
        });
      } else if (index == 2) {
        uni.navigateTo({
          url: "/pages/characterMap/characterMap",
          url: "/pages/characterMap/characterMap?id=" + this.detailId,
        });
      }
    },

 src/pages/characterMap/characterMap.vue

@@ -1,465 +1,587 @@
<template>
    <view>
        <headNav :idIndex="idIndex" text="中医人物数据库" />
        <el-button class="getBack" @click="getBack">返回</el-button>
        <view class="" style="position: relative;">
            <!-- 地图 -->
            <view id="spaceTime" style="height: 90vh;width: 100%;position: relative;"></view>
            <!-- 详情 -->
            <el-dialog class="particulars" :visible.sync="menuNav" :modal="false">
                <view class="font-family" style="font-size: .26rem;padding-top: .16rem;font-weight: bold;">李时珍</view>
                <ul
                    style="border-bottom: .01rem solid #D8D8D8; padding:  .16rem 0; font-size: .14rem;font-weight: 400;line-height: .28rem;">
                    <li>出生于蕲州</li>
                    <li>1518年07月03日 蕲州（今湖北蕲州镇）</li>
                </ul>
                <ul style="margin: .31rem 0 .11rem 0; font-size: .14rem;font-weight: 400;line-height: .28rem;">
                    <li>活动名称：撰写《本草纲目》</li>
                    <li>活动地点：浙江省 </li>
                    <li>活动区间：浙江省杭州市 </li>
                    <li>活动描述：撰写《本草纲目》 </li>
                    <li>参与人员：李时珍 </li>
                    <li>来源组成：撰写《本草纲目》</li>
                </ul>
                <img style="width: 100%;height: 2rem;"
                    src="https://img0.baidu.com/it/u=1845740325,2917001370&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1711731600&t=0b208ab46e1d33aa81ac31dd6bf627be"
                    alt="" />
                <div class="box" style="width: 80%;">
                    <span class="span" :style="{'marginLeft': spanML+'rem'}">{{span}}年</span>
                    <div class="scales">
                        <view v-for="(item,index) in yearArr" @click="scaleClick(index)" class="scale"
                            :data-index="index"></view>
                    </div>
                    <div class="MX"></div>
                    <div class="cursor" :style="{'marginLeft': cursorML+'rem'}"></div>
                </div>
            </el-dialog>
        </view>
    </view>
  <view>
    <headNav :idIndex="idIndex" text="中医人物数据库" />
    <el-button class="getBack" @click="getBack">返回</el-button>
    <view class="" style="position: relative">
      <!-- 地图 -->
      <!-- <view id="spaceTime" style="height: 90vh;width: 100%;position: relative;"></view> -->
      <div id="map"></div>

      <!-- 详情 -->
      <el-dialog class="particulars" :visible.sync="menuNav" :modal="false">
        <view
          class="font-family"
          style="font-size: 0.26rem; padding-top: 0.16rem; font-weight: bold"
          >{{ activityInfo.participants }}</view
        >
        <ul
          style="
            border-bottom: 0.01rem solid #d8d8d8;
            padding: 0.16rem 0;
            font-size: 0.14rem;
            font-weight: 400;
            line-height: 0.28rem;
          "
        >
          <li>出生于{{ basicInfo.nativePlace }}</li>
          <li>
            {{
              basicInfo.birthYear +
              basicInfo.nativePlace +
              "(今" +
              basicInfo.nowPlace +
              ")"
            }}
          </li>
        </ul>
        <ul
          style="
            margin: 0.31rem 0 0.11rem 0;
            font-size: 0.14rem;
            font-weight: 400;
            line-height: 0.28rem;
          "
        >
          <li>活动名称：{{ activityInfo.activityName }}</li>
          <li>活动地点：{{ activityInfo.activityAddr }}</li>
          <li>活动区间：{{ activityInfo.time }}</li>
          <li>活动描述：{{ activityInfo.desc }}</li>
          <li>参与人员：{{ activityInfo.participants }}</li>
        </ul>
        <!-- <img
          style="width: 100%; height: 2rem"
          src="https://img0.baidu.com/it/u=1845740325,2917001370&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1711731600&t=0b208ab46e1d33aa81ac31dd6bf627be"
          alt=""
        /> -->
        <div class="box" style="width: 80%">
          <span class="span" :style="{ marginLeft: spanML + 'rem' }"
            >{{ span }}年</span
          >
          <div class="scales">
            <view
              v-for="(item, index) in yearArr"
              @click="scaleClick(index)"
              class="scale"
              :data-index="index"
            ></view>
          </div>
          <div class="MX"></div>
          <div class="cursor" :style="{ marginLeft: cursorML + 'rem' }"></div>
        </div>
      </el-dialog>
    </view>
  </view>
</template>

<script>
    import * as echarts from 'echarts';
    import 'echarts/extension/bmap/bmap';
    import {
        loadBMap
    } from "@/static/map.js"
import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";
import { loadBMap } from "@/static/map.js";
import L from "leaflet";
import { getPersonInfo } from "@/api/index.js";
export default {
  data() {
    return {
      menuNav: false,
      sliderValue: 2024,
      currentYear: 2024,
      sliderValue: 50,
      MX: document.querySelector(".MX"),
      box: document.querySelector(".box"),
      span: "",
      yearArr: [],
      yearIndex: 0,
      spanML: 0,
      cursorML: -0.05,
      activityInfo: {},
      basicInfo: {},
    };
  },

    export default {
        data() {
            return {
                menuNav: false,
                sliderValue: 2024,
                currentYear: 2024,
                sliderValue: 50,
                MX: document.querySelector(".MX"),
                box: document.querySelector(".box"),
                span: '',
                yearArr: [],
                yearIndex: 0,
                spanML: 0,
                cursorML: -.05
            }
        },
  mounted() {
    // // 时空地图
    // loadBMap("5USVDAhhS4ssz44HLq3gNPZai7naXf4Q").then(() => {
    //   this.spaceTime();
    // });
    // this.$nextTick(() => {
    //   this.aaa();
    // });
    this.$route;
    console.log(this.$route, "this.$route");
    this.getPersonInfoFun();
    this.getBasicInfo();
  },
  methods: {
    //初始化地图
    initMap(info) {
      var map = L.map("map", {
        attributionControl: false,
        preferCanvas: true,
      }).setView([35.91667, 110.41667], 5);

        mounted() {
      // 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);

            // 时空地图
            loadBMap('5USVDAhhS4ssz44HLq3gNPZai7naXf4Q').then(() => {
                this.spaceTime()
            })
            this.$nextTick(() => {
                this.aaa()
            })
        },
        methods: {
            // 返回按钮
            getBack() {
                uni.navigateBack();
            },
            aaa() {
                // 渲染母线
                this.addArr()
            },
            addArr(start = 894, end = 900) {
                for (let i = start; i <= end; i++) {
                    this.yearArr.push(i)
                }
                this.span = this.yearArr[0]
                this.$nextTick(() => {
                    // this.creatMX(this.yearArr.length - 1)
                    // this.creatScale(this.yearArr)
                })
            },
            creatMX(len) {
                console.log(len);
                let width = len * 50 + 10
                // this.MX.style.width = `${width}px`
                // this.scales.style.width = `${width}px`
                // console.log(this.box.style.width);
            },
            creatScale() {
                // for (let i = 0; i < this.yearArr.length; i++) {
                //     let scale = document.createElement("div")
                //     scale.className = "scale"
                //     scale.setAttribute("index", i)
                //     scale.addEventListener("click", this.scaleClick)
                //     scales.appendChild(scale)
                // }
                // console.log(arr[0]);
      L.tileLayer(
        "https://t{s}.tianditu.gov.cn/vec_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles&tk=76bc34ead7e30e663a4eded8aeaf5860",
        {
          maxZoom: 18,
          attribution: "Map data &copy; 2012-2019, TianDiTu",
          id: "tdtAnnoLayer",
          accessToken: "your.mapbox.public.access.token",
        }
      ).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]，我是去一半值，取一半值调出来的
      });
      this.map = map;
      if (info && info.length) {
        for (let i = 0; i < info.length; i++) {
          const item = info[i];
          const marker1 = L.marker([item.ycoord, item.xcoord], {
            icon: DefaultIcon1,
          }).addTo(map);
          marker1.on("click", (e) => {
            this.menuNav = true;
            this.activityInfo = item;
          });
        }
      }
    },

            },
    // 返回按钮
    getBack() {
      uni.navigateBack();
    },
    aaa() {
      // 渲染母线
      this.addArr();
    },
    addArr(start = 894, end = 900) {
      for (let i = start; i <= end; i++) {
        this.yearArr.push(i);
      }
      this.span = this.yearArr[0];
      this.$nextTick(() => {
        // this.creatMX(this.yearArr.length - 1)
        // this.creatScale(this.yearArr)
      });
    },

            handleSliderChange(value) {
                this.currentYear = value;
            },
            scaleClick(i) {
                // let i = Number(this.getAttribute("data-index"))
                console.log(i, this.cursorML);
    getPersonInfoFun() {
      getPersonInfo({
        id: this.$route.query.id,
        type: "PERSON_SPACE_TIME",
      }).then((res) => {
        console.log(res, "res");
        this.initMap(res.object.personSpaceTimeList);
      });
    },

                if (i > this.yearIndex) {
    getBasicInfo() {
      getPersonInfo({
        id: this.$route.query.id,
        type: "PERSON_BASIC",
      }).then((res) => {
        console.log(res, "res");
        this.basicInfo.name = res.object.personFieldList.find(
          (f) => f.fieldName == "WEAK_NAME"
        ).content1;
        this.basicInfo.birthYear = res.object.personFieldList.find(
          (f) => f.fieldName == "BIRTH_YEAR"
        ).content1;
        this.basicInfo.deathYear = res.object.personFieldList.find(
          (f) => f.fieldName == "DEATH_YEAR"
        ).content1;
        this.basicInfo.nativePlace = res.object.personFieldList.find(
          (f) => f.fieldName == "NATIVE_PLACE"
        ).content1;
        this.basicInfo.nowPlace = res.object.personFieldList.find(
          (f) => f.fieldName == "NATIVE_PLACE"
        ).content2;
        // this.initMap(res.object.personSpaceTimeList);
      });
    },

                    this.cursorML += (i - this.yearIndex + +('0.0' + this.yearIndex)) / 1.9
                    // this.spanML += 50 * (i - this.yearIndex)
                    console.log((i - this.yearIndex + 0.2), 'aaaa');
    creatMX(len) {
      console.log(len);
      let width = len * 50 + 10;
      // this.MX.style.width = `${width}px`
      // this.scales.style.width = `${width}px`
      // console.log(this.box.style.width);
    },
    creatScale() {
      // for (let i = 0; i < this.yearArr.length; i++) {
      //     let scale = document.createElement("div")
      //     scale.className = "scale"
      //     scale.setAttribute("index", i)
      //     scale.addEventListener("click", this.scaleClick)
      //     scales.appendChild(scale)
      // }
      // console.log(arr[0]);
    },

                } else {
                    this.cursorML -= (this.yearIndex - i) / 2 + 0.04
                    // this.spanML -= 50 * (this.yearIndex - i)
                    console.log(this.yearIndex, i, 'bbbb');
                }
                this.yearIndex = i
            },
            // ________________________
            // 时空地图
            spaceTime() {
                var chartDom = document.getElementById('spaceTime');
                var myChart = echarts.init(chartDom);
                var option;
    handleSliderChange(value) {
      this.currentYear = value;
    },
    scaleClick(i) {
      // let i = Number(this.getAttribute("data-index"))
      console.log(i, this.cursorML);

                const data = [{
                        name: '海门',
                        value: 9
                    },
                    {
                        name: '金昌',
                        value: 19
                    },
                    {
                        name: '泉州',
                        value: 21
                    },
                    {
                        name: '衢州',
                        value: 177
                    },
                    {
                        name: '廊坊',
                        value: 193
                    },
                    {
                        name: '菏泽',
                        value: 194
                    },
                    {
                        name: '合肥',
                        value: 229
                    },
                    {
                        name: '武汉',
                        value: 273
                    },
                    {
                        name: '啊三大矿及说到底是封建士大夫大师傅就',
                        value: 279
                    }
                ];
                const geoCoordMap = {
                    海门: [121.15, 31.89],
                    鄂尔多斯: [109.781327, 39.608266],
                    招远: [120.38, 37.35],
                    平顶山: [113.29, 33.75],
                    邢台: [114.48, 37.05],
                    德州: [116.29, 37.45],
                    济宁: [116.59, 35.38],
                    荆州: [112.239741, 30.335165],
                    宜昌: [111.3, 30.7],
                    义乌: [120.06, 29.32],
                    丽水: [119.92, 28.45],
                    洛阳: [112.44, 34.7],
                    秦皇岛: [119.57, 39.95],
                    株洲: [113.16, 27.83],
                    石家庄: [114.48, 38.03],
                    莱芜: [117.67, 36.19],
                    常德: [111.69, 29.05],
                    保定: [115.48, 38.85],
                    湘潭: [112.91, 27.87],
                    金华: [119.64, 29.12],
                    岳阳: [113.09, 29.37],
                    长沙: [113, 28.21],
                    衢州: [118.88, 28.97],
                    廊坊: [116.7, 39.53],
                    菏泽: [115.480656, 35.23375],
                    合肥: [117.27, 31.86],
                    武汉: ['你好', 30.52],
                    啊三大矿及说到底是封建士大夫大师傅就: [125.03, 46.58]
                };
                const convertData = function(data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var geoCoord = geoCoordMap[data[i].name];
                        if (geoCoord) {
                            res.push({
                                name: data[i].name,
                                value: geoCoord.concat(data[i].value)
                            });
                        }
                    }
                    return res;
                };
                option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    bmap: {
                        center: [104.114129, 37.550339], // 调整地图中心点位置
                        zoom: 6, // 设置地图缩放级别
                        roam: true,
                        mapStyle: {
                            styleJson: [{
                                    featureType: 'water',
                                    elementType: 'all',
                                    stylers: {
                                        color: '#d1d1d1'
                                    }
                                },
                                {
                                    featureType: 'land',
                                    elementType: 'all',
                                    stylers: {
                                        color: '#f3f3f3'
                                    }
                                },
                                {
                                    featureType: 'manmade',
                                    elementType: 'all',
                                    stylers: {
                                        color: '#d1d1d1'
                                    }
                                },
                                {
                                    featureType: 'local',
                                    elementType: 'all',
                                    stylers: {
                                        color: '#d1d1d1'
                                    }
                                },
                                {
                                    featureType: 'arterial',
                                    elementType: 'labels',
                                    stylers: {
                                        visibility: 'off'
                                    }
                                },
                                {
                                    featureType: 'boundary',
                                    elementType: 'all',
                                    stylers: {
                                        color: '#fefefe'
                                    }
                                },
                                {
                                    featureType: 'building',
                                    elementType: 'all',
                                    stylers: {
                                        color: '#d1d1d1'
                                    }
                                },
                                {
                                    featureType: 'label',
                                    elementType: 'labels.text.fill',
                                    stylers: {
                                        color: '#999999'
                                    }
                                }
                            ]
                        }
                    },
                    series: [{
                        type: 'effectScatter',
                        coordinateSystem: 'bmap',
                        data: convertData(
                            data
                            .sort(function(a, b) {
                                return b.value - a.value;
                            })
                            .slice(0, 6)
                        ),
                        symbolSize: function(val) {
                            return val[2] / 10;
                        },
                        encode: {
                            value: 2
                        },
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        label: {
                            formatter: '{b}',
                            position: 'bottom',
                            backgroundColor: 'rgba(255, 255, 255, 1)',
                            padding: [4, 8],
                            formatter: function(params) { // 使用函数动态生成标签内容
                                // 设置文字多少个后面显示省略号
                                if (params.data.name.length > 6) {
                                    return params.data.name.substring(0, 6) + '...';
                                } else {
                                    return params.data.name;
                                }
                            },
                            show: true,
                            fontSize: 12,
                            borderRadius: 30,
                        },
                        itemStyle: {
                            shadowBlur: 10,
                            shadowColor: '#333'
                        },
                        emphasis: {
                            scale: true
                        },
                        zlevel: 1
                    }]
                };
                let menuNav1 = this.menuNav
                let menuNav2 = this.menuNav
                // 设置点击事件监听
                myChart.on('click', (params) => {
                    // menuNav2 = !menuNav1
                    // console.log(menuNav);
                    if (params.componentType === 'series') {
      if (i > this.yearIndex) {
        this.cursorML += (i - this.yearIndex + +("0.0" + this.yearIndex)) / 1.9;
        // this.spanML += 50 * (i - this.yearIndex)
        console.log(i - this.yearIndex + 0.2, "aaaa");
      } else {
        this.cursorML -= (this.yearIndex - i) / 2 + 0.04;
        // this.spanML -= 50 * (this.yearIndex - i)
        console.log(this.yearIndex, i, "bbbb");
      }
      this.yearIndex = i;
    },
    // ________________________
    // 时空地图
    spaceTime() {
      var chartDom = document.getElementById("spaceTime");
      var myChart = echarts.init(chartDom);
      var option;

                        var dataName = params.data.name; // 获取点击的数据名称
                        var dataValue = params.data.value; // 获取点击的数据值
                        // 在这里可以根据需要处理点击事件，比如弹出对应数据的详细信息等操作
                        // console.log('点击了', dataName, '数据，数值为', dataValue);
                        // 这里可以编写触发时间获取对应数据信息的逻辑
                        this.spaceTimeArr(params)
                    }
                })
      const data = [
        {
          name: "海门",
          value: 9,
        },
        {
          name: "金昌",
          value: 19,
        },
        {
          name: "泉州",
          value: 21,
        },
        {
          name: "衢州",
          value: 177,
        },
        {
          name: "廊坊",
          value: 193,
        },
        {
          name: "菏泽",
          value: 194,
        },
        {
          name: "合肥",
          value: 229,
        },
        {
          name: "武汉",
          value: 273,
        },
        {
          name: "啊三大矿及说到底是封建士大夫大师傅就",
          value: 279,
        },
      ];
      const geoCoordMap = {
        海门: [121.15, 31.89],
        鄂尔多斯: [109.781327, 39.608266],
        招远: [120.38, 37.35],
        平顶山: [113.29, 33.75],
        邢台: [114.48, 37.05],
        德州: [116.29, 37.45],
        济宁: [116.59, 35.38],
        荆州: [112.239741, 30.335165],
        宜昌: [111.3, 30.7],
        义乌: [120.06, 29.32],
        丽水: [119.92, 28.45],
        洛阳: [112.44, 34.7],
        秦皇岛: [119.57, 39.95],
        株洲: [113.16, 27.83],
        石家庄: [114.48, 38.03],
        莱芜: [117.67, 36.19],
        常德: [111.69, 29.05],
        保定: [115.48, 38.85],
        湘潭: [112.91, 27.87],
        金华: [119.64, 29.12],
        岳阳: [113.09, 29.37],
        长沙: [113, 28.21],
        衢州: [118.88, 28.97],
        廊坊: [116.7, 39.53],
        菏泽: [115.480656, 35.23375],
        合肥: [117.27, 31.86],
        武汉: ["你好", 30.52],
        啊三大矿及说到底是封建士大夫大师傅就: [125.03, 46.58],
      };
      const convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
            });
          }
        }
        return res;
      };
      option = {
        tooltip: {
          trigger: "item",
        },
        bmap: {
          center: [104.114129, 37.550339], // 调整地图中心点位置
          zoom: 6, // 设置地图缩放级别
          roam: true,
          mapStyle: {
            styleJson: [
              {
                featureType: "water",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1",
                },
              },
              {
                featureType: "land",
                elementType: "all",
                stylers: {
                  color: "#f3f3f3",
                },
              },
              {
                featureType: "manmade",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1",
                },
              },
              {
                featureType: "local",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1",
                },
              },
              {
                featureType: "arterial",
                elementType: "labels",
                stylers: {
                  visibility: "off",
                },
              },
              {
                featureType: "boundary",
                elementType: "all",
                stylers: {
                  color: "#fefefe",
                },
              },
              {
                featureType: "building",
                elementType: "all",
                stylers: {
                  color: "#d1d1d1",
                },
              },
              {
                featureType: "label",
                elementType: "labels.text.fill",
                stylers: {
                  color: "#999999",
                },
              },
            ],
          },
        },
        series: [
          {
            type: "effectScatter",
            coordinateSystem: "bmap",
            data: convertData(
              data
                .sort(function (a, b) {
                  return b.value - a.value;
                })
                .slice(0, 6)
            ),
            symbolSize: function (val) {
              return val[2] / 10;
            },
            encode: {
              value: 2,
            },
            showEffectOn: "render",
            rippleEffect: {
              brushType: "stroke",
            },
            label: {
              formatter: "{b}",
              position: "bottom",
              backgroundColor: "rgba(255, 255, 255, 1)",
              padding: [4, 8],
              formatter: function (params) {
                // 使用函数动态生成标签内容
                // 设置文字多少个后面显示省略号
                if (params.data.name.length > 6) {
                  return params.data.name.substring(0, 6) + "...";
                } else {
                  return params.data.name;
                }
              },
              show: true,
              fontSize: 12,
              borderRadius: 30,
            },
            itemStyle: {
              shadowBlur: 10,
              shadowColor: "#333",
            },
            emphasis: {
              scale: true,
            },
            zlevel: 1,
          },
        ],
      };
      let menuNav1 = this.menuNav;
      let menuNav2 = this.menuNav;
      // 设置点击事件监听
      myChart.on("click", (params) => {
        // menuNav2 = !menuNav1
        // console.log(menuNav);
        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 组件的数据，例如显示菜单导航
                this.menuNav = !this.menuNav
                // 时空地图的数据
                console.log(Arr);
            }
        }
    }
      option && myChart.setOption(option);
    },
    // 时空地图点击时获取的数据
    spaceTimeArr(Arr) {
      // 修改 Vue 组件的数据，例如显示菜单导航
      this.menuNav = !this.menuNav;
      // 时空地图的数据
      console.log(Arr);
    },
  },
};
</script>

<style scoped>
    .getBack {
        position: fixed;
        width: .6rem;
        height: .24rem;
        top: 1rem;
        left: .24rem;
        z-index: 99999;
        font-size: .12rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #2C2C2C;
        border-color: #9E9E9E;
        border-radius: 0;
        font-weight: 700;
    }
.getBack {
  position: fixed;
  width: 0.6rem;
  height: 0.24rem;
  top: 1rem;
  left: 0.24rem;
  z-index: 99999;
  font-size: 0.12rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2c2c2c;
  border-color: #9e9e9e;
  border-radius: 0;
  font-weight: 700;
}

    .box {
        position: absolute;
        bottom: 10%;
        left: 50%;
        height: .3rem;
        transform: translate(-50%, -50%);
    }
.box {
  position: absolute;
  bottom: 10%;
  left: 50%;
  height: 0.3rem;
  transform: translate(-50%, -50%);
}

    .MX {
        height: 20px;
        background-color: #ccc;
    }
.MX {
  height: 20px;
  background-color: #ccc;
}

    .scale {
        width: 3px;
        height: 50px;
        background-color: #ccc;
        cursor: pointer;
    }
.scale {
  width: 3px;
  height: 50px;
  background-color: #ccc;
  cursor: pointer;
}

    .scales {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
.scales {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

    .span {
        font-size: 25px;
        color: rgb(0, 68, 255);
        margin-left: -34px;
    }
.span {
  font-size: 25px;
  color: rgb(0, 68, 255);
  margin-left: -34px;
}

    .cursor {
        position: relative;
        width: 25px;
        height: 30px;
        background-color: rgb(0, 68, 255);
        margin-top: 30px;
        margin-left: -12.5px;
    }
.cursor {
  position: relative;
  width: 25px;
  height: 30px;
  background-color: rgb(0, 68, 255);
  margin-top: 30px;
  margin-left: -12.5px;
}

    .cursor:before {
        content: "";
        position: absolute;
        top: -20px;
        width: 0;
        height: 0;
        border-left: 13px solid transparent;
        border-right: 13px solid transparent;
        border-bottom: 20px solid rgb(0, 68, 255);
    }
.cursor:before {
  content: "";
  position: absolute;
  top: -20px;
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-bottom: 20px solid rgb(0, 68, 255);
}

    ::v-deep .particulars {
        position: absolute !important;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: auto;
        margin: 0;
    }
::v-deep .particulars {
  position: absolute !important;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
}

    .particulars ::v-deep .el-dialog {
        margin: 0 !important;
        position: absolute;
        right: 0;
        top: 0;
        width: 4rem;
        height: 100%;
.particulars ::v-deep .el-dialog {
  margin: 0 !important;
  position: absolute;
  right: 0;
  top: 0;
  width: 4rem;
  height: 100%;
}

    }
.particulars ::v-deep .el-dialog__header {
  display: none;
}

    .particulars ::v-deep .el-dialog__header {
        display: none;
    }

    .particulars ::v-deep .el-dialog__body {
        padding: .26rem .23rem .26rem .27rem;
        color: #2C2C2C !important;
        position: relative;
        height: 100%;
    }
</style>
.particulars ::v-deep .el-dialog__body {
  padding: 0.26rem 0.23rem 0.26rem 0.27rem;
  color: #2c2c2c !important;
  position: relative;
  height: 100%;
}
#map {
  height: 1080px;
  width: 100%;
  margin: 0 auto;
  font-size: 14px !important;
}
</style>

 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,6 +174,7 @@
<!-- 5USVDAhhS4ssz44HLq3gNPZai7naXf4Q -->
<script>
import { loadBMap } from "@/static/map.js";
import L from "leaflet";
import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";
export default {
@@ -187,25 +188,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 +214,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 +294,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 +334,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 +350,108 @@
    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", {

      //   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, //鼠标移动事件
      // });
      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);

      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"],
          }
        )
        .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 +466,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 +595,11 @@
  line-height: 1;
  margin-left: 0.19rem;
}

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

 yarn.lock

Diff too large