From 10117425c0a0f660105eb1674de89503533a2465 Mon Sep 17 00:00:00 2001
From: 杨磊 <505174330@qq.com>
Date: 星期四, 16 五月 2024 11:44:29 +0800
Subject: [PATCH] 天地图
---
src/pages/territory/territory.vue | 449 ++++++++++++++++++-------------------------------------
1 files changed, 148 insertions(+), 301 deletions(-)
diff --git a/src/pages/territory/territory.vue b/src/pages/territory/territory.vue
index c09d6d9..8e94f77 100644
--- a/src/pages/territory/territory.vue
+++ b/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, // 绉婚櫎鍙充笅瑙抣eaflet鏍囪瘑
+
+ // zoomControl: false, //绂佺敤 + - 鎸夐挳
+
+ // maxBounds: bounds, //璁剧疆杈圭晫
+
+ // preferCanvas: true, //榛樿浣跨敤svg娓叉煋锛岃缃甤anvas娓叉煋
+
+ // 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 © 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>
--
Gitblit v1.9.1