From 62a079a15b46925283581f6caaf631b5a4558927 Mon Sep 17 00:00:00 2001
From: wlzboy <66905212@qq.com>
Date: 星期三, 24 九月 2025 11:00:10 +0800
Subject: [PATCH] feat: 初始化app
---
ruoyi-ui/src/views/system/gps/mapNeed.vue | 386 ++++++++++++++++++++++++++++++------------------------
1 files changed, 213 insertions(+), 173 deletions(-)
diff --git a/ruoyi-ui/src/views/system/gps/mapNeed.vue b/ruoyi-ui/src/views/system/gps/mapNeed.vue
index 48adcc7..048ebd6 100644
--- a/ruoyi-ui/src/views/system/gps/mapNeed.vue
+++ b/ruoyi-ui/src/views/system/gps/mapNeed.vue
@@ -127,7 +127,7 @@
// 鏌ヨ鍙傛暟
queryParams: {
pageNum: 1,
- pageSize: 10,
+ pageSize: 1000,
deviceId: null,
appId: null,
sign: null,
@@ -175,12 +175,16 @@
},
mounted() {
// 鍔ㄦ�佸姞杞界櫨搴﹀湴鍥続PI
- this.loadBMapScript().then(() => {
- this.initMap();
- window.initMapFlag=true;
- if(window.loadGpsList){
- this.drawTrack()
+ this.initMap().then((success) => {
+ if (success) {
+ window.initMapFlag = true;
+ if (window.loadGpsList) {
+ this.drawTrack();
+ }
}
+ }).catch(error => {
+ console.error("鍦板浘鍒濆鍖栧け璐�", error);
+ this.$message.error("鍦板浘鍔犺浇澶辫触锛岃鍒锋柊椤甸潰閲嶈瘯");
});
},
methods: {
@@ -191,31 +195,28 @@
resolve(window.BMap);
return;
}
+
+ window.initBMap = () => {
+ console.log("鐧惧害鍦板浘API鍔犺浇鎴愬姛");
+ // 纭繚BMap瀵硅薄瀹屽叏鍔犺浇
+ setTimeout(() => {
+ if (window.BMap && window.BMap.Map) {
+ resolve(window.BMap);
+ } else {
+ reject(new Error("鐧惧害鍦板浘API鍔犺浇涓嶅畬鏁�"));
+ }
+ }, 100);
+ };
+
const script = document.createElement("script");
script.type = "text/javascript";
script.src =
"https://api.map.baidu.com/api?v=3.0&ak=n5z5pKfAnaP3fYMR4RJOAQsR1wQ2avAn&callback=initBMap";
- script.onerror = reject;
- document.head.appendChild(script);
- window.initBMap = () => {
- // 鍔犺浇鍧愭爣杞崲搴�
- const convertorScript = document.createElement("script");
- convertorScript.type = "text/javascript";
- convertorScript.src =
- "https://api.map.baidu.com/getscript?v=3.0&ak=n5z5pKfAnaP3fYMR4RJOAQsR1wQ2avAn&services=&t=20230101100000";
- convertorScript.onload = () => {
- // 鍔犺浇鍧愭爣杞崲宸ュ叿
- const toolsScript = document.createElement("script");
- toolsScript.type = "text/javascript";
- toolsScript.src =
- "https://api.map.baidu.com/library/Convertor/1.4/src/Convertor_min.js";
- toolsScript.onload = () => {
- resolve(window.BMap);
- };
- document.head.appendChild(toolsScript);
- };
- document.head.appendChild(convertorScript);
+ script.onerror = (error) => {
+ console.error("鐧惧害鍦板浘API鍔犺浇澶辫触", error);
+ reject(error);
};
+ document.head.appendChild(script);
});
},
/** 鏌ヨGPS鍒楄〃 */
@@ -258,18 +259,55 @@
const seconds = String(time.getSeconds()).padStart(2, '0');
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
},
- async translatePoints(points) {
- // 灏哤GS84鍧愭爣杞崲涓虹櫨搴﹀潗鏍�
- var translatePoints = [];
- return new Promise((resolve, reject) => {
+ /** 鍒濆鍖栧湴鍥� */
+ async initMap() {
+ try {
+ await this.loadBMapScript();
+ // 纭繚DOM鍏冪礌宸茬粡鍑嗗濂�
+ await this.$nextTick();
+ // 纭繚BMap瀵硅薄瀛樺湪
+ if (!window.BMap || !window.BMap.Map) {
+ throw new Error("鐧惧害鍦板浘API鏈纭姞杞�");
+ }
+ // 鍒涘缓鍦板浘瀹炰緥
+ this.map = new BMap.Map("mapContainer");
+ // 璁剧疆鍦板浘涓績鐐瑰拰缂╂斁绾у埆
+ this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
+ // 鍚敤婊氳疆鏀惧ぇ缂╁皬
+ this.map.enableScrollWheelZoom();
+ console.log("鍦板浘鍒濆鍖栨垚鍔�");
+ return true;
+ } catch (error) {
+ console.error("鍦板浘鍒濆鍖栧け璐�", error);
+ this.$message.error("鍦板浘鍔犺浇澶辫触锛岃鍒锋柊椤甸潰閲嶈瘯");
+ return false;
+ }
+ },
+ /** 鍧愭爣杞崲鏂规硶 */
+ translatePoint(point) {
+ return new Promise((resolve) => {
+ // 浣跨敤鐧惧害鍦板浘API鍐呯疆鐨勫潗鏍囪浆鎹�
const convertor = new BMap.Convertor();
- convertor.translate(points, 1, 5, (data) => {
+ const pointArr = [];
+ pointArr.push(point);
+ convertor.translate(pointArr, 1, 5, (data) => {
if (data.status === 0) {
- translatePoints = data.points;
- resolve(translatePoints);
+ resolve(data.points[0]);
+ } else {
+ // 濡傛灉杞崲澶辫触锛岃繑鍥炲師濮嬪潗鏍�
+ resolve(point);
}
});
});
+ },
+ /** 鎵归噺鍧愭爣杞崲 */
+ async translatePoints(points) {
+ const translatePoints = [];
+ for (const point of points) {
+ const translatedPoint = await this.translatePoint(point);
+ translatePoints.push(translatedPoint);
+ }
+ return translatePoints;
},
/** 鎼滅储鎸夐挳鎿嶄綔 */
handleQuery() {
@@ -285,90 +323,117 @@
this.resetForm("queryForm");
this.handleQuery();
},
- /** 鍒濆鍖栧湴鍥� */
- initMap() {
- // 鍒涘缓鍦板浘瀹炰緥
- this.map = new BMap.Map("mapContainer");
- // 璁剧疆鍦板浘涓績鐐瑰拰缂╂斁绾у埆
- this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
- // 鍚敤婊氳疆鏀惧ぇ缂╁皬
- this.map.enableScrollWheelZoom();
- console.log("initMap 鍒濆鍖栧湴鍥�")
+ /** 璁＄畻涓ょ偣涔嬮棿鐨勮窛绂伙紙绫筹級 */
+ getDistance(point1, point2) {
+ return this.map.getDistance(point1, point2);
},
- /** 璁＄畻涓ょ偣涔嬮棿鐨勮窛绂伙紙绫筹級 */
- getDistance(point1, point2) {
- return this.map.getDistance(point1, point2);
- },
- /** 璁＄畻涓ょ偣涔嬮棿鐨勮搴� */
- getAngle(point1, point2) {
- const dx = point2.lng - point1.lng;
- const dy = point2.lat - point1.lat;
- return Math.atan2(dy, dx) * 180 / Math.PI;
- },
-
-
-
+ /** 璁＄畻涓ょ偣涔嬮棿鐨勮搴� */
+ getAngle(point1, point2) {
+ const dx = point2.lng - point1.lng;
+ const dy = point2.lat - point1.lat;
+ return Math.atan2(dy, dx) * 180 / Math.PI;
+ },
/** 缁樺埗杞ㄨ抗 */
async drawTrack() {
- // 娓呴櫎涔嬪墠鐨勮建杩�
- if (this.polyline) {
- this.map.removeOverlay(this.polyline);
- }
- this.markers.forEach((marker) => {
- this.map.removeOverlay(marker);
- });
- this.markers = [];
-
- if (this.gpsList.length === 0) {
+ // 纭繚鍦板浘瀹炰緥瀛樺湪
+ if (!this.map) {
+ console.error("鍦板浘瀹炰緥鏈垵濮嬪寲");
return;
}
- // 鎸夋椂闂存帓搴�
- this.gpsList.sort((a, b) => {
- return new Date(a.collectTime) - new Date(b.collectTime);
- });
+ try {
+ // 娓呴櫎涔嬪墠鐨勮建杩�
+ if (this.polyline) {
+ this.map.removeOverlay(this.polyline);
+ }
+ this.markers.forEach((marker) => {
+ this.map.removeOverlay(marker);
+ });
+ this.markers = [];
- // 璁＄畻褰撳墠娈佃惤鐨勮捣濮嬪拰缁撴潫绱㈠紩
- const startIndex = this.segmentIndex * this.segmentSize;
- const endIndex = Math.min(
- startIndex + this.segmentSize,
- this.gpsList.length
- );
- const currentSegment = this.gpsList.slice(startIndex, endIndex);
+ if (this.gpsList.length === 0) {
+ return;
+ }
- //鍏堣幏寰楁墍鏈夊潗鏍囨暟缁�
- const originPoints = currentSegment.map(
- (item) => new BMap.Point(item.longitude, item.latitude)
- );
-
- this.gpsList.sort((a, b) => {
- return new Date(b.collectTime) - new Date(a.collectTime);
- }).forEach(item => {
- item.speed=item.speed/1000;
- });
- //鎵归噺杞崲鍧愭爣
- var translatePoints = await this.translatePoints(originPoints);
+ // 鎸夋椂闂存帓搴�
+ this.gpsList.sort((a, b) => {
+ return new Date(a.collectTime) - new Date(b.collectTime);
+ });
- // 鍒涘缓杞ㄨ抗鐐规暟缁�
- const points = translatePoints;
- translatePoints.forEach((item, index) => {
- const bdPoint = item;
+ // 璁＄畻褰撳墠娈佃惤鐨勮捣濮嬪拰缁撴潫绱㈠紩
+ const startIndex = this.segmentIndex * this.segmentSize;
+ const endIndex = Math.min(
+ startIndex + this.segmentSize,
+ this.gpsList.length
+ );
+ const currentSegment = this.gpsList.slice(startIndex, endIndex);
- // 鍒ゆ柇璧风偣鍜岀粓鐐规槸鍚︾浉鍚�
- const isStartPoint = index === 0;
- const isEndPoint = index === translatePoints.length - 1;
- const isStartEndSame = isStartPoint && isEndPoint &&
- translatePoints[0].lng === translatePoints[translatePoints.length - 1].lng &&
- translatePoints[0].lat === translatePoints[translatePoints.length - 1].lat;
+ // 鑾峰彇鎵�鏈夊潗鏍囨暟缁�
+ const originPoints = currentSegment.map(
+ (item) => new BMap.Point(item.longitude, item.latitude)
+ );
+
+ this.gpsList.sort((a, b) => {
+ return new Date(b.collectTime) - new Date(a.collectTime);
+ }).forEach(item => {
+ item.speed = item.speed/1000;
+ });
- // 鍙湪璧风偣鍜岀粓鐐瑰垱寤烘爣璁帮紝涓旇捣鐐瑰拰缁堢偣涓嶅悓鏃舵墠鏄剧ず璧风偣鏍囪
- if ((isStartPoint && !isStartEndSame) || isEndPoint) {
- let marker;
- let direction=currentSegment[index].direction;
- if (isStartPoint && !isStartEndSame) {
- // 璧风偣鏄剧ず"璧�"瀛�
- const label = new BMap.Label("璧�", {
- offset: new BMap.Size(0, 0),
+ // 鎵归噺杞崲鍧愭爣
+ const translatePoints = await this.translatePoints(originPoints);
+
+ // 鍒涘缓杞ㄨ抗鐐规暟缁�
+ const points = translatePoints;
+ for (let index = 0; index < translatePoints.length; index++) {
+ const bdPoint = translatePoints[index];
+
+ // 鍒ゆ柇璧风偣鍜岀粓鐐规槸鍚︾浉鍚�
+ const isStartPoint = index === 0;
+ const isEndPoint = index === translatePoints.length - 1;
+ const isStartEndSame = isStartPoint && isEndPoint &&
+ translatePoints[0].lng === translatePoints[translatePoints.length - 1].lng &&
+ translatePoints[0].lat === translatePoints[translatePoints.length - 1].lat;
+
+ // 鍙湪璧风偣鍜岀粓鐐瑰垱寤烘爣璁帮紝涓旇捣鐐瑰拰缁堢偣涓嶅悓鏃舵墠鏄剧ず璧风偣鏍囪
+ if ((isStartPoint && !isStartEndSame) || isEndPoint) {
+ let marker;
+ let direction = currentSegment[index].direction;
+ if (isStartPoint && !isStartEndSame) {
+ // 璧风偣鏄剧ず"璧�"瀛�
+ const label = new BMap.Label("璧�", {
+ offset: new BMap.Size(0, 0),
+ position: bdPoint,
+ });
+ label.setStyle({
+ color: "white",
+ fontSize: "12px",
+ backgroundColor: "#3388ff",
+ border: "none",
+ padding: "2px 6px",
+ borderRadius: "3px",
+ });
+
+ marker = new BMap.Marker(bdPoint, {rotation: direction});
+ marker.setLabel(label);
+ } else {
+ // 缁堢偣鏄剧ず杞﹁締鍥炬爣
+ const myIcon = new BMap.Icon(
+ "/car_blue.png",
+ new BMap.Size(20, 20),
+ {
+ imageSize: new BMap.Size(20, 20),
+ anchor: new BMap.Size(10, 10),
+ }
+ );
+ marker = new BMap.Marker(bdPoint, {
+ icon: myIcon,
+ rotation: direction,
+ });
+ }
+
+ // 鍦ㄨ溅鍥炬爣涓婃樉绀鸿溅鐗�
+ const label = new BMap.Label(currentSegment[index].vehicleNo, {
+ offset: new BMap.Size(0, -25),
position: bdPoint,
});
label.setStyle({
@@ -379,81 +444,56 @@
padding: "2px 6px",
borderRadius: "3px",
});
-
- marker = new BMap.Marker(bdPoint,{rotation:direction});
marker.setLabel(label);
- } else {
- // 缁堢偣鏄剧ず杞﹁締鍥炬爣
- const myIcon = new BMap.Icon(
- "/car_blue.png",
- new BMap.Size(20, 20),
- {
- imageSize: new BMap.Size(20, 20),
- anchor: new BMap.Size(10, 10),
+
+ // 鑾峰彇鍦板潃淇℃伅
+ const geoc = new BMap.Geocoder();
+ geoc.getLocation(bdPoint, (rs) => {
+ if (rs && rs.addressComponents) {
+ const addComp = rs.addressComponents;
+ const address =
+ addComp.province +
+ addComp.city +
+ addComp.district +
+ addComp.street +
+ addComp.streetNumber;
+
+ // 娣诲姞鐐瑰嚮浜嬩欢鐩戝惉鍣�
+ marker.addEventListener("click", () => {
+ // 鍒涘缓淇℃伅绐楀彛
+ const infoWindow = new BMap.InfoWindow(
+ `杞︾墝鍙凤細${currentSegment[index].vehicleNo}<br/>鏃堕棿锛�${currentSegment[index].collectTime}<br/>閫熷害锛�${
+ currentSegment[index].speed
+ }km/h<br/>鏂瑰悜锛�${currentSegment[index].direction}掳<br/>鍦板潃锛�${address}`
+ );
+ this.map.openInfoWindow(infoWindow, bdPoint);
+ });
}
- );
- marker = new BMap.Marker(bdPoint, {
- icon: myIcon,
- rotation: direction,
});
+
+ this.map.addOverlay(marker);
+ this.markers.push(marker);
}
- //鍦ㄨ溅鍥炬爣涓婃樉绀鸿溅鐗�
- const label = new BMap.Label(currentSegment[index].vehicleNo, {
- offset: new BMap.Size(0, -25), // 鍚戜笂鍋忕Щ25鍍忕礌
- position: bdPoint,
- });
- label.setStyle({
- color: "white",
- fontSize: "12px",
- backgroundColor: "#3388ff",
- border: "none",
- padding: "2px 6px",
- borderRadius: "3px",
- });
- marker.setLabel(label);
- // 鑾峰彇鍦板潃淇℃伅
- const geoc = new BMap.Geocoder();
- geoc.getLocation(bdPoint, (rs) => {
- const addComp = rs.addressComponents;
- const address =
- addComp.province +
- addComp.city +
- addComp.district +
- addComp.street +
- addComp.streetNumber;
-
- // 娣诲姞鐐瑰嚮浜嬩欢鐩戝惉鍣�
- marker.addEventListener("click", () => {
- // 鍒涘缓淇℃伅绐楀彛
- const infoWindow = new BMap.InfoWindow(
- `杞︾墝鍙凤細${currentSegment[index].vehicleNo}<br/>鏃堕棿锛�${currentSegment[index].collectTime}<br/>閫熷害锛�${
- currentSegment[index].speed
- }km/h<br/>鏂瑰悜锛�${currentSegment[index].direction}掳<br/>鍦板潃锛�${address}`
- );
- this.map.openInfoWindow(infoWindow, bdPoint);
+ // 濡傛灉鏄渶鍚庝竴涓偣锛岀粯鍒惰建杩圭嚎
+ if (index === currentSegment.length - 1) {
+ // 鍒涘缓杞ㄨ抗绾�
+ this.polyline = new BMap.Polyline(points, {
+ strokeColor: "#3388ff",
+ strokeWeight: 5,
+ strokeOpacity: 0.8,
+ strokeStyle: "solid",
});
- });
+ this.map.addOverlay(this.polyline);
- this.map.addOverlay(marker);
- this.markers.push(marker);
+ // 璋冩暣鍦板浘瑙嗛噹浠ユ樉绀哄畬鏁磋建杩�
+ this.map.setViewport(points);
+ }
}
-
- // 濡傛灉鏄渶鍚庝竴涓偣锛岀粯鍒惰建杩圭嚎
- if (index === currentSegment.length - 1) {
- // 鍒涘缓杞ㄨ抗绾�
- this.polyline = new BMap.Polyline(points, {
- strokeColor: "#3388ff",
- strokeWeight: 5,
- strokeOpacity: 0.8,
- strokeStyle: "solid",
- });
- this.map.addOverlay(this.polyline);
-
- // 璋冩暣鍦板浘瑙嗛噹浠ユ樉绀哄畬鏁磋建杩�
- this.map.setViewport(points);
- }
- });
+ } catch (error) {
+ console.error("缁樺埗杞ㄨ抗澶辫触", error);
+ this.$message.error("缁樺埗杞ㄨ抗澶辫触锛岃鍒锋柊椤甸潰閲嶈瘯");
+ }
},
/** 鐐瑰嚮琛ㄦ牸琛� */
handleRowClick(row) {
--
Gitblit v1.9.1