From 6ae0fcef149ddbe614746023a58a3885b3ac4bde Mon Sep 17 00:00:00 2001
From: zxl <763096477@qq.com>
Date: 星期二, 25 三月 2025 11:31:04 +0800
Subject: [PATCH] Merge branch 'dev'
---
src/views/components/Map/index.vue | 298 ++++++++++++++++++++++++++++++++++-------------------------
1 files changed, 171 insertions(+), 127 deletions(-)
diff --git a/src/views/components/Map/index.vue b/src/views/components/Map/index.vue
index 8a2312c..f59eef7 100644
--- a/src/views/components/Map/index.vue
+++ b/src/views/components/Map/index.vue
@@ -1,47 +1,46 @@
<template>
- <div>
- <div :id="id" ref="contentRef" class="w-full h-full">
+ <div :id="id" ref="contentRef" style="height: 100%; width: 100%">
+ <div
+ v-if="isShowControl"
+ :class="controlPosition"
+ class="control-container bottom-right"
+ >
<div
- v-if="isShowControl"
- :class="controlPosition"
- class="control-container bottom-right"
+ v-for="item in controlMapping"
+ :key="item.id"
+ class="control-content"
>
- <div
- v-for="item in controlMapping"
- :key="item.id"
- class="control-content"
- >
- <template v-if="item.children">
- <div
- v-for="child in item.children"
- :key="child.id"
- class="control-item"
- @click="child.event"
- >
- <img :src="child.img" />
- </div>
- </template>
- <template v-else>
- <div class="control-item" @click="item.event">
- <img :src="item.img" />
- </div>
- </template>
- </div>
+ <template v-if="item.children">
+ <div
+ v-for="child in item.children"
+ :key="child.id"
+ class="control-item"
+ @click="child.event"
+ >
+ <img :src="child.img" />
+ </div>
+ </template>
+ <template v-else>
+ <div class="control-item" @click="item.event">
+ <img :src="item.img" />
+ </div>
+ </template>
</div>
</div>
</div>
</template>
-<script setup>
+<script>
import Location from "@/assets/images/location.png";
import FileImg from "@/assets/images/file1.png";
import MinusImg from "@/assets/images/minus.png";
import PlusImg from "@/assets/images/plus.png";
import FullScreenImg from "@/assets/images/fullScreen.png";
import PositionImg from "@/assets/images/position.png";
+var infoWin;
export default {
data() {
return {
- zoom: 15,
+ zoom: 11,
map: null,
contentRef: {},
infoWin: {},
@@ -131,9 +130,10 @@
initTianMap() {
var T = window.T;
setTimeout(async () => {
- this.map = new T.Map(this.id, {
- projection: "EPSG:4326",
- });
+ // this.map = new T.Map(this.id, {
+ // projection: "EPSG:4326",
+ // });
+ this.map = new T.Map(this.id);
this.map.centerAndZoom(
new T.LngLat(this.defaultMaskInfo.lon, this.defaultMaskInfo.lat),
this.zoom
@@ -144,7 +144,7 @@
//form琛ㄥ崟涓槸鍚︽湁鍧愭爣锛屾湁鍒欏畾浣嶅埌瀵瑰簲浣嶇疆锛屾病鏈夊垯浣跨敤榛樿鐨�
// 104.65417 28.75572 娴嬭瘯鏁版嵁
// 鍥涘窛鐪佸疁瀹惧競缈犲睆鍖哄ぇ瑙傛ゼ琛楅亾澶栧崡琛�71
- if (this.$props.mapList[0].addr) {
+ if (this.$props.mapList.length>0&&this.$props.mapList[0].addr) {
const { lng: lon, lat } = await this.getGeocode(
this.$props.mapList[0].addr
);
@@ -157,7 +157,7 @@
} else {
this.$props.mapList.length && this.makeAllMask(this.$props.mapList);
}
- }, 0);
+ }, 1500);
},
zoomIn() {
@@ -173,33 +173,32 @@
},
getCurrentPosition() {
- if (navigator.geolocation) {
- ElMessage.warning("璇ュ姛鑳芥殏鏈紑鍙�");
- // TODO 鍦板浘瀹氫綅
- // navigator.geolocation.getCurrentPosition(function (position) {
- // var latitude = position.coords.latitude
- // var longitude = position.coords.longitude
- //
- // moveTo(String(longitude), String(latitude))
- // })
- } else {
- ElMessage.warning("褰撳墠娴忚鍣ㄤ笉鏀寔瀹氫綅鍔熻兘");
- }
+ // if (navigator.geolocation) {
+ // ElMessage.warning("璇ュ姛鑳芥殏鏈紑鍙�");
+ // // TODO 鍦板浘瀹氫綅
+ // // navigator.geolocation.getCurrentPosition(function (position) {
+ // // var latitude = position.coords.latitude
+ // // var longitude = position.coords.longitude
+ // //
+ // // moveTo(String(longitude), String(latitude))
+ // // })
+ // } else {
+ // ElMessage.warning("褰撳墠娴忚鍣ㄤ笉鏀寔瀹氫綅鍔熻兘");
+ // }
},
moveTo(lon, lat) {
this.map && this.map.panTo(new T.LngLat(lon, lat));
},
-
// 榛樿鐨勭偣鏍囪
makeDefaultMask(mapInfo) {
- const { name, lon, lat } = mapInfo
+ const { name, lon, lat } = mapInfo;
const option = {
text: name,
offset: [-35, -45],
labelBg: "#3369FF",
labelColor: "#fff",
- labelClick,
+ labelClick: this.labelClick,
};
// 娓呴櫎涔嬪墠鐨勬爣璁�
this.map && this.map.clearOverLays();
@@ -214,12 +213,15 @@
const { lat, lng: lon } = e.lnglat;
this.makeDefaultMask({
- ...defaultMaskInfo,
+ ...this.defaultMaskInfo,
lon: String(lon),
lat: String(lat),
});
this.getReverseGeocode(e).then((addr) => {
- this.$emit("mapClick", { e, addr });
+ this.$emit("mapClick", {
+ e,
+ addr,
+ });
});
console.log("鐐瑰嚮浜嬩欢", e);
},
@@ -259,15 +261,12 @@
${row.projectName ?? "鏆傛棤鏁版嵁"}
</div>
<div class='close-btn close-btn-${random}'>
- 脳
</div>
</div>
<div class="detail-info">
- <span class="truncate-content">鎬绘姇璧勶細${
- row.totalMoney ?? "鏆傛棤鏁版嵁"
- }</span>
+ <span class="truncate-content">鎬绘姇璧勶細${row.totalMoney || ""}</span>
<span class="truncate-content">
- 椤圭洰鐘舵�侊細
+ 椤圭洰鐘舵�侊細${this.showProjectStatusStr(row.projectStatus)}
</span>
<span class="truncate-content">
椤圭洰鍦板潃锛�${row.projectAddr ?? "鏆傛棤鏁版嵁"}
@@ -280,22 +279,39 @@
</div>`;
}
},
-
+ showProjectStatusStr(status) {
+ switch (status) {
+ case "pendding":
+ return "鏈紑宸�";
+ case "working":
+ return "宸插紑宸�";
+ default:
+ return "寮傚父椤圭洰";
+ }
+ },
// 鍞竴鏍囪瘑
getUniqueId() {
return Math.random().toString(36).substr(2) + Date.now();
},
- markerMouseover(_e, infoWin, info, random) {
+ markerMouseover(_e, info, random, markerOptions) {
+ if (infoWin) this.map.removeOverLay(infoWin);
// 鐐逛綅鏍囪绉诲叆鏄剧ず涓嶅悓鍐呭
if (this.$props.isShowControl) {
+ infoWin = new T.InfoWindow();
infoWin.setContent(this.generateContent(info, random));
- const contentWrapper = document.querySelector(
- ".tdt-infowindow-content-wrapper"
- );
- if (contentWrapper) {
- contentWrapper.style.opacity = "1";
- }
+ infoWin.setLngLat(_e.lnglat);
+ // 鍚戝湴鍥句笂娣诲姞淇℃伅绐楀彛
+ // if (this.$props.mapType) {
+ this.map && this.map.addOverLay(infoWin);
+ // }
+
+ // const contentWrapper = document.querySelector(
+ // ".tdt-infowindow-content-wrapper"
+ // );
+ // if (contentWrapper) {
+ // contentWrapper.style.opacity = "1";
+ // }
// 鏌ユ壘鍒伴偅涓猧nfo 鐣岄潰
// const allCloseBtn = document.querySelectorAll(`.close-btn-${random}`);
// allCloseBtn[allCloseBtn.length - 1].onclick = (_e) => {
@@ -304,85 +320,112 @@
}
},
- markerMouseout(_e, infoWin) {
- infoWin.setContent(this.generateContent());
- const contentWrapper = document.querySelector(
- ".tdt-infowindow-content-wrapper"
- );
- if (contentWrapper) {
- contentWrapper.style.opacity = "0";
- }
+ markerMouseout(_e) {
+ // infoWin.setContent(this.generateContent());
+ // const contentWrapper = document.querySelector(
+ // ".tdt-infowindow-content-wrapper"
+ // );
+ // if (contentWrapper) {
+ // contentWrapper.style.opacity = "0";
+ // }
+ // this.map.removeOverLay(infoWin);
},
// 鎵撴爣璁�
makeMask(lon, lat, options) {
- const { markerOptions, labelOptions } = options;
- console.log("options", markerOptions, labelOptions);
- const icon = new T.Icon({
- iconUrl: Location,
- iconSize: new T.Point(19, 27),
- iconAnchor: new T.Point(10, 25),
- });
- var marker = new T.Marker(new T.LngLat(lon, lat), {
- icon,
- id: markerOptions?.id,
- });
- this.map && this.map.addOverLay(marker);
- const label = new T.Label({
- text: labelOptions.text,
- position: new T.LngLat(lon, lat),
- offset: new T.Point(...labelOptions.offset),
- id: labelOptions?.id,
- });
+ if (lon && lat) {
+ const { markerOptions, labelOptions } = options;
- labelOptions.labelBg && label.setBackgroundColor(labelOptions.labelBg);
- labelOptions.labelColor && label.setFontColor(labelOptions.labelColor);
- //鍒涘缓鍦板浘鏂囨湰瀵硅薄
- if (!this.$props.mapType) {
- this.map && this.map.addOverLay(label);
+ const icon = new T.Icon({
+ iconUrl: Location,
+ iconSize: new T.Point(19, 27),
+ iconAnchor: new T.Point(10, 25),
+ });
+
+ var marker = new T.Marker(new T.LngLat(lon, lat), {
+ icon,
+ id: markerOptions?.id,
+ });
+
+ this.map && this.map.addOverLay(marker);
+ const label = new T.Label({
+ text: labelOptions.text,
+ position: new T.LngLat(lon, lat),
+ offset: new T.Point(...labelOptions.offset),
+ id: labelOptions?.id,
+ });
+
+ labelOptions.labelBg && label.setBackgroundColor(labelOptions.labelBg);
+ labelOptions.labelColor && label.setFontColor(labelOptions.labelColor);
+ //鍒涘缓鍦板浘鏂囨湰瀵硅薄
+ if (!this.$props.mapType) {
+ this.map && this.map.addOverLay(label);
+ }
+ markerOptions?.markerClick &&
+ this.addEvent(marker, "click", (e) =>
+ markerOptions.markerClick(label, e)
+ );
+ labelOptions?.labelClick &&
+ this.addEvent(label, "click", (e) =>
+ labelOptions.labelClick(label, e)
+ );
+
+ this.addEvent(marker, "mouseover", (e) =>
+ this.markerMouseover(e, options, this.getUniqueId(), markerOptions)
+ );
+ this.addEvent(marker, "mouseout", (e) => this.markerMouseout(e));
}
- markerOptions?.markerClick &&
- this.addEvent(marker, "click", (e) => markerOptions.markerClick(label, e));
- labelOptions?.labelClick &&
- this.addEvent(label, "click", (e) => labelOptions.labelClick(label, e));
-
- const lnglat = new T.LngLat(lon, lat);
- const infoWin = new T.InfoWindow(this.generateContent(), {
- id: markerOptions?.id,
- offset: new T.Point(0, -15),
- closeButton: false,
- });
-
- infoWin.setLngLat(lnglat);
- // 鍚戝湴鍥句笂娣诲姞淇℃伅绐楀彛
- if (this.$props.mapType) {
- this.map && this.map.addOverLay(infoWin);
- }
-
- this.addEvent(marker, "mouseover", (e) =>
- markerMouseover(e, infoWin, labelOptions, getUniqueId())
- );
- this.addEvent(marker, "mouseout", (e) => markerMouseout(e, infoWin));
},
// 鏍囪鎵�鏈夌偣
makeAllMask(mapList) {
+ // 娓呴櫎涔嬪墠鐨勬爣璁�
+ this.map && this.map.clearOverLays();
+ var minX = 180;
+ var maxX = -180;
+ var minY = 90;
+ var maxY = -90;
var _this = this;
- this.mapList.map((item) => {
+ mapList.map((item) => {
const config = {
markerOptions: {
id: item.id,
- markerClick: _this.markerClick,
+ // markerClick: _this.markerClick,
},
labelOptions: {
- text: item.name,
+ text: item.projectName,
offset: [-45, -45],
id: item.id,
- markerClick: _this.labelClick,
+ // markerClick: _this.labelClick,
},
+ projectName: item.projectName,
+ totalMoney: item.yearInvestAmount
+ ? item.yearInvestAmount + "鍏�"
+ : "鏆傛棤鏁版嵁",
+ projectAddr: item.projectAddress,
+ projectStatus: item.projectStatus,
};
- _this.makeMask(item.lon, item.lat, config);
+
+ _this.makeMask(item.longitude, item.latitude, config);
+
+ if (item.longitude && item.longitude > maxX) {
+ maxX = item.longitude;
+ }
+ if (item.longitude && item.longitude < minX) {
+ minX = item.longitude;
+ }
+ if (item.latitude && item.latitude > maxY) {
+ maxY = item.latitude;
+ }
+ if (item.latitude && item.latitude < minY) {
+ minY = item.latitude;
+ }
});
+
+ this.moveTo(
+ (parseFloat(maxX) + parseFloat(minX)) / 2,
+ (parseFloat(maxY) + parseFloat(minY)) / 2
+ );
},
// 閫氱敤娣诲姞浜嬩欢鐨勬柟娉�
@@ -401,7 +444,7 @@
//鏍囪鐐瑰嚮浜嬩欢
markerClick(currentLabel, e) {
const id = e.target.options.id;
- currentLabelStyleChange(currentLabel);
+ this.currentLabelStyleChange(currentLabel);
console.log("鐐瑰嚮浜嬩欢", e, currentLabel);
this.getReverseGeocode(e).then((addr) => {
this.$emit(
@@ -415,9 +458,10 @@
// label鐐瑰嚮浜嬩欢
labelClick(currentLabel, e) {
+ console.log("瑙﹀彂鐐瑰嚮浜嬩欢");
const id = e.target.options.id;
- currentLabelStyleChange(currentLabel);
- getReverseGeocode(e).then((addr) => {
+ this.currentLabelStyleChange(currentLabel);
+ this.getReverseGeocode(e).then((addr) => {
this.$emit(
"labelClick",
id
@@ -449,7 +493,7 @@
},
},
},
- beforeUnmount() {
+ beforeDestroy() {
this.map = null;
},
};
@@ -576,10 +620,10 @@
//}
.tdt-infowindow-tip-container {
- opacity: 0;
+ opacity: 1;
}
.tdt-infowindow-content-wrapper {
- opacity: 0;
+ opacity: 1;
}
</style>
--
Gitblit v1.8.0