From 51e977ecf8b086b5402271486fb87c2f57d641f2 Mon Sep 17 00:00:00 2001
From: zuoxiao <470321431@qq.com>
Date: 星期四, 02 一月 2025 09:23:24 +0800
Subject: [PATCH] 添加视频上传的部分功能
---
app/src/main/assets/js/map.js | 368 +++++++++++++++++++++++++++++++---------------------
1 files changed, 221 insertions(+), 147 deletions(-)
diff --git a/app/src/main/assets/js/map.js b/app/src/main/assets/js/map.js
index 760cee6..a13de46 100644
--- a/app/src/main/assets/js/map.js
+++ b/app/src/main/assets/js/map.js
@@ -1,14 +1,40 @@
(function () {
- // 鍥剧墖璺緞
- const locationIMGPath = 'img/location.png';
- const markerBalckPath = 'img/marker_black.svg';
- const markerRedPath = 'img/marker_red.svg';
- const markerBluePath = 'img/marker_blue.svg';
+ // 寤鸿灏嗚繖浜涘父閲忕Щ鍒颁竴涓厤缃璞′腑缁熶竴绠＄悊
+ const CONFIG = {
+ IMAGES: {
+ LOCATION: 'img/location.png',
+ MARKER_BLACK: 'img/marker_black.svg',
+ MARKER_RED: 'img/marker_red.svg',
+ MARKER_BLUE: 'img/marker_blue.svg',
+ CENTER_PIN: 'img/push_pin.svg'
+ },
+ MAP: {
+ DEFAULT_ZOOM: 12,
+ TIANDITU_KEY: 'd8beed89b43160a9a185e5aff431f85d'
+ }
+ };
let map;
let lastMarker = null;
let lastClickedMarker = null;
let isShowWaterIntakeDetail = false;
let zoom = 12;
+
+ // 灏嗘柟娉曟寕杞藉埌 window 涓�
+ function mountMethodToWindow() {
+ window.locationOverLay = locationOverLay;
+ window.showToast = showToast;
+ window.addMarker = addMarker;
+ window.setCenterAndZoom = setCenterAndZoom;
+ window.updateLocation = updateLocation;
+ window.aginShowLocation = aginShowLocation;
+ window.cleanLocationLay = cleanLocationLay;
+ window.updateInspectionLocation = updateInspectionLocation;
+ window.cleanLoclLay = cleanLoclLay;
+ window.showPin = showPin;
+ window.cancelPin = cancelPin;
+ window.refreshMarker = refreshMarker;
+
+ }
document.addEventListener('DOMContentLoaded', function () {
@@ -18,10 +44,7 @@
mountMethodToWindow();
});
- window.onload = function () {
- //鍔犺浇鍧愭爣鐐�
- window.Android.loadMarker();
- };
+
// 鍒濆鍖栧湴鍥�
function initMap() {
// 褰卞儚搴曞浘
@@ -30,12 +53,12 @@
"&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=d8beed89b43160a9a185e5aff431f85d";
//鍒涘缓鑷畾涔夊浘灞傚璞�
//褰卞儚娉ㄨ锛堝湴鍥句笂鐨勫湴鍧�锛�
- 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 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] };
+ var config = { layers: [lay, lay2] };
map = new T.Map("mapDiv", config);
var scale = new T.Control.Scale();
//娣诲姞姣斾緥灏烘帶浠�
@@ -47,7 +70,7 @@
// 鍦板浘鐐瑰嚮鍚庤幏鍙栫粡绾害
function getLngLat(lnglat) {
console.log(lnglat.lng.toFixed(6) + "," + lnglat.lat.toFixed(6));
- addClickOverLay(lnglat);
+ // addClickOverLay(lnglat);
}
// 鐐瑰嚮鍚庢坊鍔犲潗鏍囩偣
@@ -86,47 +109,6 @@
}
}
- // 妯℃嫙娣诲姞鍙栨按鍙ｆ爣娉�
- function buttonOverLay() {
- map.clearOverLays(); // 娓呯悊鍦板浘涓婄殑鎵�鏈夎鐩栫墿
-
- let data_info = [
- [116.417854, 39.921988, "235鍙栨按鍙�"],
- [116.406605, 39.921585, "237鍙栨按鍙�"],
- [116.412222, 39.912345, "236鍙栨按鍙�"]
- ];
-
- for (let i = 0; i < data_info.length; i++) {
- let icon = new T.Icon({
- iconUrl: markerBluePath,
- iconSize: new T.Point(27, 27),
- iconAnchor: new T.Point(10, 25)
- });
-
- let marker = new T.Marker(
- new T.LngLat(data_info[i][0], data_info[i][1]), // 鍒涘缓鏍囨敞
- { icon: icon }
- );
-
- marker.addEventListener("click", function (data) {
- addMarkerListener(data);
- });
-
- map.addOverLay(marker); // 灏嗘爣娉ㄦ坊鍔犲埌鍦板浘涓�
-
- let label = new T.Label({
- text: data_info[i][2],
- position: marker.getLngLat(),
- offset: new T.Point(-50, 10), // 璁剧疆鏍囨敞鏂囧瓧鐨勪綅缃�
- opacity: 1, // 璁剧疆鏂囨湰鐨勬樉绀轰笉閫忔槑搴︼紙鑼冨洿0-1锛�
- });
- label.setBorderLine(0); // 璁剧疆鏂囨湰鐨勮竟妗嗙嚎瀹�
- label.setBackgroundColor("transparent"); // 璁剧疆鏂囨湰鐨勮儗鏅壊锛堥�忔槑鑹诧級
- label.setFontColor("#0000FF");
- label.setFontSize(10);
- map.addOverLay(label);
- }
- }
// 鏄剧ず鏍囨敞鐐瑰嚮鍚庣殑绐楀彛
function openInfo(content, e) {
@@ -141,33 +123,28 @@
function locationOverLay(lng, lag) {
console.log("function銆嬨�嬨�嬨�嬨�媗ocationOverLay");
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)
+ 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: icon });
+ let marker = new T.Marker(
+ new T.LngLat(lng, lag),
+ { icon: icon }
+ );
map.addOverLay(marker);
}
//璁剧疆鍦板浘涓績鐐�
- function setCenterAndZoom(lng, lat,thiszoom) {
- zoom=thiszoom;
+ function setCenterAndZoom(lng, lat, thiszoom) {
+ zoom = thiszoom;
console.log("function銆嬨�嬨�嬨�嬨�媠etCenterAndZoom>>>>lng:" + lng + ",lat:" + lat);
map.centerAndZoom(new T.LngLat(lng, lat), zoom);
}
- // 灏嗘柟娉曟寕杞藉埌 window 涓�
- function mountMethodToWindow() {
- window.locationOverLay = locationOverLay;
- window.showToast = showToast;
- window.addMarker = addMarker;
- window.setCenterAndZoom = setCenterAndZoom;
- window.updateLocation=updateLocation;
- }
+
// 璋冪敤鍘熺敓瀹夊崜鏂规硶鏄剧ず鍙栨按鍙ｈ鎯�
function showWaterIntakeDetail(data) {
@@ -177,113 +154,210 @@
// 璋冪敤鍘熺敓瀹夊崜鏂规硶闅愯棌鍙栨按鍙ｈ鎯�
function closeWaterIntakeDetail(data) {
- if (lastClickedMarker !== null) {
- // 濡傛灉鏈夌偣鍑诲彇姘村彛鍒欏皢鍙栨按鍙ｆ仮澶嶆垚榛戣壊
- // 涓婃鐐瑰嚮鐨勬爣娉ㄦ敼涓洪粦鑹�
- var defaulticon = new T.Icon({
- iconUrl: markerBluePath,
- iconSize: new T.Point(27, 27),
- iconAnchor: new T.Point(10, 25)
- });
- lastClickedMarker.setIcon(defaulticon);
+ if (!isShowCenterPin) {
+ if (lastClickedMarker !== null) {
+ lastClickedMarker.setIcon(createIcon(CONFIG.IMAGES.MARKER_BLUE));
+ }
+ if (isShowWaterIntakeDetail) {
+ // 鍋囧鏄剧ず浜嗗彇姘村彛璇︽儏鍒欓殣钘忓彇姘村彛璇︽儏
+ isShowWaterIntakeDetail = false;
+ window.Android.closeWaterIntakeView();
+ } else {
+ // 鍋囧娌℃湁鏄剧ず鍙栨按鍙ｅ垯娣诲姞鐐瑰嚮鐨勫潗鏍�
+ getLngLat(data.lnglat);
+ }
}
- if (isShowWaterIntakeDetail) {
- // 鍋囧鏄剧ず浜嗗彇姘村彛璇︽儏鍒欓殣钘忓彇姘村彛璇︽儏
- isShowWaterIntakeDetail = false;
- window.Android.closeWaterIntakeView();
- } else {
- // 鍋囧娌℃湁鏄剧ず鍙栨按鍙ｅ垯娣诲姞鐐瑰嚮鐨勫潗鏍�
- getLngLat(data.lnglat);
- }
+
}
// 鐐瑰嚮鏍囨敞鐨勪簨浠�
- function addMarkerListener(data) {
- chageMarkerIcon(data);
- showWaterIntakeDetail("妯℃嫙鏁版嵁");
+ function addMarkerListener(id, data) {
+ if (!isShowCenterPin) {
+ chageMarkerIcon(data);
+ showWaterIntakeDetail(id);
+ }else {
+ showToast("褰撳墠姝ｅ湪淇敼閫変腑鍙栨按鍙ｇ殑缁忕含搴︼紝瀹屾垚鎴栭��鍑哄悗鎵嶅彲閫夋嫨鍏朵粬锛�");
+ }
+
}
// 淇敼鐐瑰嚮鏍囨敞鐨勫浘鏍�
function chageMarkerIcon(data) {
// 鐐瑰嚮鐨勬爣娉ㄦ敼涓虹孩鑹�
var currentMarker = data.target;
- // 鐐瑰嚮鍚庡浘鏍�
- var clickedIcon = new T.Icon({
- iconUrl: markerRedPath,
- iconSize: new T.Point(27, 27),
- iconAnchor: new T.Point(10, 25)
- });
- // 璁剧疆褰撳墠鐐瑰嚮鐨� marker 涓虹偣鍑诲悗鍥炬爣
- currentMarker.setIcon(clickedIcon);
- // 鍒ゆ柇鐐瑰嚮鐨勪笉鏄悓涓�涓潗鏍�
+ currentMarker.setIcon(createIcon(CONFIG.IMAGES.MARKER_RED));
+
if (lastClickedMarker !== null) {
if (!isEqualsLngLat(data.target.getLngLat(), lastClickedMarker.getLngLat())) {
- var defaulticon = new T.Icon({
- iconUrl: markerBluePath,
- iconSize: new T.Point(27, 27),
- iconAnchor: new T.Point(10, 25)
- });
- lastClickedMarker.setIcon(defaulticon);
+ lastClickedMarker.setIcon(createIcon(CONFIG.IMAGES.MARKER_BLUE));
}
}
lastClickedMarker = data.target;
+ map.panTo(currentMarker.getLngLat());
}
//璋冨畨鍗撳師鐢�
- function showToast() {
+ function showToast(data) {
// 璋冪敤 JavaScript 鎺ュ彛瀵硅薄鐨勬柟娉�
- window.Android.showToast('Hello, Android!');
+ window.Android.showToast(data);
}
// 鍒ゆ柇涓や釜鍧愭爣鏄惁涓�鑷�
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(jsonData) {
- 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)
+ function addMarker(id, lng, lat, name, isRed) {
+ console.log("function銆嬨�嬨�嬨�嬨�媋ddMarker>>>id:" + id);
+
+ const iconUrl = isRed ? CONFIG.IMAGES.MARKER_RED : CONFIG.IMAGES.MARKER_BLUE;
+ let marker = new T.Marker(
+ new T.LngLat(lng, lat),
+ { icon: createIcon(iconUrl) }
+ );
+ //娣诲姞鐐瑰嚮浜嬩欢
+ marker.addEventListener("click", (data) => {
+ addMarkerListener(id, data)
});
- 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 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锛�
});
- return "addMarker鍔犺浇鎴愬姛"
+ 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); // 灏嗘爣娉ㄦ坊鍔犲埌鍦板浘涓�
+ return "addMarker鍔犺浇鎴愬姛 id:" + id
+ }
+ //鏇存柊浣嶅潗鏍�
+ function updateLocation(log, lat) {
+ if (locationMarker) {
+ 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: icon }
+ );
+ map.addOverLay(locationMarker);
+ map.panTo(newPoint);
}
//淇濆瓨瀹氫綅鍧愭爣鐢熸垚杞ㄨ抗
- var path=[];
- function updateLocation(lat,log){
- var newPoint = new T.LatLng(latitude, longitude);
+ var path = [];
+ 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);
- var polyline = new T.Polyline({
- path: path, // 杞ㄨ抗鍧愭爣
- strokeColor: "#FF0000", // 杞ㄨ抗棰滆壊
- strokeWeight: 6, // 杞ㄨ抗绾垮
- strokeOpacity: 0.7 // 杞ㄨ抗閫忔槑搴�
- });
- map.addOverlay(polyline);
- // 绉诲姩鍦板浘瑙嗚鍒版渶鍚庝竴涓綅缃�
- map.panTo(newPoint);
+ lineLayer.setLngLats(path);
+ map.addOverLay(lineLayer);
+ // 绉诲姩鍦板浘瑙嗚鍒版渶鍚庝竴涓綅缃�
+
+ // }, 500);
}
+ var aginPath = [];
+ var oldLineLayer = new T.Polyline([], { color: '#E9900A', weight: 3, opacity: 0.8 });
+ //鏄剧ず鍥犲紓甯稿叧闂殑宸℃璁板綍
+ function aginShowLocation(lng, lat) {
+ // 璋冪敤 Android 鎻愪緵鐨勬帴鍙ｏ紝鑾峰彇鏁版嵁
+ 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);
+ }
+ }
+
+ //鏄惁鏄剧ず浜嗗湴鍥句腑蹇冪殑閽堢敤鏉ヤ慨鏀瑰潗鏍�
+ var isShowCenterPin;
+ //寮�濮嬭幏鍙栧睆骞曚腑闂村畾浣�
+ function showPin(lng, lat) {
+ var newPoint = new T.LngLat(lng, lat);
+ map.panTo(newPoint);
+ isShowCenterPin = true;
+ map.addEventListener("moveend", mapMoveEnd);
+ window.Android.refreshCenter(map.getCenter().getLng(), map.getCenter().getLat());
+ return true;
+ }
+ //鍙栨秷淇敼瀹氫綅
+ function cancelPin() {
+ isShowCenterPin = false;
+ }
+
+ //鎴愬姛淇敼鍙栨按鍙ｇ粡绾害鍚庡埛鏂板彇姘村彛浣嶇疆
+ function refreshMarker(id, lng, lat, name) {
+ map.removeOverLay(lastClickedMarker.label);
+ map.removeOverLay(lastClickedMarker);
+ addMarker(id, lng, lat, name, true);
+ }
+
+
+ function mapMoveEnd(e) {
+ debounce(() => {
+ const center = e.target.getCenter();
+ window.Android.refreshCenter(center.getLng(), center.getLat());
+ }, 300);
+ }
+
+ // 娣诲姞闃叉姈鍑芥暟
+ function debounce(fn, delay) {
+ let timer = null;
+ return function() {
+ if(timer) clearTimeout(timer);
+ timer = setTimeout(() => {
+ fn.apply(this, arguments);
+ }, delay);
+ }
+ }
+
+
+
+ // 鍒涘缓marker鍥炬爣鐨勬柟娉曞彲浠ユ娊鍙栧嚭鏉ュ鐢�
+ function createIcon(iconUrl, size = 28) {
+ return new T.Icon({
+ iconUrl: iconUrl,
+ iconSize: new T.Point(size, size),
+ iconAnchor: new T.Point(size/2, size)
+ });
+ }
})();
--
Gitblit v1.8.0