From 092bf21368ea824e9dc22467166960219165dc00 Mon Sep 17 00:00:00 2001
From: zuoxiao <470321431@qq.com>
Date: 星期五, 21 二月 2025 17:32:59 +0800
Subject: [PATCH] 1.我的界面每个item添加点击效果。 2.更新本地数据添加二次确认。
---
app/src/main/assets/js/map.js | 263 ++++++++++++++++++++++++++++++++--------------------
1 files changed, 163 insertions(+), 100 deletions(-)
diff --git a/app/src/main/assets/js/map.js b/app/src/main/assets/js/map.js
index ba614dd..8480ecc 100644
--- a/app/src/main/assets/js/map.js
+++ b/app/src/main/assets/js/map.js
@@ -8,7 +8,9 @@
MARKER_BLUE: 'img/marker_blue.svg',
CENTER_PIN: 'img/push_pin.svg',
DIVIDE_BLUE: 'img/divide_home_blue.svg',
- DIVIDE_RED: 'img/divide_home_red.svg'
+ DIVIDE_RED: 'img/divide_home_red.svg',
+ MARKER_START: 'img/marker_blue_start.svg',
+ MARKER_END: 'img/marker_blue_end.svg'
},
MAP: {
DEFAULT_ZOOM: 12,
@@ -26,6 +28,12 @@
// 瀛樺偍鎵�鏈夌缃戠嚎璺殑鏁扮粍
let pipeLineList = [];
let currentPipePath = [];
+
+ // 瀛樺偍鎵�鏈夊彇姘村彛鏍囪鐨勬暟缁�
+ let waterIntakeMarkers = [];
+
+ // 瀛樺偍鎵�鏈夊垎姘存埧鏍囪鐨勬暟缁�
+ let divideMarkers = [];
// 灏嗘柟娉曟寕杞藉埌 window 涓�
function mountMethodToWindow() {
@@ -46,6 +54,11 @@
window.hideAllPipeLines = hideAllPipeLines;
window.clearAllPipeLines = clearAllPipeLines;
window.addPipeNetwork = addPipeNetwork;
+ window.hideAllWaterIntakes = hideAllWaterIntakes;
+ window.showAllWaterIntakes = showAllWaterIntakes;
+ window.hideAllDivides = hideAllDivides;
+ window.showAllDivides = showAllDivides;
+ window.showHistoryLocation = showHistoryLocation;
}
@@ -133,7 +146,7 @@
// 鎵嬫満鑾峰彇鍒板畾浣嶅悗鏄剧ず瀹氫綅
function locationOverLay(lng, lag) {
- console.log("function銆嬨�嬨�嬨�嬨�媗ocationOverLay");
+ // console.log("function銆嬨�嬨�嬨�嬨�媗ocationOverLay");
map.centerAndZoom(new T.LngLat(lng, lag), map.getZoom());
let icon = new T.Icon({
iconUrl: CONFIG.IMAGES.LOCATION,
@@ -151,7 +164,7 @@
//璁剧疆鍦板浘涓績鐐�
function setCenterAndZoom(lng, lat, thiszoom) {
zoom = thiszoom;
- console.log("function銆嬨�嬨�嬨�嬨�媠etCenterAndZoom>>>>lng:" + lng + ",lat:" + lat);
+ // console.log("function銆嬨�嬨�嬨�嬨�媠etCenterAndZoom>>>>lng:" + lng + ",lat:" + lat);
map.centerAndZoom(new T.LngLat(lng, lat), zoom);
}
@@ -169,6 +182,9 @@
if (!isShowCenterPin) {
if (lastClickedMarker !== null) {
lastClickedMarker.setIcon(createIcon(CONFIG.IMAGES.MARKER_BLUE));
+ }
+ if (lastClickedDivide !== null) {
+ lastClickedDivide.setIcon(createIcon(CONFIG.IMAGES.DIVIDE_BLUE));
}
if (isShowWaterIntakeDetail || isShowDivideDetail) {
// 鍋囧鏄剧ず浜嗗彇姘村彛璇︽儏鍒欓殣钘忓彇姘村彛璇︽儏
@@ -218,13 +234,11 @@
function isEqualsLngLat(data1, data2) {
return data1.lat === data2.lat && data1.lng === data2.lng;
}
- function addMarker(id, lng, lat, name) {
- addMarker(id, lng, lat, name, false)
+ function addMarker(id, lng, lat, name, isShow) {
+ addMyMarker(id, lng, lat, name, false, isShow)
}
//娣诲姞浠庡師鐢熶紶杩囨潵鐨勫潗鏍囧苟鏄剧ず鍦ㄥ湴鍥句笂
- function addMarker(id, lng, lat, name, isRed) {
- console.log("function銆嬨�嬨�嬨�嬨�媋ddMarker>>>id:" + id);
-
+ function addMyMarker(id, lng, lat, name, isRed, isShow) {
const iconUrl = isRed ? CONFIG.IMAGES.MARKER_RED : CONFIG.IMAGES.MARKER_BLUE;
let marker = new T.Marker(
new T.LngLat(lng, lat),
@@ -238,19 +252,27 @@
let label = new T.Label({
text: `<div style='position:absolute;left:-50%;transform: translateX(-50%);'>${name}<div>`,
position: marker.getLngLat(),
- offset: new T.Point(0, 8), // 璁剧疆鏍囨敞鏂囧瓧鐨勪綅缃�
- opacity: 1, // 璁剧疆鏂囨湰鐨勬樉绀轰笉閫忔槑搴︼紙鑼冨洿0-1锛�
+ offset: new T.Point(0, 8),
+ opacity: 1,
});
- label.setBorderLine(0); // 璁剧疆鏂囨湰鐨勮竟妗嗙嚎瀹�
- label.setBackgroundColor("transparent"); // 璁剧疆鏂囨湰鐨勮儗鏅壊锛堥�忔槑鑹诧級
+ label.setBorderLine(0);
+ label.setBackgroundColor("transparent");
label.setFontColor("#FFFFFF");
label.setFontSize(10);
marker.label = label;
if (isRed) {
lastClickedMarker = marker;
}
- map.addOverLay(label);
- map.addOverLay(marker); // 灏嗘爣娉ㄦ坊鍔犲埌鍦板浘涓�
+
+ // 灏嗘爣璁板拰鏍囩瀛樺偍鍒版暟缁勪腑
+ waterIntakeMarkers.push({
+ marker: marker,
+ label: label
+ });
+ if (isShow === "true" || isShow === true) {
+ map.addOverLay(label);
+ map.addOverLay(marker);
+ }
return "addMarker鍔犺浇鎴愬姛 id:" + id
}
//鏇存柊浣嶅潗鏍�
@@ -290,96 +312,67 @@
// 绠＄綉绾胯矾绠＄悊
const PipelineManager = {
- lines: [], // 瀛樺偍鎵�鏈夊畬鎴愮殑绾胯矾
+ lines: [],
currentLine: {
- points: [], // 褰撳墠绾胯矾鐨勭偣
- overlay: null // 褰撳墠绾胯矾鐨勫浘灞傚璞�
+ points: [],
+ overlay: null
},
-
- // 绾胯矾鏍峰紡閰嶇疆
+
style: {
color: '#1890FF',
weight: 3,
opacity: 0.8
},
-
- /**
- * 娣诲姞鐐瑰埌绠＄綉绾胯矾
- * @param {number} lng 缁忓害
- * @param {number} lat 绾害
- * @param {boolean} isNewLine 鏄惁寮�濮嬫柊鐨勭嚎璺�
- */
- addPoint(lng, lat, isNewLine) {
- if (isNewLine) {
- this.finishCurrentLine();
- }
-
+
+ addPoint(lng, lat, isNewLine, isShow) {
+ // console.log(`Adding point: ${lng}, ${lat}, isNewLine: ${isNewLine}`); // 娣诲姞鏃ュ織
+
const point = new T.LngLat(lng, lat);
- this.currentLine.points.push(point);
-
- if (this.currentLine.points.length > 1) {
- this.updateCurrentLineDisplay();
- }
- },
-
- /**
- * 鏇存柊褰撳墠绾胯矾鐨勬樉绀�
- */
- updateCurrentLineDisplay() {
- if (!this.currentLine.overlay) {
- // 鍒涘缓鏂扮殑绾胯矾鍥惧眰
- this.currentLine.overlay = new T.Polyline(this.currentLine.points, this.style);
- map.addOverLay(this.currentLine.overlay);
- } else {
- // 鏇存柊鐜版湁绾胯矾鐨勭偣
- this.currentLine.overlay.setLngLats(this.currentLine.points);
- }
- },
-
- /**
- * 瀹屾垚褰撳墠绾胯矾
- */
- finishCurrentLine() {
- if (this.currentLine.points.length > 1) {
- if (this.currentLine.overlay) {
- // 灏嗗綋鍓嶇嚎璺坊鍔犲埌瀹屾垚鍒楄〃
- this.lines.push(this.currentLine.overlay);
+
+ // 淇敼鍒ゆ柇閫昏緫锛岀‘淇濆瓧绗︿覆"false"琚纭鐞�
+ const shouldCreateNewLine = isNewLine === true || isNewLine === "true" || !this.currentLine.overlay;
+
+ if (shouldCreateNewLine) {
+ // 鍒涘缓鏂扮嚎璺�
+ this.currentLine.points = [point];
+ this.currentLine.overlay = new T.Polyline([point], this.style);
+ if (isShow === true || isShow === "true") {
+ map.addOverLay(this.currentLine.overlay);
}
- } else if (this.currentLine.overlay) {
- // 濡傛灉鐐规暟涓嶈冻锛屾竻闄ゅ浘灞�
- map.removeOverLay(this.currentLine.overlay);
+ } else {
+ // 娣诲姞鐐瑰埌鐜版湁绾胯矾
+ this.currentLine.points.push(point);
+ this.currentLine.overlay.setLngLats(this.currentLine.points);
+
}
-
- // 閲嶇疆褰撳墠绾胯矾
- this.currentLine = {
- points: [],
- overlay: null
- };
+ // 濡傛灉鏄柊绾胯矾锛屽皢涔嬪墠鐨勭嚎璺繚瀛樺埌 lines 鏁扮粍
+ if (isNewLine === true || isNewLine === "true") {
+ this.lines.push({
+ points: [...this.currentLine.points],
+ overlay: this.currentLine.overlay
+ });
+ }
},
-
- /**
- * 鏄剧ず鎵�鏈夌嚎璺�
- */
+
showAll() {
- this.lines.forEach(line => map.addOverLay(line));
- if (this.currentLine.overlay) {
- map.addOverLay(this.currentLine.overlay);
- }
+ // console.log("showAllpipe" + this.lines.length);
+ this.lines.forEach(line => {
+ if (line.overlay) {
+ map.addOverLay(line.overlay);
+ }
+ });
+
},
-
- /**
- * 闅愯棌鎵�鏈夌嚎璺�
- */
+
hideAll() {
- this.lines.forEach(line => map.removeOverLay(line));
- if (this.currentLine.overlay) {
- map.removeOverLay(this.currentLine.overlay);
- }
+ // console.log("hideAllpipe" + this.lines.length);
+ this.lines.forEach(line => {
+ if (line.overlay) {
+ map.removeOverLay(line.overlay);
+ }
+ });
},
-
- /**
- * 娓呴櫎鎵�鏈夌嚎璺�
- */
+
clearAll() {
this.hideAll();
this.lines = [];
@@ -393,8 +386,8 @@
/**
* 娣诲姞绠＄綉绾胯矾鐐�
*/
- function addPipeNetwork(lng, lat, isNewLine) {
- PipelineManager.addPoint(lng, lat, isNewLine);
+ function addPipeNetwork(lng, lat, isNewLine, isShow) {
+ PipelineManager.addPoint(lng, lat, isNewLine, isShow);
}
/**
@@ -470,14 +463,14 @@
function refreshMarker(id, lng, lat, name) {
map.removeOverLay(lastClickedMarker.label);
map.removeOverLay(lastClickedMarker);
- addMarker(id, lng, lat, name, true);
+ addMarker(id, lng, lat, name, true, true);
}
function mapMoveEnd(e) {
- const center = e.target.getCenter();
- window.Android.refreshCenter(center.getLng(), center.getLat());
+ const center = e.target.getCenter();
+ window.Android.refreshCenter(center.getLng(), center.getLat());
}
@@ -503,11 +496,11 @@
});
}
//娣诲姞鍒嗘按鎴�
- function addDivide(id, lng, lat, name) {
- addDivide(id, lng, lat, name, false)
+ function addDivide(id, lng, lat, name, isShow) {
+ addMyDivide(id, lng, lat, name, false, isShow)
}
//娣诲姞鍒嗘按鎴�
- function addDivide(id, lng, lat, name, isRed) {
+ function addMyDivide(id, lng, lat, name, isRed, isShow) {
console.log("function銆嬨�嬨�嬨�嬨�媋ddMarker>>>id:" + id);
const iconUrl = isRed ? CONFIG.IMAGES.DIVIDE_RED : CONFIG.IMAGES.DIVIDE_BLUE;
@@ -534,8 +527,16 @@
if (isRed) {
lastClickedMarker = marker;
}
- map.addOverLay(label);
- map.addOverLay(marker); // 灏嗘爣娉ㄦ坊鍔犲埌鍦板浘涓�
+
+ // 灏嗗垎姘存埧鏍囪鍜屾爣绛惧瓨鍌ㄥ埌鏁扮粍涓�
+ divideMarkers.push({
+ marker: marker,
+ label: label
+ });
+ if (isShow === true || isShow === "true") {
+ map.addOverLay(label);
+ map.addOverLay(marker); // 灏嗘爣娉ㄦ坊鍔犲埌鍦板浘涓�
+ }
return "addMarker鍔犺浇鎴愬姛 id:" + id
}
// 淇敼鐐瑰嚮鏍囨敞鐨勫浘鏍�
@@ -573,9 +574,71 @@
window.Android.showDivideDetail(data);
}
+ /**
+ * 闅愯棌鎵�鏈夊彇姘村彛鏍囪
+ */
+ function hideAllWaterIntakes() {
+ waterIntakeMarkers.forEach(item => {
+ map.removeOverLay(item.marker);
+ map.removeOverLay(item.label);
+ });
+ }
+ /**
+ * 鏄剧ず鎵�鏈夊彇姘村彛鏍囪
+ */
+ function showAllWaterIntakes() {
+ waterIntakeMarkers.forEach(item => {
+ map.addOverLay(item.marker);
+ map.addOverLay(item.label);
+ });
+ }
+ /**
+ * 闅愯棌鎵�鏈夊垎姘存埧鏍囪
+ */
+ function hideAllDivides() {
+ divideMarkers.forEach(item => {
+ map.removeOverLay(item.marker);
+ map.removeOverLay(item.label);
+ });
+ }
+ /**
+ * 鏄剧ず鎵�鏈夊垎姘存埧鏍囪
+ */
+ function showAllDivides() {
+ divideMarkers.forEach(item => {
+ map.addOverLay(item.marker);
+ map.addOverLay(item.label);
+ });
+ }
+ var historyPoint = [];
+ //鏄剧ず鍘嗗彶宸℃璁板綍
+ function showHistoryLocation(lng, lat, start, end) {
+ // 璋冪敤 Android 鎻愪緵鐨勬帴鍙ｏ紝鑾峰彇鏁版嵁
+ console.log("aginShowLocation>>lng:" + lng + ">>>lat:" + lat+">>>start:"+start+">>>end:"+end);
+ var newPoint = new T.LngLat(lng, lat);
+ historyPoint.push(newPoint);
+ if (start === "true" || start === true) {
+ map.panTo(newPoint);
+ let marker = new T.Marker(
+ newPoint,
+ { icon: createIcon(CONFIG.IMAGES.MARKER_START, 35) }
+ );
+ map.addOverLay(marker);
+ map.setZoom(15);
+ } else if (end === "true" || end === true) {
+ let marker = new T.Marker(
+ newPoint,
+ { icon: createIcon(CONFIG.IMAGES.MARKER_END, 35) }
+ );
+ map.addOverLay(marker);
+ }
+ oldLineLayer.setLngLats(historyPoint);
+ map.addOverLay(oldLineLayer);
+ }
+}
-})();
+)();
--
Gitblit v1.8.0