From d5f572496c5fb12fec2fe346b847bf58331299c9 Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期三, 17 七月 2024 15:56:51 +0800
Subject: [PATCH] 1
---
src/pages/territory/territory.vue | 2582 +++++++++++++++++++++++-----------------------------------
1 files changed, 1,024 insertions(+), 1,558 deletions(-)
diff --git a/src/pages/territory/territory.vue b/src/pages/territory/territory.vue
index 53352f1..36353af 100644
--- a/src/pages/territory/territory.vue
+++ b/src/pages/territory/territory.vue
@@ -1,1592 +1,1058 @@
<template>
- <view>
- <!-- 椤堕儴瀵艰埅 -->
- <headNav :idIndex="idIndex" text="涓尰鍦板煙鍖昏氨" />
- <view class="flex flex-center" style="width: 100%; margin: .2rem 0 .34rem;justify-content: flex-start;">
- <advancedSearch class="Search" placehold="杈撳叆濮撳悕/鍒悕/鏈濅唬/浼犱富鑱屼笟鎼滅储" @onSearch="onSearch" :isAvancedTrue="false" />
- <ul class="flex">
- <li style="" v-for="(item,index) in dynasty" :key="item.id">
- <view @click="SchoolClick(item.id)" class="flex flex-center font-family school"
- :style="{'marginRight': index === dynasty.length - 1 ? '0' : '0.03rem'}"
- style="font-weight: 500; border-radius: .3rem; padding: .06rem .15rem; color: #2C2C2C; font-size: .12rem; margin-top: .03rem;margin-right: .1rem;background-color: #fff;">
- <view class="" :style="{background:item.color}"
- style="margin-right: .07rem; width: .12rem;height: .12rem;border-radius: 50%;"></view>
- <view class="" style="color: #2C2C2C;font-size: .12rem;">{{item.name}}</view>
- </view>
- </li>
- </ul>
- </view>
- <!-- 鎼滅储鍚庣殑寮规 -->
- <el-card class="box-card " v-if="isSearch"
- style=" height: 3.2rem; width: 3rem;position: fixed;z-index: 999999999999;left: 1rem;top: 2.2rem;">
- <div slot="header" class="clearfix">
- <span>浜虹墿 ({{SearchArr.length}})</span>
- <el-button style="float: right; padding: 3px 0;font-size: .12rem;color: #597AA5;"
- @click="isSearch=false" type="text">鍏抽棴</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: .18rem;font-weight: 700;">{{item.name}}</li>
- <li>鐢熷崚骞�: {{item.birthAndDeath}}</li>
- <li>鏉ユ簮: {{item.source}}</li>
- <li v-if="SearchArr.length-1!==index" style="margin: .1rem 0; border-bottom: 1px solid #D8D8D8;"></li>
- </ul>
- </view>
-
- </el-card>
- <!-- echarts閲岄潰鐨勬暟鎹偣鍑诲悗寮规 -->
- <el-card class="box-card echartsTrue" v-if="isEchTrue"
- style="overflow: inherit; width: 3rem; position: fixed;z-index: 999999999999;"
- :style="{top:isTop,left:isLeft}">
- <div slot="header" class="clearfix">
- <span>{{information[0].content}}</span>
- <el-button style="float: right; padding: 3px 0;font-size: .12rem;color: #597AA5;"
- @click="isEchTrue=false" type="text">鍏抽棴</el-button>
- </div>
- <ul class="information">
- <li v-for="(item,index) in information" :key="index">
- {{item.label}}: {{item.content}}
- </li>
- </ul>
- <el-button class="flex" @click="viewMoreClick"
- style="width: 100%; padding: 3px 0;font-size: .12rem;color: #597AA5;" type="text">鏌ョ湅鏇村>></el-button>
- </el-card>
- <!-- echarts鍦板浘 -->
- <view id="main" style="width: 100vw;position: relative;"></view>
+ <view class="pageBox">
+ <!-- 椤堕儴瀵艰埅 -->
+ <headNav :idIndex="idIndex" text="鍦板煙鍥捐氨" style="z-index: 999" />
+ <view
+ class="flex flex-center"
+ style="width: 100%; margin: 20px 0 34px; justify-content: flex-start"
+ >
+ <advancedSearch
+ class="Search"
+ placehold="杈撳叆濮撳悕/鍒悕/鏃舵湡/浼犱富鑱屼笟鎼滅储"
+ @onSearch="onSearch"
+ :isAvancedTrue="false"
+ :keyword="keyword"
+ />
+ <!-- <ul class="flex">
+ <li v-for="(item, index) in dynasty" :key="item.id">
+ <view
+ @click="SchoolClick(item.id)"
+ class="flex flex-center font-family school"
+ :style="{
+ marginRight: index === dynasty.length - 1 ? '0' : '0.03rem',
+ }"
+ style="
+ font-weight: 500;
+ border-radius: 0.3rem;
+ padding: 0.06rem 0.15rem;
+ color: #2c2c2c;
+ font-size: 0.12rem;
+ margin-top: 0.03rem;
+ margin-right: 0.1rem;
+ background-color: #fff;
+ "
+ >
+ <view
+ :style="{ background: item.color }"
+ style="
+ margin-right: 0.07rem;
+ width: 0.12rem;
+ height: 0.12rem;
+ border-radius: 50%;
+ "
+ ></view>
+ <view style="color: #2c2c2c; font-size: 0.12rem">{{
+ item.name
+ }}</view>
+ </view>
+ </li>
+ </ul> -->
+ </view>
+ <!-- 鎼滅储鍚庣殑寮规 -->
+ <el-card
+ class="box-card"
+ v-if="isSearch"
+ style="
+ height: 3.2rem;
+ width: 3rem;
+ position: fixed;
+ z-index: 99;
+ left: 1rem;
+ top: 2.2rem;
+ "
+ >
+ <div slot="header" class="clearfix">
+ <span>浜虹墿 ({{ SearchArr.length }})</span>
+ <el-button
+ style="
+ float: right;
+ padding: 3px 0;
+ font-size: 0.12rem;
+ color: #597aa5;
+ "
+ @click="isSearch = false"
+ type="text"
+ >鍏抽棴</el-button
+ >
+ </div>
+ <view style="overflow: auto; height: 2.5rem" v-loading="loading">
+ <div
+ v-if="!loading && SearchArr.length == 0"
+ style="
+ position: absolute;
+ top: 30%;
+ left: 0;
+ right: 0;
+ text-align: center;
+ font-size: 0.2rem;
+ color: #666;
+ "
+ >
+ 鏆傛棤鎼滅储鏁版嵁
+ </div>
+ <ul
+ class="information"
+ v-for="(item, index) in SearchArr"
+ :key="index"
+ style="cursor: pointer;"
+ @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>绫嶈疮: {{ item.nativPlace ? item.nativPlace : "-" }}</li>
+ <li
+ v-if="SearchArr.length - 1 !== index"
+ style="margin: 0.1rem 0; border-bottom: 1px solid #d8d8d8"
+ ></li>
+ </ul>
+ </view>
+ </el-card>
+ <!-- echarts閲岄潰鐨勬暟鎹偣鍑诲悗寮规 -->
- <!-- 鏈濅唬 -->
- <view class="flex flex-center" style="width: 100%; position: fixed;bottom: .33rem;left: 0;">
- <ul class="flex">
- <li @click="dynastyBottomClick(item.id)" v-for="(item,index) in dynasty1" :key="item.id">
- <view class="flex flex-center" style="height: .35rem; background-color: #fff; color:#244A7B ;">
- {{item.coord}}
- </view>
- <view class="flex flex-center font-family"
- style="padding: .05rem .19rem; height: .3rem;line-height: .3rem; color: #fff; font-size: .14rem; margin-top: .03rem;margin-right: .03rem;background-color: #597AA5;"
- :style="{'marginRight': index === dynasty1.length - 1 ? '0' : '0.03rem','background':dynasty1Color==item.id?'#244A7B':'#597AA5'}">
- {{item.name}}
- </view>
- </li>
- </ul>
- </view>
- </view>
+ <div class="mapBox" id="mapBox" v-loading="mapLoading">
+ <div id="map"></div>
+ <div
+ class="markerDataListBox"
+ v-if="isEchTrue"
+ style="overflow: inherit; width: 3rem; position: absolute; z-index: 999"
+ :style="{ top: isTop, left: isLeft }"
+ >
+ <div class="markerDataList">
+ <div class="markerDataContentBox">
+ <div v-if="currentMark.length == 1">
+ <ul class="information">
+ <li>
+ 濮撳悕:
+ {{ currentMark[0].name ? currentMark[0].name : "-" }}
+ </li>
+ <li>鍒悕: {{ currentMark[0].nikeName ? currentMark[0].nikeName : "-" }}</li>
+ <li>绫嶈疮: {{ currentMark[0].nativePlace ? currentMark[0].nativePlace : "-" }}</li>
+ <li>鍖诲鍒嗙: {{ currentMark[0].barnch ? currentMark[0].barnch : "-" }}</li>
+ <li
+ class="medicalLi"
+ :title="currentMark[0].medical ? currentMark[0].medical : '-'"
+ >
+ 灏忎紶: {{ currentMark[0].medical ? currentMark[0].medical : "-" }}
+ </li>
+ </ul>
+ <el-button
+ class="flex"
+ @click="viewMoreClick(currentMark[0])"
+ style="
+ width: 100%;
+ padding: 3px 0;
+ font-size: 0.12rem;
+ color: #597aa5;
+ "
+ type="text"
+ >鏌ョ湅鏇村>></el-button
+ >
+ </div>
+ <el-collapse v-else>
+ <el-collapse-item
+ v-for="(item, index) in currentMark"
+ :name="index"
+ >
+ <template slot="title">
+ <div class="titleImg">
+ <i class="el-icon-user"></i>
+ </div>
+ <span>{{ item.name }}</span>
+ </template>
+ <ul class="information">
+ <li>
+ 濮撳悕:
+ {{ item.name ? item.name : "-" }}
+ </li>
+ <li>鍒悕: {{ item.nikeName ? item.nikeName : "-" }}</li>
+ <li>绫嶈疮: {{ item.nativePlace ? item.nativePlace : "-" }}</li>
+ <li>鍖诲鍒嗙: {{ item.barnch ? item.barnch : "-" }}</li>
+ <li
+ class="medicalLi"
+ :title="item.medical ? item.medical : '-'"
+ >
+ 灏忎紶: {{ item.medical ? item.medical : "-" }}
+ </li>
+ </ul>
+ <el-button
+ class="flex"
+ @click="viewMoreClick(item)"
+ style="
+ width: 100%;
+ padding: 3px 0;
+ font-size: 0.12rem;
+ color: #597aa5;
+ "
+ type="text"
+ >鏌ョ湅鏇村>></el-button
+ >
+ </el-collapse-item>
+ </el-collapse>
+
+ </div>
+ </div>
+ </div>
+ <!-- <el-card class="box-card echartsTrue" v-show="isEchTrue">
+ <div slot="header" class="clearfix">
+ <span v-if="currentMark">{{
+ currentMark.name ? currentMark.name : "-"
+ }}</span>
+ <el-button
+ style="
+ float: right;
+ padding: 3px 0;
+ font-size: 0.12rem;
+ color: #597aa5;
+ "
+ @click="isEchTrue = false"
+ type="text"
+ >鍏抽棴</el-button
+ >
+ </div>
+ <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
+ class="medicalLi"
+ :title="currentMark.medical ? currentMark.medical : '-'"
+ >
+ 灏忎紶: {{ 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-card> -->
+ </div>
+
+ <!-- 鏈濅唬 -->
+ <view
+ class="flex flex-center"
+ style="
+ width: 100%;
+ position: fixed;
+ bottom: 0.33rem;
+ left: 0;
+ right: 0;
+ z-index: 99;
+ overflow: auto;
+ "
+ >
+ <ul class="flex">
+ <li
+ @click="dynastyBottomClick(item.id)"
+ v-for="(item, index) in dynasty1"
+ :key="item.id"
+ >
+ <view
+ class="flex flex-center"
+ style="height: 0.35rem; background-color: #fff; color: #244a7b"
+ >
+ {{ item.start }}
+ </view>
+ <view
+ class="flex flex-center font-family"
+ style="
+ min-width: 0.6rem;
+ height: 0.3rem;
+ line-height: 0.3rem;
+ text-align: center;
+ color: #fff;
+ font-size: 0.14rem;
+ margin-top: 0.03rem;
+ margin-right: 0.03rem;
+ background-color: #597aa5;
+ "
+ :style="{
+ marginRight: index === dynasty1.length - 1 ? '0' : '0.03rem',
+ background: dynasty1Color == item.id ? '#244A7B' : '#597AA5'
+ }"
+ >
+ {{ item.dynastyChs }}
+ </view>
+ </li>
+ </ul>
+ </view>
+ </view>
</template>
<!-- <script src="https://api.map.baidu.com/api?v=3.0&ak=5USVDAhhS4ssz44HLq3gNPZai7naXf4Q&callback=initializeMap"></script> -->
<!-- 5USVDAhhS4ssz44HLq3gNPZai7naXf4Q -->
<script>
- import {
- loadBMap
- } from "@/static/map.js"
- import * as echarts from 'echarts';
- import 'echarts/extension/bmap/bmap';
- export default {
- data() {
- return {
- // echarts鍏冪礌鐐瑰嚮鏃跺嚭鏉ョ殑寮圭獥鍜屽潗鏍�
- isEchTrue: false,
- isLeft: 0,
- isTop: 0,
- // 鐢ㄦ埛淇℃伅
- information: [{
- label: '濮撳悕',
- content: '鏉庢椂鐝�'
- },
- {
- label: '鍒悕',
- content: '涓滀附鍏堢敓'
- },
- {
- label: '绫嶈疮',
- content: '婀栧寳'
- },
- {
- label: '鍖诲鍒嗙',
- content: '涓嵂,閽堢伕'
- },
- {
- label: '灏忎紶',
- content: '鏉庢椂鐝�(绾�1518骞磣1593 骞�)锛� 瀛椾笢鐠э紝 鏅氬勾鑷彿婵掓箹灞变汉锛� 婀栧箍榛勫窞搴滆柂宸�(浠婃箹鍖楃渷钖槬鍘�) 浜猴紝 鏄庝唬钁楀悕鍖昏嵂瀛﹀銆� 涓庘�� 鍖诲湥鈥� 涓囧瘑鏂嬮綈鍚嶏紝 鍙ゆ湁鈥� 涓囧瘑鏂嬬殑鏂癸紝 鏉庢椂鐝嶇殑鑽�� 涔嬭銆� 鍚庝负妤氬共搴�...'
- }
- ],
- // 涓嬮潰鐨勬湞浠�1
- dynasty1Color: 1,
- dynasty1: [{
- name: '澶忔湞',
- coord: '2070BC',
- id: 1
- },
- {
- name: '鍟嗘湞',
- id: 2,
- coord: '1600BC',
- },
- {
- name: '瑗垮懆',
- id: 3,
- coord: '1600BC'
- },
- {
- name: '鏄ョ鎴樺浗',
- id: 4,
- coord: '770BC'
- },
- {
- name: '绉︽湞',
- id: 5,
- coord: '221BC'
- }, {
- name: '姹夋湞',
- id: 6,
- coord: '202BC'
- },
- {
- name: '涓夊浗涓ゆ檵鍗楀寳鏈�',
- id: 7,
- coord: '184'
- },
- {
- name: '闅嬫湞',
- id: 8,
- coord: '581'
- },
- {
- name: '鍞愭湞',
- id: 9,
- coord: '618'
- },
- {
- name: '浜斾唬鍗佸浗',
- id: 10,
- coord: '907'
- },
- {
- name: '杈藉閲�',
- id: 11,
- coord: '907'
- },
- {
- name: '瀹嬫湞',
- id: 12,
- coord: '960'
- },
- {
- name: '鍏冩湞',
- id: 13,
- coord: '1271'
- },
- {
- name: '鏄庢湞',
- id: 14,
- coord: '1368'
- },
- {
- name: '娓呮湞',
- id: 15,
- coord: '1636'
- },
- ],
- // 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ
- idIndex: 0,
- // 鏈濅唬
- dynasty: [{
- name: '澶忔湞',
- color: '#90BBD8',
- id: 1
- }, {
- name: '鍟嗘湞',
- color: '#EDD28B',
- id: 2
- }, {
- name: '瑗垮懆',
- color: '#CF746D',
- id: 3
- }, {
- name: '绉︽湞',
- color: '#9CC27A',
- id: 4
- }, {
- name: '姹夋湞',
- color: '#5B6CB9',
- id: 5
- }, {
- name: '闅嬫湞',
- color: '#8860A8',
- id: 6
- }, {
- name: '鍞愭湞',
- color: '#DE8E66',
- id: 7
- }],
- // 鎼滅储鍚庢槸鍚︽樉绀哄脊妗�
- isSearch:false,
- SearchArr:[
- {
- id:1,
- name:'鏉庢椂鐝�',
- birthAndDeath:'1518-1593',
- source:'鍥藉浘瑙勮寖妗ｏ紝CBDB锛屼笂鍥惧彜绫嶆暟鎹簱 绫嶈疮锛氭箹鍖�'
- },{
- id:2,
- name:'鏉庢椂鐝�',
- birthAndDeath:'1518-1593',
- source:'鍥藉浘瑙勮寖妗ｏ紝CBDB锛屼笂鍥惧彜绫嶆暟鎹簱 绫嶈疮锛氭箹鍖�'
- }
- ]
- }
- },
- onLoad(options) {
- this.idIndex = options.id
- console.log('optionsoptionsoptions', options.id);
- },
- mounted() {
- console.log('ss');
- // this.$nextTick(() => {
- loadBMap('5USVDAhhS4ssz44HLq3gNPZai7naXf4Q').then(() => {
- this.innt()
- })
- // })
- },
- methods: {
- // 鐐瑰嚮涓嬮潰鐨勬湞浠ｆ寜閽�
- dynastyBottomClick(id) {
- console.log(id);
- this.dynasty1Color = id
- },
- onSearch(val) {
- console.log(val);
- //
- this.isSearch= true
- },
- // 鐐瑰嚮涓婇潰鐨勬湞浠ｆ寜閽�
- SchoolClick(id){
- console.log(id);
- },
- innt() {
- this.$nextTick(() => {
+import { loadBMap } from "@/static/map.js";
+import L from "leaflet";
+import "leaflet.chinatmsproviders";
+import * as echarts from "echarts";
+import "echarts/extension/bmap/bmap";
+import {
+ getRetrieval,
+ getDynasty,
+ getPreCount,
+ getDynastyData
+} from "@/api/index.js";
- var chartDom = document.getElementById('main');
- var myChart = echarts.init(chartDom);
- var option;
+export default {
+ data() {
+ return {
+ loading: true,
+ mapLoading: true,
+ // echarts鍏冪礌鐐瑰嚮鏃跺嚭鏉ョ殑寮圭獥鍜屽潗鏍�
+ keyword: "",
+ isEchTrue: false,
+ isLeft: 0,
+ isTop: 0,
+ // 鐢ㄦ埛淇℃伅
+ information: [
+ {
+ label: "濮撳悕",
+ content: "鏉庢椂鐝�"
+ },
+ {
+ label: "鍒悕",
+ content: "涓滀附鍏堢敓"
+ },
+ {
+ label: "绫嶈疮",
+ content: "婀栧寳"
+ },
+ {
+ label: "鍖诲鍒嗙",
+ content: "涓嵂,閽堢伕"
+ },
+ {
+ label: "灏忎紶",
+ content:
+ "鏉庢椂鐝�(绾�1518骞磣1593 骞�)锛� 瀛椾笢鐠э紝 鏅氬勾鑷彿婵掓箹灞变汉锛� 婀栧箍榛勫窞搴滆柂宸�(浠婃箹鍖楃渷钖槬鍘�) 浜猴紝 鏄庝唬钁楀悕鍖昏嵂瀛﹀銆� 涓庘�� 鍖诲湥鈥� 涓囧瘑鏂嬮綈鍚嶏紝 鍙ゆ湁鈥� 涓囧瘑鏂嬬殑鏂癸紝 鏉庢椂鐝嶇殑鑽�� 涔嬭銆� 鍚庝负妤氬共搴�..."
+ }
+ ],
+ // 涓嬮潰鐨勬湞浠�1
+ dynasty1Color: "",
+ dynasty1: [
+ {
+ name: "澶忔湞",
+ coord: "2070BC",
+ id: 1
+ },
+ {
+ name: "鍟嗘湞",
+ id: 2,
+ coord: "1600BC"
+ },
+ {
+ name: "瑗垮懆",
+ id: 3,
+ coord: "1600BC"
+ },
+ {
+ name: "鏄ョ鎴樺浗",
+ id: 4,
+ coord: "770BC"
+ },
+ {
+ name: "绉︽湞",
+ id: 5,
+ coord: "221BC"
+ },
+ {
+ name: "姹夋湞",
+ id: 6,
+ coord: "202BC"
+ },
+ {
+ name: "涓夊浗涓ゆ檵鍗楀寳鏈�",
+ id: 7,
+ coord: "184"
+ },
+ {
+ name: "闅嬫湞",
+ id: 8,
+ coord: "581"
+ },
+ {
+ name: "鍞愭湞",
+ id: 9,
+ coord: "618"
+ },
+ {
+ name: "浜斾唬鍗佸浗",
+ id: 10,
+ coord: "907"
+ },
+ {
+ name: "杈藉閲�",
+ id: 11,
+ coord: "907"
+ },
+ {
+ name: "瀹嬫湞",
+ id: 12,
+ coord: "960"
+ },
+ {
+ name: "鍏冩湞",
+ id: 13,
+ coord: "1271"
+ },
+ {
+ name: "鏄庢湞",
+ id: 14,
+ coord: "1368"
+ },
+ {
+ name: "娓呮湞",
+ id: 15,
+ coord: "1636"
+ }
+ ],
+ // 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ
+ idIndex: 0,
+ // 鏈濅唬
+ dynasty: [
+ {
+ name: "澶�",
+ color: "#90BBD8",
+ id: 1
+ },
+ {
+ name: "鍟�",
+ color: "#EDD28B",
+ id: 2
+ },
+ {
+ name: "瑗垮懆",
+ color: "#CF746D",
+ id: 3
+ },
+ {
+ name: "绉�",
+ color: "#9CC27A",
+ id: 4
+ },
+ {
+ name: "姹�",
+ color: "#5B6CB9",
+ id: 5
+ },
+ {
+ name: "闅�",
+ color: "#8860A8",
+ id: 6
+ },
+ {
+ name: "鍞�",
+ color: "#DE8E66",
+ id: 7
+ },
+ {
+ name: "鏄�",
+ color: "#DE8E66",
+ id: 8
+ }
+ ],
+ // 鎼滅储鍚庢槸鍚︽樉绀哄脊妗�
+ isSearch: false,
+ currentMark: null,
+ SearchArr: [
+ {
+ id: 1,
+ name: "鏉庢椂鐝�",
+ birthAndDeath: "1518-1593",
+ source: "鍥藉浘瑙勮寖妗ｏ紝CBDB锛屼笂鍥惧彜绫嶆暟鎹簱 绫嶈疮锛氭箹鍖�"
+ },
+ {
+ id: 2,
+ name: "鏉庢椂鐝�",
+ birthAndDeath: "1518-1593",
+ source: "鍥藉浘瑙勮寖妗ｏ紝CBDB锛屼笂鍥惧彜绫嶆暟鎹簱 绫嶈疮锛氭箹鍖�"
+ }
+ ],
+ zoomLevel: 5,
+ oldMarkList: [],
+ aggregatedData: [],
+ openData: null
+ };
+ },
+ onLoad(options) {
+ this.idIndex = options.id;
+ },
+ mounted() {
+ this.getDynastyList();
- const data = [{
- name: '娴烽棬',
- value: 9
- },
- {
- name: '閯傚皵澶氭柉',
- value: 12
- },
- {
- name: '鎷涜繙',
- value: 12
- },
- {
- name: '鑸熷北',
- value: 12
- },
- {
- name: '榻愰綈鍝堝皵',
- value: 14
- },
- {
- name: '鐩愬煄',
- value: 15
- },
- {
- name: '璧ゅ嘲',
- value: 16
- },
- {
- name: '闈掑矝',
- value: 18
- },
- {
- name: '涔冲北',
- value: 18
- },
- {
- name: '閲戞槍',
- value: 19
- },
- {
- name: '娉夊窞',
- value: 21
- },
- {
- name: '鑾辫タ',
- value: 21
- },
- {
- name: '鏃ョ収',
- value: 21
- },
- {
- name: '鑳跺崡',
- value: 22
- },
- {
- name: '鍗楅��',
- value: 23
- },
- {
- name: '鎷夎惃',
- value: 24
- },
- {
- name: '浜戞诞',
- value: 24
- },
- {
- name: '姊呭窞',
- value: 25
- },
- {
- name: '鏂囩櫥',
- value: 25
- },
- {
- name: '涓婃捣',
- value: 25
- },
- {
- name: '鏀�鏋濊姳',
- value: 25
- },
- {
- name: '濞佹捣',
- value: 25
- },
- {
- name: '鎵垮痉',
- value: 25
- },
- {
- name: '鍘﹂棬',
- value: 26
- },
- {
- name: '姹曞熬',
- value: 26
- },
- {
- name: '娼窞',
- value: 26
- },
- {
- name: '涓逛笢',
- value: 27
- },
- {
- name: '澶粨',
- value: 27
- },
- {
- name: '鏇查潠',
- value: 27
- },
- {
- name: '鐑熷彴',
- value: 28
- },
- {
- name: '绂忓窞',
- value: 29
- },
- {
- name: '鐡︽埧搴�',
- value: 30
- },
- {
- name: '鍗冲ⅷ',
- value: 30
- },
- {
- name: '鎶氶『',
- value: 31
- },
- {
- name: '鐜夋邯',
- value: 31
- },
- {
- name: '寮犲鍙�',
- value: 31
- },
- {
- name: '闃虫硥',
- value: 31
- },
- {
- name: '鑾卞窞',
- value: 32
- },
- {
- name: '婀栧窞',
- value: 32
- },
- {
- name: '姹曞ご',
- value: 32
- },
- {
- name: '鏄嗗北',
- value: 33
- },
- {
- name: '瀹佹尝',
- value: 33
- },
- {
- name: '婀涙睙',
- value: 33
- },
- {
- name: '鎻槼',
- value: 34
- },
- {
- name: '鑽ｆ垚',
- value: 34
- },
- {
- name: '杩炰簯娓�',
- value: 35
- },
- {
- name: '钁姦宀�',
- value: 35
- },
- {
- name: '甯哥啛',
- value: 36
- },
- {
- name: '涓滆帪',
- value: 36
- },
- {
- name: '娌虫簮',
- value: 36
- },
- {
- name: '娣畨',
- value: 36
- },
- {
- name: '娉板窞',
- value: 36
- },
- {
- name: '鍗楀畞',
- value: 37
- },
- {
- name: '钀ュ彛',
- value: 37
- },
- {
- name: '鎯犲窞',
- value: 37
- },
- {
- name: '姹熼槾',
- value: 37
- },
- {
- name: '钃幈',
- value: 37
- },
- {
- name: '闊跺叧',
- value: 38
- },
- {
- name: '鍢夊唱鍏�',
- value: 38
- },
- {
- name: '骞垮窞',
- value: 38
- },
- {
- name: '寤跺畨',
- value: 38
- },
- {
- name: '澶師',
- value: 39
- },
- {
- name: '娓呰繙',
- value: 39
- },
- {
- name: '涓北',
- value: 39
- },
- {
- name: '鏄嗘槑',
- value: 39
- },
- {
- name: '瀵垮厜',
- value: 40
- },
- {
- name: '鐩橀敠',
- value: 40
- },
- {
- name: '闀挎不',
- value: 41
- },
- {
- name: '娣卞湷',
- value: 41
- },
- {
- name: '鐝犳捣',
- value: 42
- },
- {
- name: '瀹胯縼',
- value: 43
- },
- {
- name: '鍜搁槼',
- value: 43
- },
- {
- name: '閾滃窛',
- value: 44
- },
- {
- name: '骞冲害',
- value: 44
- },
- {
- name: '浣涘北',
- value: 44
- },
- {
- name: '娴峰彛',
- value: 44
- },
- {
- name: '姹熼棬',
- value: 45
- },
- {
- name: '绔犱笜',
- value: 45
- },
- {
- name: '鑲囧簡',
- value: 46
- },
- {
- name: '澶ц繛',
- value: 47
- },
- {
- name: '涓存本',
- value: 47
- },
- {
- name: '鍚存睙',
- value: 47
- },
- {
- name: '鐭冲槾灞�',
- value: 49
- },
- {
- name: '娌堥槼',
- value: 50
- },
- {
- name: '鑻忓窞',
- value: 50
- },
- {
- name: '鑼傚悕',
- value: 50
- },
- {
- name: '鍢夊叴',
- value: 51
- },
- {
- name: '闀挎槬',
- value: 51
- },
- {
- name: '鑳跺窞',
- value: 52
- },
- {
- name: '閾跺窛',
- value: 52
- },
- {
- name: '寮犲娓�',
- value: 52
- },
- {
- name: '涓夐棬宄�',
- value: 53
- },
- {
- name: '閿﹀窞',
- value: 54
- },
- {
- name: '鍗楁槍',
- value: 54
- },
- {
- name: '鏌冲窞',
- value: 54
- },
- {
- name: '涓変簹',
- value: 54
- },
- {
- name: '鑷础',
- value: 56
- },
- {
- name: '鍚夋灄',
- value: 56
- },
- {
- name: '闃虫睙',
- value: 57
- },
- {
- name: '娉稿窞',
- value: 57
- },
- {
- name: '瑗垮畞',
- value: 57
- },
- {
- name: '瀹滃',
- value: 58
- },
- {
- name: '鍛煎拰娴╃壒',
- value: 58
- },
- {
- name: '鎴愰兘',
- value: 58
- },
- {
- name: '澶у悓',
- value: 58
- },
- {
- name: '闀囨睙',
- value: 59
- },
- {
- name: '妗傛灄',
- value: 59
- },
- {
- name: '寮犲鐣�',
- value: 59
- },
- {
- name: '瀹滃叴',
- value: 59
- },
- {
- name: '鍖楁捣',
- value: 60
- },
- {
- name: '瑗垮畨',
- value: 61
- },
- {
- name: '閲戝潧',
- value: 62
- },
- {
- name: '涓滆惀',
- value: 62
- },
- {
- name: '鐗′腹姹�',
- value: 63
- },
- {
- name: '閬典箟',
- value: 63
- },
- {
- name: '缁嶅叴',
- value: 63
- },
- {
- name: '鎵窞',
- value: 64
- },
- {
- name: '甯稿窞',
- value: 64
- },
- {
- name: '娼嶅潑',
- value: 65
- },
- {
- name: '閲嶅簡',
- value: 66
- },
- {
- name: '鍙板窞',
- value: 67
- },
- {
- name: '鍗椾含',
- value: 67
- },
- {
- name: '婊ㄥ窞',
- value: 70
- },
- {
- name: '璐甸槼',
- value: 71
- },
- {
- name: '鏃犻敗',
- value: 71
- },
- {
- name: '鏈邯',
- value: 71
- },
- {
- name: '鍏嬫媺鐜涗緷',
- value: 72
- },
- {
- name: '娓崡',
- value: 72
- },
- {
- name: '椹瀺灞�',
- value: 72
- },
- {
- name: '瀹濋浮',
- value: 72
- },
- {
- name: '鐒︿綔',
- value: 75
- },
- {
- name: '鍙ュ',
- value: 75
- },
- {
- name: '鍖椾含',
- value: 79
- },
- {
- name: '寰愬窞',
- value: 79
- },
- {
- name: '琛℃按',
- value: 80
- },
- {
- name: '鍖呭ご',
- value: 80
- },
- {
- name: '缁甸槼',
- value: 80
- },
- {
- name: '涔岄瞾鏈ㄩ綈',
- value: 84
- },
- {
- name: '鏋ｅ簞',
- value: 84
- },
- {
- name: '鏉窞',
- value: 84
- },
- {
- name: '娣勫崥',
- value: 85
- },
- {
- name: '闉嶅北',
- value: 86
- },
- {
- name: '婧ч槼',
- value: 86
- },
- {
- name: '搴撳皵鍕�',
- value: 86
- },
- {
- name: '瀹夐槼',
- value: 90
- },
- {
- name: '寮�灏�',
- value: 90
- },
- {
- name: '娴庡崡',
- value: 92
- },
- {
- name: '寰烽槼',
- value: 93
- },
- {
- name: '娓╁窞',
- value: 95
- },
- {
- name: '涔濇睙',
- value: 96
- },
- {
- name: '閭兏',
- value: 98
- },
- {
- name: '涓村畨',
- value: 99
- },
- {
- name: '鍏板窞',
- value: 99
- },
- {
- name: '娌у窞',
- value: 100
- },
- {
- name: '涓存矀',
- value: 103
- },
- {
- name: '鍗楀厖',
- value: 104
- },
- {
- name: '澶╂触',
- value: 105
- },
- {
- name: '瀵岄槼',
- value: 106
- },
- {
- name: '娉板畨',
- value: 112
- },
- {
- name: '璇告毃',
- value: 112
- },
- {
- name: '閮戝窞',
- value: 113
- },
- {
- name: '鍝堝皵婊�',
- value: 114
- },
- {
- name: '鑱婂煄',
- value: 116
- },
- {
- name: '鑺滄箹',
- value: 117
- },
- {
- name: '鍞愬北',
- value: 119
- },
- {
- name: '骞抽《灞�',
- value: 119
- },
- {
- name: '閭㈠彴',
- value: 119
- },
- {
- name: '寰峰窞',
- value: 120
- },
- {
- name: '娴庡畞',
- value: 120
- },
- {
- name: '鑽嗗窞',
- value: 127
- },
- {
- name: '瀹滄槍',
- value: 130
- },
- {
- name: '涔変箤',
- value: 132
- },
- {
- name: '涓芥按',
- value: 133
- },
- {
- name: '娲涢槼',
- value: 134
- },
- {
- name: '绉︾殗宀�',
- value: 136
- },
- {
- name: '鏍床',
- value: 143
- },
- {
- name: '鐭冲搴�',
- value: 147
- },
- {
- name: '鑾辫姕',
- value: 148
- },
- {
- name: '甯稿痉',
- value: 152
- },
- {
- name: '淇濆畾',
- value: 153
- },
- {
- name: '婀樻江',
- value: 154
- },
- {
- name: '閲戝崕',
- value: 157
- },
- {
- name: '宀抽槼',
- value: 169
- },
- {
- name: '闀挎矙',
- value: 175
- },
- {
- 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],
- 鑸熷北: [122.207216, 29.985295],
- 榻愰綈鍝堝皵: [123.97, 47.33],
- 鐩愬煄: [120.13, 33.38],
- 璧ゅ嘲: [118.87, 42.28],
- 闈掑矝: [120.33, 36.07],
- 涔冲北: [121.52, 36.89],
- 閲戞槍: [102.188043, 38.520089],
- 娉夊窞: [118.58, 24.93],
- 鑾辫タ: [120.53, 36.86],
- 鏃ョ収: [119.46, 35.42],
- 鑳跺崡: [119.97, 35.88],
- 鍗楅��: [121.05, 32.08],
- 鎷夎惃: [91.11, 29.97],
- 浜戞诞: [112.02, 22.93],
- 姊呭窞: [116.1, 24.55],
- 鏂囩櫥: [122.05, 37.2],
- 涓婃捣: [121.48, 31.22],
- 鏀�鏋濊姳: [101.718637, 26.582347],
- 濞佹捣: [122.1, 37.5],
- 鎵垮痉: [117.93, 40.97],
- 鍘﹂棬: [118.1, 24.46],
- 姹曞熬: [115.375279, 22.786211],
- 娼窞: [116.63, 23.68],
- 涓逛笢: [124.37, 40.13],
- 澶粨: [121.1, 31.45],
- 鏇查潠: [103.79, 25.51],
- 鐑熷彴: [121.39, 37.52],
- 绂忓窞: [119.3, 26.08],
- 鐡︽埧搴�: [121.979603, 39.627114],
- 鍗冲ⅷ: [120.45, 36.38],
- 鎶氶『: [123.97, 41.97],
- 鐜夋邯: [102.52, 24.35],
- 寮犲鍙�: [114.87, 40.82],
- 闃虫硥: [113.57, 37.85],
- 鑾卞窞: [119.942327, 37.177017],
- 婀栧窞: [120.1, 30.86],
- 姹曞ご: [116.69, 23.39],
- 鏄嗗北: [120.95, 31.39],
- 瀹佹尝: [121.56, 29.86],
- 婀涙睙: [110.359377, 21.270708],
- 鎻槼: [116.35, 23.55],
- 鑽ｆ垚: [122.41, 37.16],
- 杩炰簯娓�: [119.16, 34.59],
- 钁姦宀�: [120.836932, 40.711052],
- 甯哥啛: [120.74, 31.64],
- 涓滆帪: [113.75, 23.04],
- 娌虫簮: [114.68, 23.73],
- 娣畨: [119.15, 33.5],
- 娉板窞: [119.9, 32.49],
- 鍗楀畞: [108.33, 22.84],
- 钀ュ彛: [122.18, 40.65],
- 鎯犲窞: [114.4, 23.09],
- 姹熼槾: [120.26, 31.91],
- 钃幈: [120.75, 37.8],
- 闊跺叧: [113.62, 24.84],
- 鍢夊唱鍏�: [98.289152, 39.77313],
- 骞垮窞: [113.23, 23.16],
- 寤跺畨: [109.47, 36.6],
- 澶師: [112.53, 37.87],
- 娓呰繙: [113.01, 23.7],
- 涓北: [113.38, 22.52],
- 鏄嗘槑: [102.73, 25.04],
- 瀵垮厜: [118.73, 36.86],
- 鐩橀敠: [122.070714, 41.119997],
- 闀挎不: [113.08, 36.18],
- 娣卞湷: [114.07, 22.62],
- 鐝犳捣: [113.52, 22.3],
- 瀹胯縼: [118.3, 33.96],
- 鍜搁槼: [108.72, 34.36],
- 閾滃窛: [109.11, 35.09],
- 骞冲害: [119.97, 36.77],
- 浣涘北: [113.11, 23.05],
- 娴峰彛: [110.35, 20.02],
- 姹熼棬: [113.06, 22.61],
- 绔犱笜: [117.53, 36.72],
- 鑲囧簡: [112.44, 23.05],
- 澶ц繛: [121.62, 38.92],
- 涓存本: [111.5, 36.08],
- 鍚存睙: [120.63, 31.16],
- 鐭冲槾灞�: [106.39, 39.04],
- 娌堥槼: [123.38, 41.8],
- 鑻忓窞: [120.62, 31.32],
- 鑼傚悕: [110.88, 21.68],
- 鍢夊叴: [120.76, 30.77],
- 闀挎槬: [125.35, 43.88],
- 鑳跺窞: [120.03336, 36.264622],
- 閾跺窛: [106.27, 38.47],
- 寮犲娓�: [120.555821, 31.875428],
- 涓夐棬宄�: [111.19, 34.76],
- 閿﹀窞: [121.15, 41.13],
- 鍗楁槍: [115.89, 28.68],
- 鏌冲窞: [109.4, 24.33],
- 涓変簹: [109.511909, 18.252847],
- 鑷础: [104.778442, 29.33903],
- 鍚夋灄: [126.57, 43.87],
- 闃虫睙: [111.95, 21.85],
- 娉稿窞: [105.39, 28.91],
- 瑗垮畞: [101.74, 36.56],
- 瀹滃: [104.56, 29.77],
- 鍛煎拰娴╃壒: [111.65, 40.82],
- 鎴愰兘: [104.06, 30.67],
- 澶у悓: [113.3, 40.12],
- 闀囨睙: [119.44, 32.2],
- 妗傛灄: [110.28, 25.29],
- 寮犲鐣�: [110.479191, 29.117096],
- 瀹滃叴: [119.82, 31.36],
- 鍖楁捣: [109.12, 21.49],
- 瑗垮畨: [108.95, 34.27],
- 閲戝潧: [119.56, 31.74],
- 涓滆惀: [118.49, 37.46],
- 鐗′腹姹�: [129.58, 44.6],
- 閬典箟: [106.9, 27.7],
- 缁嶅叴: [120.58, 30.01],
- 鎵窞: [119.42, 32.39],
- 甯稿窞: [119.95, 31.79],
- 娼嶅潑: [119.1, 36.62],
- 閲嶅簡: [106.54, 29.59],
- 鍙板窞: [121.420757, 28.656386],
- 鍗椾含: [118.78, 32.04],
- 婊ㄥ窞: [118.03, 37.36],
- 璐甸槼: [106.71, 26.57],
- 鏃犻敗: [120.29, 31.59],
- 鏈邯: [123.73, 41.3],
- 鍏嬫媺鐜涗緷: [84.77, 45.59],
- 娓崡: [109.5, 34.52],
- 椹瀺灞�: [118.48, 31.56],
- 瀹濋浮: [107.15, 34.38],
- 鐒︿綔: [113.21, 35.24],
- 鍙ュ: [119.16, 31.95],
- 鍖椾含: [116.46, 39.92],
- 寰愬窞: [117.2, 34.26],
- 琛℃按: [115.72, 37.72],
- 鍖呭ご: [110, 40.58],
- 缁甸槼: [104.73, 31.48],
- 涔岄瞾鏈ㄩ綈: [87.68, 43.77],
- 鏋ｅ簞: [117.57, 34.86],
- 鏉窞: [120.19, 30.26],
- 娣勫崥: [118.05, 36.78],
- 闉嶅北: [122.85, 41.12],
- 婧ч槼: [119.48, 31.43],
- 搴撳皵鍕�: [86.06, 41.68],
- 瀹夐槼: [114.35, 36.1],
- 寮�灏�: [114.35, 34.79],
- 娴庡崡: [117, 36.65],
- 寰烽槼: [104.37, 31.13],
- 娓╁窞: [120.65, 28.01],
- 涔濇睙: [115.97, 29.71],
- 閭兏: [114.47, 36.6],
- 涓村畨: [119.72, 30.23],
- 鍏板窞: [103.73, 36.03],
- 娌у窞: [116.83, 38.33],
- 涓存矀: [118.35, 35.05],
- 鍗楀厖: [106.110698, 30.837793],
- 澶╂触: [117.2, 39.13],
- 瀵岄槼: [119.95, 30.07],
- 娉板畨: [117.13, 36.18],
- 璇告毃: [120.23, 29.71],
- 閮戝窞: [113.65, 34.76],
- 鍝堝皵婊�: [126.63, 45.75],
- 鑱婂煄: [115.97, 36.45],
- 鑺滄箹: [118.38, 31.33],
- 鍞愬北: [118.02, 39.63],
- 骞抽《灞�: [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],
- 姝︽眽: [114.31, 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 = {
- title: {
- // text: '鍏ㄥ浗涓昏鍩庡競绌烘皵璐ㄩ噺 - 鐧惧害鍦板浘',
- // subtext: 'data from PM25.in',
- // sublink: 'http://www.pm25.in',
- left: 'center'
- },
- // legend: {
- // icon: 'image://https://img2.baidu.com/it/u=2771395776,2060749722&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710694800&t=c85f997454c2a2b3f2e7919ba9c194a3'
- // },
- // color:['#000'],
- tooltip: {
- trigger: 'item'
- },
- bmap: {
- // center: [104.114129, 37.550339],
- zoom: 4, // 杩欓噷鍙互鏍规嵁闇�瑕佽皟鏁寸缉鏀剧骇鍒�
- roam: true,
- mapStyle: {
- styleJson: [{
- featureType: 'water',
- elementType: 'all',
- stylers: {
- color: '#d1d1d1'
- }
- },
- {
- featureType: 'land',
- elementType: 'all',
- stylers: {
- color: '#f3f3f3'
- }
- },
- {
- featureType: 'railway',
- elementType: 'all',
- stylers: {
- visibility: 'off'
- }
- },
- {
- featureType: 'highway',
- elementType: 'all',
- stylers: {
- color: '#fdfdfd'
- }
- },
- {
- featureType: 'highway',
- elementType: 'labels',
- stylers: {
- visibility: 'off'
- }
- },
- {
- featureType: 'arterial',
- elementType: 'geometry',
- stylers: {
- color: '#fefefe'
- }
- },
- {
- featureType: 'arterial',
- elementType: 'geometry.fill',
- stylers: {
- color: '#fefefe'
- }
- },
- {
- 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: '#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: [{
- name: 'pm2.5',
- type: 'scatter',
- coordinateSystem: 'bmap',
- data: convertData(data),
- symbolSize: function(val) {
- return val[2] / 10;
- },
- encode: {
- value: 2
- },
- label: {
- formatter: '{b}',
- position: 'right',
- show: false
- },
- emphasis: {
- label: {
- show: true
- }
- }
- },
- {
- name: 'Top 5',
- 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: 'right',
- show: true
- },
- itemStyle: {
- shadowBlur: 10,
- shadowColor: '#333'
- },
- emphasis: {
- scale: true
- },
- zlevel: 1
- }
- ]
- };
+ this.getDataList();
+ this.getHaveDataDynasty();
+ },
+ methods: {
+ getHaveDataDynasty() {
+ getDynastyData().then((res) => {
+ console.log(res, "getHaveDataDynasty");
+ });
+ },
+ getDynastyList() {
+ getDynasty().then((res) => {
+ this.dynasty1 = res.list;
+ console.log("dynasty1", res.list);
+ });
+ },
+ showCard(info) {
+ const item = this.markerList.find((f) => f.id == info.id);
+ this.openData = item;
+ var latlng = L.latLng(item.yCoord, item.xCoord);
+ this.map.setView(latlng, 12);
+ },
+ getDataList() {
+ this.SearchArr = [];
+ this.loading = true;
+ this.mapLoading = true;
+ // 杩欓噷鏀规垚浜嗗垎椤电殑鎺ュ彛锛岄渶瑕佽皟鐢ㄥ娆″彇鍑烘墍鏈夋暟鎹�
+ let times = 0;
+ getPreCount({
+ keyword: this.keyword,
+ dynasty: this.dynasty1Color
+ }).then(async (res) => {
+ const totalCount = res.object;
+ if (totalCount % 200 == 0) {
+ times = totalCount / 200 - 1;
+ } else {
+ times = Math.floor(totalCount / 200);
+ }
+ console.log(times, "times");
+ if (times == 0 || times < 0) times = 1;
+ let markerList = [];
+ for (let i = 1; i <= times; i++) {
+ const curData = await this.getDataPageInfo(i);
+ if (curData) {
+ markerList = [...markerList, ...curData];
+ }
+ if (i == 1) {
+ this.mapLoading = false;
+ this.markerList = markerList;
+ this.initMap();
+ } else {
+ this.handleMapIcon(this.markerList);
+ }
+ if (i == times) {
+ 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: "-",
+ nativPlace: item?.NATIVE_PLACE[0].content1,
+ id: item.id
+ }));
+ this.loading = false;
+ this.markerList = markerList;
+ this.handleMapIcon(this.markerList);
+ }
+ }
+ });
+ },
- // 璁剧疆鐐瑰嚮浜嬩欢鐩戝惉
- myChart.on('click', (params) => {
- console.log(params.event.offsetX, params.event.offsetY);
- if (params.componentType === 'series') {
+ async getDataPageInfo(count) {
+ const res = await getRetrieval({
+ keyword: this.keyword,
+ dynasty: this.dynasty1Color,
+ page: count,
+ pageSize: 200
+ });
+ if (res.object) {
+ 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) {
+ const currentDynasty = this.dynasty1.find(
+ (f) => f.id == item.PERIOD[0].content1
+ );
+ if (currentDynasty) {
+ item.dynastyInfo = currentDynasty;
+ }
+ markerList.push({ ...citem, ...item });
+ }
+ });
+ }
+ }
- var dataName = params.data.name; // 鑾峰彇鐐瑰嚮鐨勬暟鎹悕绉�
- var dataValue = params.data.value; // 鑾峰彇鐐瑰嚮鐨勬暟鎹��
- // 鍦ㄨ繖閲屽彲浠ユ牴鎹渶瑕佸鐞嗙偣鍑讳簨浠讹紝姣斿寮瑰嚭瀵瑰簲鏁版嵁鐨勮缁嗕俊鎭瓑鎿嶄綔
- console.log('鐐瑰嚮浜�', dataName, '鏁版嵁锛屾暟鍊间负', dataValue);
- // 杩欓噷鍙互缂栧啓瑙﹀彂鏃堕棿鑾峰彇瀵瑰簲鏁版嵁淇℃伅鐨勯�昏緫
- this.spaceTimeArr(params)
- }
- })
+ return markerList;
+ } else {
+ return [];
+ }
+ },
+ onMapMoveEnd() {
+ console.log("鍦板浘鎷栧姩浜�");
+ if (this.openData) {
+ this.handleMapIcon(this.markerList);
+ } else {
+ this.isEchTrue = false;
+ }
+ },
+ //鍒濆鍖栧湴鍥�
+ initMap() {
+ this.isEchTrue = false;
+ if (this.map) {
+ this.map.remove();
+ }
+ var map = L.map("map", {
+ preferCanvas: true,
+ attributionControl: false
+ }).setView([34.3227, 108.5525], this.zoomLevel);
+ map.on("moveend", this.onMapMoveEnd);
+ map.on("zoomend", () => {
+ var zoomLevel = map.getZoom(); // 鑾峰彇褰撳墠鍦板浘鐨勭缉鏀剧骇鍒�
+ console.log("褰撳墠鍦板浘缂╂斁绾у埆涓�:", zoomLevel);
+ this.zoomLevel = zoomLevel;
+ this.isEchTrue = false;
+ this.handleMapIcon(this.markerList);
+ });
+ L.tileLayer
+ .chinaProvider("TianDiTu.Normal.Map", {
+ key: "76bc34ead7e30e663a4eded8aeaf5860",
+ maxZoom: 18,
+ minZoom: 3
+ })
+ .addTo(map);
+ L.tileLayer
+ .chinaProvider("TianDiTu.Normal.Annotion", {
+ key: "76bc34ead7e30e663a4eded8aeaf5860",
+ maxZoom: 18,
+ minZoom: 3
+ })
+ .addTo(map);
+ this.map = map;
+ this.handleMapIcon(this.markerList);
+ },
- option && myChart.setOption(option);
+ handleMapIcon(data) {
+ if (this.oldMarkList.length) {
+ for (let j = 0; j < this.oldMarkList.length; j++) {
+ const oldMark = this.oldMarkList[j];
+ oldMark.remove();
+ }
+ this.oldMarkList = [];
+ }
+ // 鎸夊眰绾у鐞嗘暟鎹悎骞跺拰icon鐨勬覆鏌�
+ // 鑾峰彇澶╁湴鍥炬瘮渚嬪昂(鍦板浘1cm:瀹為檯cm)
+ const scale = {
+ 1: 295829355.45456564,
+ 2: 147914677.72728282,
+ 3: 73957338.863641411,
+ 4: 36978669.431820706,
+ 5: 18489334.715910353,
+ 6: 9244667.3579551764,
+ 7: 4622333.6789775882,
+ 8: 2311166.8394887941,
+ 9: 1155583.419744397,
+ 10: 577791.70987219852,
+ 11: 288895.85493609926,
+ 12: 144447.92746804963,
+ 13: 72223.963734024815,
+ 14: 36111.981867012408,
+ 15: 18055.990933506204,
+ 16: 9027.9954667531019,
+ 17: 4513.997733376551,
+ 18: 2256.9988666882755,
+ 19: 1128.4994333441377,
+ 20: 564.24971667206887
+ };
+ // 鏍规嵁姣斾緥灏鸿绠楀綋鍓嶅湴鍥�1鍘樼背鐨勭粡绾害宸��
+ const cmData = scale[this.zoomLevel] / 100; // 灏嗗帢绫宠浆鎹负绫�
+ const longitudeToM = 92064.1; // 1缁忓害瀵瑰簲绫�
+ const latitudeToM = 111195.1; // 1绾害瀵瑰簲绫�
+ const longitudeRange = cmData / longitudeToM; // 鍦板浘1cm鐨勭粡搴﹀樊
+ const latitudeRange = cmData / latitudeToM; // 鍦板浘1cm鐨勭含搴﹀樊
+ console.log("longitudeRange", longitudeRange);
+ console.log("latitudeRange", latitudeRange);
+ // 鏍规嵁缁忕含搴﹀樊鍊煎皢鍦板浘涓�鍘樼背鍐呮墍鏈夌偣鍚堝苟骞惰褰曟暟閲�
+ const aggregatedData = [];
+ for (let i = 0; i < data.length; i++) {
+ const item = data[i];
+ // 鍒ゆ柇褰撳墠鐐规槸鍚﹀瓨鍦ㄥ湪1cm鍐呯殑鐩稿叧鏁版嵁
+ const mateData = aggregatedData.find(
+ (aItem) =>
+ Math.abs(aItem.mainX - item.xCoord) < longitudeRange &&
+ Math.abs(aItem.mainY - item.yCoord) < latitudeRange
+ );
+ if (!mateData) {
+ // 鏃犲尮閰嶆暟鎹椂锛屽皢褰撳墠鐐瑰潗鏍囪涓轰腑蹇冪偣鍧愭爣锛岃櫣鍚稿悎骞跺懆鍥�1cm鍐呯殑鐐�
+ const obj = {
+ mainX: item.xCoord,
+ mainY: item.yCoord,
+ contentX: "",
+ contentY: "",
+ xList: [],
+ yList: [],
+ data: []
+ };
+ obj.xList.push(item.xCoord);
+ obj.yList.push(item.yCoord);
+ obj.data.push(item);
+ aggregatedData.push(obj);
+ } else {
+ // 鏈夊尮閰嶆暟鎹椂锛屽皢褰撳墠鐐硅繘琛屽悎骞�
+ mateData.xList.push(item.xCoord);
+ mateData.yList.push(item.yCoord);
+ mateData.data.push(item);
+ }
+ }
+ // 鏍规嵁鑱氬悎缁忓害鍜岀含搴﹀垪琛ㄧ殑鏈�澶ф渶灏忓�硷紝鍙栦腑蹇冪偣鍧愭爣
+ for (let j = 0; j < aggregatedData.length; j++) {
+ const aggregatedItem = aggregatedData[j];
+ const maxX = Math.max(...aggregatedItem.xList);
+ const minX = Math.min(...aggregatedItem.xList);
+ const maxY = Math.max(...aggregatedItem.yList);
+ const minY = Math.min(...aggregatedItem.yList);
+ aggregatedItem.contentX = (maxX - minX) / 2 + minX;
+ aggregatedItem.contentY = (maxY - minY) / 2 + minY;
- })
- },
- // 鏃剁┖鍦板浘鐐瑰嚮鏃惰幏鍙栫殑鏁版嵁
- spaceTimeArr(Arr) {
- // 淇敼 Vue 缁勪欢鐨勬暟鎹紝渚嬪鏄剧ず鑿滃崟瀵艰埅
- // 鏃剁┖鍦板浘鐨勬暟鎹�
- console.log(Arr);
+ // 娣诲姞鏍囪
+ let icon = L.divIcon({
+ html: `<div class='ripple' style='box-shadow: 0 0 20px ${
+ aggregatedItem.data.length > 30 ? 30 : aggregatedItem.data.length
+ }px #cc2edf78;'>${
+ aggregatedItem.data.length < 100
+ ? aggregatedItem.data.length
+ : "99+"
+ }</div>`,
+ iconSize: [30, 30],
+ className: "map-circle"
+ });
+ const temp_mark = L.marker(
+ [aggregatedItem.contentY, aggregatedItem.contentX],
+ {
+ icon: icon
+ }
+ );
+ this.oldMarkList.push(temp_mark);
+ temp_mark.addTo(this.map);
+ temp_mark.on("click", (e) => {
+ setTimeout(() => {
+ this.isEchTrue = true;
+ this.currentMark = aggregatedItem.data.map((item) => {
+ return {
+ name: item?.NAME[0]?.content1,
+ nikeName: item?.ALIAS[0]?.content2,
+ nativePlace: item?.content1,
+ barnch: item?.MEDICAL_BRANCH[0]?.content1,
+ medical: item?.BIOGRAPHY,
+ id: item.id
+ };
+ });
+ this.isTop = e.containerPoint.y - 435 + "px";
+ this.isLeft = e.containerPoint.x - 180 + "px";
+ }, 300);
+ });
+ }
+ console.log("aggregatedData", aggregatedData);
+ this.aggregatedData = aggregatedData;
+ if (this.openData) {
+ setTimeout(() => {
+ if (this.openData) {
+ let aggregated = null;
+ for (let i = 0; i < this.aggregatedData.length; i++) {
+ const aggregatedItem = this.aggregatedData[i];
+ const d = aggregatedItem.data.find(
+ (f) => f.id == this.openData.id
+ );
+ if (d) {
+ aggregated = aggregatedItem;
+ }
+ }
+ this.currentMark = aggregated.data.map((item) => {
+ return {
+ name: item?.NAME[0]?.content1,
+ nikeName: item?.ALIAS[0]?.content2,
+ nativePlace: item?.content1,
+ barnch: item?.MEDICAL_BRANCH[0]?.content1,
+ medical: item?.BIOGRAPHY,
+ id: item.id
+ };
+ });
+ this.isEchTrue = true;
+ this.$nextTick(() => {
+ this.isTop =
+ document.getElementById("mapBox").offsetHeight / 2 - 435 + "px";
+ this.isLeft =
+ document.getElementById("mapBox").offsetWidth / 2 - 180 + "px";
+ });
+ }
- this.isEchTrue = true
- this.$nextTick(() => {
- this.isTop = (Arr.event.offsetY ) - .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));
- })
+ this.openData = null;
+ }, 300);
+ }
+ },
- },
- // 鏌ョ湅鏇村>>
- viewMoreClick() {
- uni.navigateTo({
- url: '/pages/repository/repository'
- })
- },
- }
- }
+ // 鐐瑰嚮涓嬮潰鐨勬湞浠ｆ寜閽�
+ dynastyBottomClick(id) {
+ this.dynasty1Color = id;
+ this.getDataList();
+ },
+ onSearch(val) {
+ this.isSearch = true;
+ this.keyword = val.text;
+ this.map.invalidateSize();
+
+ this.getDataList();
+ },
+ // 鐐瑰嚮涓婇潰鐨勬湞浠ｆ寜閽�
+ SchoolClick(id) {},
+ // 鏌ョ湅鏇村>>
+ viewMoreClick(data) {
+ uni.navigateTo({
+ url: "/pages/character/detail?id=" + data.id
+ });
+ }
+ }
+};
</script>
<style>
- * {
- box-sizing: border-box;
- }
+.pageBox {
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+}
- .echartsTrue::before {
- content: "";
- width: 0;
- height: 0;
- position: absolute;
- bottom: -.18rem;
- left: 1.2rem;
- /* background-color: red; */
- border-left: .2rem solid transparent;
- /* 宸﹁竟閫忔槑 */
- border-right: .2rem solid transparent;
- /* 鍙宠竟閫忔槑 */
- border-top: .2rem solid #fff;
- /* 椤堕儴绾㈣壊 */
- }
+.markerDataListBox {
+ width: 360px !important;
+ height: 400px;
+}
- ::v-deep .el-card__header {
- border: 0;
- background-color: #DDE8F6;
- height: .36rem;
- padding: .08rem .13rem;
- font-size: .14rem;
- font-weight: 600;
- }
+.markerDataListBox::before {
+ content: "";
+ width: 0;
+ height: 0;
+ position: absolute;
+ bottom: -18px;
+ left: 160px;
+ /* background-color: red; */
+ border-left: 20px solid transparent;
+ /* 宸﹁竟閫忔槑 */
+ border-right: 20px solid transparent;
+ /* 鍙宠竟閫忔槑 */
+ border-top: 20px solid #fff;
+ /* 椤堕儴绾㈣壊 */
+ z-index: 999;
+}
- .information li {
- font-size: .12rem;
- color: #2C2C2C;
- line-height: 2;
- }
+.markerDataList {
+ width: 100%;
+ height: 100%;
+ background: #fff;
+ border-radius: 8px;
+ overflow: hidden;
+ box-shadow: 0 0 10px 0 #000;
+}
- /* 鍦板浘涓婄殑宸︿笅瑙� */
- ::v-deep .anchorBL {
- display: none;
- }
+.markerDataList ::v-deep .el-collapse-item {
+ border-left: 1px solid #ebeef5;
+ border-right: 1px solid #ebeef5;
+}
- @media screen and (min-width:2560px)and (max-width:3840px) {
- .Search {
- /* width: 30%; */
- justify-content: flex-end;
- margin-right: .26rem;
- width: 4rem;
- }
+::v-deep .el-collapse-item__header.is-active {
+ border-bottom-color: #ebeef5;
+}
- .Search ::v-deep .ffff {
- width: 3rem;
- height: .36rem;
- padding: .01rem;
- border-radius: .3rem !important;
- }
+::v-deep .el-collapse-item__header {
+ padding-left: 10px;
+ font-size: 16px;
+}
- .Search ::v-deep .widget_button {
- width: 1rem;
- /* height: .3rem; */
- font-size: .14rem;
- padding: 0;
- border-radius: .3rem !important;
- }
+.markerDataContentBox {
+ width: 100%;
+ height: 100%;
+ overflow: auto !important;
+ padding: 6px;
+ box-sizing: border-box;
+}
- .Search ::v-deep .widget_style {
- display: flex;
- justify-content: flex-end;
- }
+.titleImg {
+ display: inline-block;
+ width: 24px;
+ height: 24px;
+ border-radius: 50%;
+ background-color: #4c48fb;
+ color: #fff;
+ margin-right: 10px;
+ text-align: center;
+ line-height: 24px;
+}
- .Search ::v-deep .uni-input-placeholder {
- font-size: .13rem;
- /* height: 100%; */
- line-height: 1;
- }
+::v-deep .el-card__header {
+ border: 0;
+ background-color: #dde8f6;
+ height: 0.36rem;
+ padding: 0.08rem 0.13rem;
+ font-size: 0.14rem;
+ font-weight: 600;
+}
- .Search ::v-deep .uni-input-input {
- margin-left: .19rem;
- }
- }
+::v-deep .el-collapse-item__content {
+ padding-bottom: 10px;
+}
- #main {
- height: 6.2rem;
- }
+.markerDataContentBox .information {
+ padding: 20px;
+}
- .Search {
- /* width: 30%; */
- justify-content: flex-end;
- margin-right: .26rem;
- width: 4rem;
- }
+.information li {
+ font-size: 0.12rem;
+ color: #2c2c2c;
+ line-height: 2;
+}
- .Search ::v-deep .ffff {
- width: 3rem;
- height: .36rem;
- padding: .01rem;
- }
+/* 鍦板浘涓婄殑宸︿笅瑙� */
+::v-deep .anchorBL {
+ display: none;
+}
- .Search ::v-deep .widget_button {
- width: 1rem;
- /* height: .3rem; */
- font-size: .14rem;
- padding: 0;
- background-color: #597AA5;
- }
+@media screen and (min-width: 2560px) and (max-width: 3840px) {
+ .Search {
+ /* width: 30%; */
+ justify-content: flex-end;
+ margin-right: 0.26rem;
+ width: 4rem;
+ }
- .Search ::v-deep .widget_style {
- display: flex;
- justify-content: flex-end;
- }
+ .Search ::v-deep .ffff {
+ width: 3rem;
+ height: 0.36rem;
+ padding: 0.01rem;
+ border-radius: 0.3rem !important;
+ }
- .Search ::v-deep .uni-input-placeholder {
- font-size: .13rem;
- /* height: 100%; */
- line-height: 1;
- margin-left: .19rem;
- }
-</style>
\ No newline at end of file
+ .Search ::v-deep .widget_button {
+ width: 1rem;
+ /* height: .3rem; */
+ font-size: 0.14rem;
+ padding: 0;
+ border-radius: 0.3rem !important;
+ }
+
+ .Search ::v-deep .widget_style {
+ display: flex;
+ justify-content: flex-end;
+ }
+
+ .Search ::v-deep .uni-input-placeholder {
+ font-size: 0.13rem;
+ /* height: 100%; */
+ line-height: 1;
+ }
+
+ .Search ::v-deep .uni-input-input {
+ margin-left: 0.19rem;
+ }
+}
+
+#main {
+ flex: 1;
+}
+
+.Search {
+ /* width: 30%; */
+ justify-content: flex-end;
+ margin-right: 0.26rem;
+ width: 4rem;
+}
+
+.Search ::v-deep .ffff {
+ width: 3rem;
+ height: 0.36rem;
+ padding: 0.01rem;
+}
+
+.Search ::v-deep .widget_button {
+ width: 1rem;
+ /* height: .3rem; */
+ font-size: 0.14rem;
+ padding: 0;
+ background-color: #597aa5;
+}
+
+.Search ::v-deep .widget_style {
+ display: flex;
+ justify-content: flex-end;
+}
+
+.Search ::v-deep .uni-input-placeholder {
+ font-size: 0.13rem;
+ /* height: 100%; */
+ line-height: 1;
+ margin-left: 0.19rem;
+}
+
+.mapBox {
+ height: 100%;
+ width: 100%;
+ margin: 0 auto;
+ position: relative;
+}
+#map {
+ height: 100%;
+ width: 100%;
+ margin: 0 auto;
+ font-size: 14px !important;
+ z-index: 10 !important;
+}
+
+::v-deep .ripple {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ background: #4c48fb;
+ color: #fff;
+ text-align: center;
+ line-height: 30px;
+}
+
+/* @keyframes ripple-animation {
+ to {
+ transform: translate(-50%, -50%) scale(0);
+ opacity: 0;
+ }
+} */
+
+::v-deep .cleanupBtn {
+ right: 60px !important;
+}
+
+::v-deep .widget_input {
+ min-width: 240px !important;
+}
+
+.medicalLi {
+ height: 50px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+}
+</style>
--
Gitblit v1.9.1