From 7a1caa42ad3282ff22513785fa997953e084b188 Mon Sep 17 00:00:00 2001 From: zuoxiao <470321431@qq.com> Date: 星期一, 16 十二月 2024 15:50:31 +0800 Subject: [PATCH] 1.修改app的Icon。 2.优化取水口加载本地数据,改为异步加载。 3.添加取水口点击后显示取水口信息。 4.美化登录界面。 --- app/src/main/assets/js/map.js | 142 ++++++++++++++++++++++++++++++++++++----------- 1 files changed, 108 insertions(+), 34 deletions(-) diff --git a/app/src/main/assets/js/map.js b/app/src/main/assets/js/map.js index 58b8398..3df1bb6 100644 --- a/app/src/main/assets/js/map.js +++ b/app/src/main/assets/js/map.js @@ -18,18 +18,25 @@ mountMethodToWindow(); }); - window.onload = function () { - //鍔犺浇鍧愭爣鐐� - window.Android.loadMarker(); - }; + // window.onload = function () { + // console.log(window.onload); // 鎵撳嵃鏁扮粍鏁版嵁 + // //鍔犺浇鍧愭爣鐐� + // window.Android.loadMarker(); + // }; // 鍒濆鍖栧湴鍥� function initMap() { + // 褰卞儚搴曞浘 var imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?" + "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" + "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=d8beed89b43160a9a185e5aff431f85d"; //鍒涘缓鑷畾涔夊浘灞傚璞� - var lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 }); - var config = { layers: [lay] }; + //褰卞儚娉ㄨ锛堝湴鍥句笂鐨勫湴鍧�锛� + var imgURL2 = "http://t0.tianditu.gov.cn/cia_w/wmts?" + "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" + + "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}" + + "&tk=d8beed89b43160a9a185e5aff431f85d"; + var lay = new T.TileLayer(imageURL, { minZoom: 6, maxZoom: 18 }); + var lay2 = new T.TileLayer(imgURL2, { minZoom: 6, maxZoom: 18 }); + var config = { layers: [lay, lay2] }; map = new T.Map("mapDiv", config); var scale = new T.Control.Scale(); //娣诲姞姣斾緥灏烘帶浠� @@ -41,7 +48,7 @@ // 鍦板浘鐐瑰嚮鍚庤幏鍙栫粡绾害 function getLngLat(lnglat) { console.log(lnglat.lng.toFixed(6) + "," + lnglat.lat.toFixed(6)); - addClickOverLay(lnglat); + // addClickOverLay(lnglat); } // 鐐瑰嚮鍚庢坊鍔犲潗鏍囩偣 @@ -134,21 +141,21 @@ // 鎵嬫満鑾峰彇鍒板畾浣嶅悗鏄剧ず瀹氫綅 function locationOverLay(lng, lag) { console.log("function銆嬨�嬨�嬨�嬨�媗ocationOverLay"); - map.centerAndZoom(new T.LngLat(lng, lag), 18); + map.centerAndZoom(new T.LngLat(lng, lag), map.getZoom()); let icon = new T.Icon({ iconUrl: locationIMGPath, iconSize: new T.Point(27, 27), iconAnchor: new T.Point(10, 25) }); - let marker = new T.Marker(new T.LngLat(lng, lag), { icon: icon }); map.addOverLay(marker); } //璁剧疆鍦板浘涓績鐐� - function setCenterAndZoom(lng, lat) { + function setCenterAndZoom(lng, lat, thiszoom) { + zoom = thiszoom; console.log("function銆嬨�嬨�嬨�嬨�媠etCenterAndZoom>>>>lng:" + lng + ",lat:" + lat); map.centerAndZoom(new T.LngLat(lng, lat), zoom); } @@ -160,6 +167,12 @@ window.showToast = showToast; window.addMarker = addMarker; window.setCenterAndZoom = setCenterAndZoom; + window.updateLocation = updateLocation; + window.aginShowLocation = aginShowLocation; + window.cleanLocationLay = cleanLocationLay; + window.updateInspectionLocation = updateInspectionLocation; + window.cleanLoclLay = cleanLoclLay; + } // 璋冪敤鍘熺敓瀹夊崜鏂规硶鏄剧ず鍙栨按鍙h鎯� @@ -191,9 +204,9 @@ } // 鐐瑰嚮鏍囨敞鐨勪簨浠� - function addMarkerListener(data) { + function addMarkerListener(id,data) { chageMarkerIcon(data); - showWaterIntakeDetail("妯℃嫙鏁版嵁"); + showWaterIntakeDetail(id); } // 淇敼鐐瑰嚮鏍囨敞鐨勫浘鏍� @@ -231,37 +244,98 @@ return data1.lat === data2.lat && data1.lng === data2.lng; } //娣诲姞浠庡師鐢熶紶杩囨潵鐨勫潗鏍囧苟鏄剧ず鍦ㄥ湴鍥句笂 - function addMarker(jsonData) { + function addMarker(id,lng,lat,name) { console.log("function銆嬨�嬨�嬨�嬨�媋ddMarker"); - var array = JSON.parse(jsonData); + var icon = new T.Icon({ iconUrl: markerBluePath, iconSize: new T.Point(27, 27), iconAnchor: new T.Point(10, 25) }); - array.forEach(element => { - let marker = new T.Marker( - new T.LngLat(element[0], element[1]) // 鍒涘缓鏍囨敞 - , { icon: icon }); - //娣诲姞鐐瑰嚮浜嬩欢 - marker.addEventListener("click", (data) => { - addMarkerListener(data) - }); - map.addOverLay(marker); // 灏嗘爣娉ㄦ坊鍔犲埌鍦板浘涓� - let label = new T.Label({ - text: element[2], - position: marker.getLngLat(), - offset: new T.Point(-35, 8), // 璁剧疆鏍囨敞鏂囧瓧鐨勪綅缃� - opacity: 1, // 璁剧疆鏂囨湰鐨勬樉绀轰笉閫忔槑搴︼紙鑼冨洿0-1锛� - }); - label.setBorderLine(0); // 璁剧疆鏂囨湰鐨勮竟妗嗙嚎瀹� - label.setBackgroundColor("transparent"); // 璁剧疆鏂囨湰鐨勮儗鏅壊锛堥�忔槑鑹诧級 - label.setFontColor("#0000FF"); - label.setFontSize(10); - map.addOverLay(label); + let marker = new T.Marker( + new T.LngLat(lng, lat) // 鍒涘缓鏍囨敞 + , { icon: icon }); + //娣诲姞鐐瑰嚮浜嬩欢 + marker.addEventListener("click", (data) => { + addMarkerListener(id,data) }); + map.addOverLay(marker); // 灏嗘爣娉ㄦ坊鍔犲埌鍦板浘涓� + let label = new T.Label({ + text: name, + position: marker.getLngLat(), + offset: new T.Point(-35, 8), // 璁剧疆鏍囨敞鏂囧瓧鐨勪綅缃� + opacity: 1, // 璁剧疆鏂囨湰鐨勬樉绀轰笉閫忔槑搴︼紙鑼冨洿0-1锛� + }); + label.setBorderLine(0); // 璁剧疆鏂囨湰鐨勮竟妗嗙嚎瀹� + label.setBackgroundColor("transparent"); // 璁剧疆鏂囨湰鐨勮儗鏅壊锛堥�忔槑鑹诧級 + label.setFontColor("#0000FF"); + label.setFontSize(10); + map.addOverLay(label); return "addMarker鍔犺浇鎴愬姛" } + //鏇存柊瀹氫綅鍧愭爣 + function updateLocation(log, lat) { + let icon = new T.Icon({ + iconUrl: locationIMGPath, + iconSize: new T.Point(20, 20), + iconAnchor: new T.Point(10, 10) + }); + if (locationMarker) { + map.removeOverLay(locationMarker); + } + var newPoint = new T.LngLat(log, lat); + locationMarker = new T.Marker(newPoint, { icon: icon }); + map.addOverLay(locationMarker); + map.panTo(newPoint); + } + //淇濆瓨瀹氫綅鍧愭爣鐢熸垚杞ㄨ抗 + var path = []; + var lineLayer = new T.Polyline([], { color: '#ff4500', 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 aginPath = []; + var oldLineLayer = new T.Polyline([], { color: '#ff4500', weight: 3, opacity: 0.8 }); + //鏄剧ず鍥犲紓甯稿叧闂殑宸℃璁板綍 + function aginShowLocation(lng, lat) { + // 璋冪敤 Android 鎻愪緵鐨勬帴鍙o紝鑾峰彇鏁版嵁 + console.log("aginShowLocation>>lng:" + lng + ">>>lat:" + lat); + var newPoint = new T.LngLat(lng, lat); + aginPath.push(newPoint); + oldLineLayer.setLngLats(aginPath); + map.addOverLay(oldLineLayer); + } + //娓呴櫎宸℃璁板綍杞ㄨ抗 + function cleanLocationLay() { + if (lineLayer) { + map.removeOverLay(lineLayer); + path = [] + } + if (locationMarker) { + map.removeOverLay(locationMarker); + } + if (oldLineLayer) { + aginPath = [] + map.removeOverLay(oldLineLayer); + } + } + //娓呴櫎鏈湴瀹氫綅鍧愭爣浣嶇疆 + function cleanLoclLay() { + if (locationMarker) { + map.removeOverLay(locationMarker); + } + } })(); -- Gitblit v1.8.0