From 4f7f99c6ea914bcd38de78bd8371be566026b905 Mon Sep 17 00:00:00 2001
From: zuoxiao <470321431@qq.com>
Date: 星期三, 26 二月 2025 15:54:14 +0800
Subject: [PATCH] -为按钮和列表项添加波纹效果，以获得更好的视觉反馈 -改进MapFragment中的底部布局动画 -在MapFragment中添加设备状态和RTU地址显示 -更新BaseListResult以支持泛型类型 -为设备数据添加IntakeListResult和IntakeResult -通过数据库支持增强标记位置更新功能 -添加电话拨号意图以分隔标记详细信息 -通过过期检查改进磁贴缓存 -添加问题报告的确认对话框 -更新登录活动以限制用户名长度 -为波纹效果和UI元素添加新颜色 -重构XML布局以使用新的波纹图 -改进MapFragment中的错误处理和用户反馈
---
app/src/main/assets/js/map.js | 377 +++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 334 insertions(+), 43 deletions(-)
diff --git a/app/src/main/assets/js/map.js b/app/src/main/assets/js/map.js
index cbd35c7..8480ecc 100644
--- a/app/src/main/assets/js/map.js
+++ b/app/src/main/assets/js/map.js
@@ -4,9 +4,13 @@
IMAGES: {
LOCATION: 'img/location.png',
MARKER_BLACK: 'img/marker_black.svg',
- MARKER_RED: 'img/marker_red.svg',
+ MARKER_RED: 'img/marker_red.svg',
MARKER_BLUE: 'img/marker_blue.svg',
- CENTER_PIN: 'img/push_pin.svg'
+ CENTER_PIN: 'img/push_pin.svg',
+ DIVIDE_BLUE: 'img/divide_home_blue.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,
@@ -16,8 +20,20 @@
let map;
let lastMarker = null;
let lastClickedMarker = null;
+ let lastClickedDivide = null;
let isShowWaterIntakeDetail = false;
+ let isShowDivideDetail = false;
let zoom = 12;
+
+ // 瀛樺偍鎵�鏈夌缃戠嚎璺殑鏁扮粍
+ let pipeLineList = [];
+ let currentPipePath = [];
+
+ // 瀛樺偍鎵�鏈夊彇姘村彛鏍囪鐨勬暟缁�
+ let waterIntakeMarkers = [];
+
+ // 瀛樺偍鎵�鏈夊垎姘存埧鏍囪鐨勬暟缁�
+ let divideMarkers = [];
// 灏嗘柟娉曟寕杞藉埌 window 涓�
function mountMethodToWindow() {
@@ -33,7 +49,16 @@
window.showPin = showPin;
window.cancelPin = cancelPin;
window.refreshMarker = refreshMarker;
-
+ window.addDivide = addDivide;
+ window.showAllPipeLines = showAllPipeLines;
+ window.hideAllPipeLines = hideAllPipeLines;
+ window.clearAllPipeLines = clearAllPipeLines;
+ window.addPipeNetwork = addPipeNetwork;
+ window.hideAllWaterIntakes = hideAllWaterIntakes;
+ window.showAllWaterIntakes = showAllWaterIntakes;
+ window.hideAllDivides = hideAllDivides;
+ window.showAllDivides = showAllDivides;
+ window.showHistoryLocation = showHistoryLocation;
}
@@ -121,12 +146,16 @@
// 鎵嬫満鑾峰彇鍒板畾浣嶅悗鏄剧ず瀹氫綅
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,
+ iconSize: new T.Point(20, 20),
+ iconAnchor: new T.Point(10, 10)
+ });
let marker = new T.Marker(
- new T.LngLat(lng, lag),
- { icon: createIcon(CONFIG.IMAGES.LOCATION, 27) }
+ new T.LngLat(lng, lag),
+ { icon: icon }
);
map.addOverLay(marker);
}
@@ -135,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);
}
@@ -154,7 +183,10 @@
if (lastClickedMarker !== null) {
lastClickedMarker.setIcon(createIcon(CONFIG.IMAGES.MARKER_BLUE));
}
- if (isShowWaterIntakeDetail) {
+ if (lastClickedDivide !== null) {
+ lastClickedDivide.setIcon(createIcon(CONFIG.IMAGES.DIVIDE_BLUE));
+ }
+ if (isShowWaterIntakeDetail || isShowDivideDetail) {
// 鍋囧鏄剧ず浜嗗彇姘村彛璇︽儏鍒欓殣钘忓彇姘村彛璇︽儏
isShowWaterIntakeDetail = false;
window.Android.closeWaterIntakeView();
@@ -163,7 +195,6 @@
getLngLat(data.lnglat);
}
}
-
}
// 鐐瑰嚮鏍囨敞鐨勪簨浠�
@@ -171,7 +202,7 @@
if (!isShowCenterPin) {
chageMarkerIcon(data);
showWaterIntakeDetail(id);
- }else {
+ } else {
showToast("褰撳墠姝ｅ湪淇敼閫変腑鍙栨按鍙ｇ殑缁忕含搴︼紝瀹屾垚鎴栭��鍑哄悗鎵嶅彲閫夋嫨鍏朵粬锛�");
}
@@ -182,11 +213,14 @@
// 鐐瑰嚮鐨勬爣娉ㄦ敼涓虹孩鑹�
var currentMarker = data.target;
currentMarker.setIcon(createIcon(CONFIG.IMAGES.MARKER_RED));
-
+
if (lastClickedMarker !== null) {
if (!isEqualsLngLat(data.target.getLngLat(), lastClickedMarker.getLngLat())) {
lastClickedMarker.setIcon(createIcon(CONFIG.IMAGES.MARKER_BLUE));
}
+ }
+ if (lastClickedDivide !== null) {
+ lastClickedDivide.setIcon(createIcon(CONFIG.IMAGES.MARKER_BLUE));
}
lastClickedMarker = data.target;
map.panTo(currentMarker.getLngLat());
@@ -200,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),
@@ -220,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;
+ 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
}
//鏇存柊浣嶅潗鏍�
@@ -241,32 +281,138 @@
map.removeOverLay(locationMarker);
}
var newPoint = new T.LngLat(log, lat);
+ let icon = new T.Icon({
+ iconUrl: CONFIG.IMAGES.LOCATION,
+ iconSize: new T.Point(20, 20),
+ iconAnchor: new T.Point(10, 10)
+ });
+
locationMarker = new T.Marker(
- newPoint,
- { icon: createIcon(CONFIG.IMAGES.LOCATION, 20) }
+ newPoint,
+ { icon: icon }
);
map.addOverLay(locationMarker);
map.panTo(newPoint);
}
//淇濆瓨瀹氫綅鍧愭爣鐢熸垚杞ㄨ抗
var path = [];
- var lineLayer = new T.Polyline([], { color: '#ff4500', weight: 3, opacity: 0.8 });
+ var lineLayer = new T.Polyline([], { color: '#E9900A', weight: 3, opacity: 0.8 });
let locationMarker;
function updateInspectionLocation(log, lat) {
var lastLat = lat;
- // const intervalId = setInterval(() => {
- // lastLat=lastLat+0.0001;
var newPoint = new T.LngLat(log, lastLat);
path.push(newPoint);
lineLayer.setLngLats(path);
map.addOverLay(lineLayer);
- // 绉诲姩鍦板浘瑙嗚鍒版渶鍚庝竴涓綅缃�
+ }
- // }, 500);
+
+ var pipePath = [];
+ var pipeLineLayer = new T.Polyline([], { color: '#E9900A', weight: 3, opacity: 0.8 });
+
+ // 绠＄綉绾胯矾绠＄悊
+ const PipelineManager = {
+ lines: [],
+ currentLine: {
+ points: [],
+ overlay: null
+ },
+
+ style: {
+ color: '#1890FF',
+ weight: 3,
+ opacity: 0.8
+ },
+
+ addPoint(lng, lat, isNewLine, isShow) {
+ // console.log(`Adding point: ${lng}, ${lat}, isNewLine: ${isNewLine}`); // 娣诲姞鏃ュ織
+
+ const point = new T.LngLat(lng, lat);
+
+ // 淇敼鍒ゆ柇閫昏緫锛岀‘淇濆瓧绗︿覆"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 {
+ // 娣诲姞鐐瑰埌鐜版湁绾胯矾
+ this.currentLine.points.push(point);
+ this.currentLine.overlay.setLngLats(this.currentLine.points);
+
+ }
+ // 濡傛灉鏄柊绾胯矾锛屽皢涔嬪墠鐨勭嚎璺繚瀛樺埌 lines 鏁扮粍
+ if (isNewLine === true || isNewLine === "true") {
+ this.lines.push({
+ points: [...this.currentLine.points],
+ overlay: this.currentLine.overlay
+ });
+ }
+ },
+
+ showAll() {
+ // console.log("showAllpipe" + this.lines.length);
+ this.lines.forEach(line => {
+ if (line.overlay) {
+ map.addOverLay(line.overlay);
+ }
+ });
+
+ },
+
+ hideAll() {
+ // console.log("hideAllpipe" + this.lines.length);
+ this.lines.forEach(line => {
+ if (line.overlay) {
+ map.removeOverLay(line.overlay);
+ }
+ });
+ },
+
+ clearAll() {
+ this.hideAll();
+ this.lines = [];
+ this.currentLine = {
+ points: [],
+ overlay: null
+ };
+ }
+ };
+
+ /**
+ * 娣诲姞绠＄綉绾胯矾鐐�
+ */
+ function addPipeNetwork(lng, lat, isNewLine, isShow) {
+ PipelineManager.addPoint(lng, lat, isNewLine, isShow);
+ }
+
+ /**
+ * 鏄剧ず鎵�鏈夌缃戠嚎璺�
+ */
+ function showAllPipeLines() {
+ PipelineManager.showAll();
+ }
+
+ /**
+ * 闅愯棌鎵�鏈夌缃戠嚎璺�
+ */
+ function hideAllPipeLines() {
+ PipelineManager.hideAll();
+ }
+
+ /**
+ * 娓呴櫎鎵�鏈夌缃戠嚎璺�
+ */
+ function clearAllPipeLines() {
+ PipelineManager.clearAll();
}
var aginPath = [];
- var oldLineLayer = new T.Polyline([], { color: '#ff4500', weight: 3, opacity: 0.8 });
+ var oldLineLayer = new T.Polyline([], { color: '#E9900A', weight: 3, opacity: 0.8 });
//鏄剧ず鍥犲紓甯稿叧闂殑宸℃璁板綍
function aginShowLocation(lng, lat) {
// 璋冪敤 Android 鎻愪緵鐨勬帴鍙ｏ紝鑾峰彇鏁版嵁
@@ -306,7 +452,7 @@
isShowCenterPin = true;
map.addEventListener("moveend", mapMoveEnd);
window.Android.refreshCenter(map.getCenter().getLng(), map.getCenter().getLat());
- return true;
+ return true;
}
//鍙栨秷淇敼瀹氫綅
function cancelPin() {
@@ -317,22 +463,22 @@
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) {
- debounce(() => {
- const center = e.target.getCenter();
- window.Android.refreshCenter(center.getLng(), center.getLat());
- }, 300);
+
+ const center = e.target.getCenter();
+ window.Android.refreshCenter(center.getLng(), center.getLat());
+
}
// 娣诲姞闃叉姈鍑芥暟
function debounce(fn, delay) {
let timer = null;
- return function() {
- if(timer) clearTimeout(timer);
+ return function () {
+ if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, arguments);
}, delay);
@@ -346,8 +492,153 @@
return new T.Icon({
iconUrl: iconUrl,
iconSize: new T.Point(size, size),
- iconAnchor: new T.Point(size/2, size)
+ iconAnchor: new T.Point(size / 2, size)
+ });
+ }
+ //娣诲姞鍒嗘按鎴�
+ function addDivide(id, lng, lat, name, isShow) {
+ addMyDivide(id, lng, lat, name, false, isShow)
+ }
+ //娣诲姞鍒嗘按鎴�
+ 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;
+ let marker = new T.Marker(
+ new T.LngLat(lng, lat),
+ { icon: createIcon(iconUrl) }
+ );
+ //娣诲姞鐐瑰嚮浜嬩欢
+ marker.addEventListener("click", (data) => {
+ addDivideListener(id, data)
+ });
+
+ 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锛�
+ });
+ label.setBorderLine(0); // 璁剧疆鏂囨湰鐨勮竟妗嗙嚎瀹�
+ label.setBackgroundColor("transparent"); // 璁剧疆鏂囨湰鐨勮儗鏅壊锛堥�忔槑鑹诧級
+ label.setFontColor("#FFFFFF");
+ label.setFontSize(10);
+ marker.label = label;
+ if (isRed) {
+ lastClickedMarker = marker;
+ }
+
+ // 灏嗗垎姘存埧鏍囪鍜屾爣绛惧瓨鍌ㄥ埌鏁扮粍涓�
+ divideMarkers.push({
+ marker: marker,
+ label: label
+ });
+ if (isShow === true || isShow === "true") {
+ map.addOverLay(label);
+ map.addOverLay(marker); // 灏嗘爣娉ㄦ坊鍔犲埌鍦板浘涓�
+ }
+ return "addMarker鍔犺浇鎴愬姛 id:" + id
+ }
+ // 淇敼鐐瑰嚮鏍囨敞鐨勫浘鏍�
+ function chageDivideIcon(data) {
+ // 鐐瑰嚮鐨勬爣娉ㄦ敼涓虹孩鑹�
+ var currentMarker = data.target;
+ currentMarker.setIcon(createIcon(CONFIG.IMAGES.DIVIDE_RED));
+
+ if (lastClickedDivide !== null) {
+ if (!isEqualsLngLat(data.target.getLngLat(), lastClickedDivide.getLngLat())) {
+ lastClickedDivide.setIcon(createIcon(CONFIG.IMAGES.DIVIDE_BLUE));
+ }
+ }
+ if (lastClickedMarker !== null) {
+ lastClickedMarker.setIcon(createIcon(CONFIG.IMAGES.MARKER_BLUE));
+ }
+ lastClickedDivide = data.target;
+ map.panTo(currentMarker.getLngLat());
+ }
+
+ // 鐐瑰嚮鏍囨敞鐨勪簨浠�
+ function addDivideListener(id, data) {
+ // if (!isShowCenterPin) {
+ chageDivideIcon(data);
+ showDivideDetail(id);
+ // } else {
+ // showToast("褰撳墠姝ｅ湪淇敼閫変腑鍙栨按鍙ｇ殑缁忕含搴︼紝瀹屾垚鎴栭��鍑哄悗鎵嶅彲閫夋嫨鍏朵粬锛�");
+ // }
+
+ }
+
+ // 璋冪敤鍘熺敓瀹夊崜鏂规硶鏄剧ず鍙栨按鍙ｈ鎯�
+ function showDivideDetail(data) {
+ isShowDivideDetail = true;
+ 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