From 986648a7fc5d377d5c100ba41350e6313dcf6e5b Mon Sep 17 00:00:00 2001 From: zuoxiao <470321431@qq.com> Date: 星期五, 21 二月 2025 17:04:29 +0800 Subject: [PATCH] 1.优化我的界面的更新本地数据功能添加loding 2.优化巡检详情页面增大放大级别 3.优化我的界面的更新本地数据功能所有接口都结束后显示数据更新成功 --- 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 鎻愪緵鐨勬帴鍙o紝鑾峰彇鏁版嵁 + 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