`,
position: marker.getLngLat(),
offset: new T.Point(0, 8),
opacity: 1,
});
label.setBorderLine(0);
label.setBackgroundColor("transparent");
label.setFontColor("#FFFFFF");
label.setFontSize(10);
marker.label = label;
if (isRed) {
lastClickedMarker = marker;
}
// 将标记和标签存储到数组中
waterIntakeMarkers.push({
marker: marker,
label: label
});
if (isShow === "true" || isShow === true) {
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 = [];
var lineLayer = new T.Polyline([], { color: '#E9900A', weight: 3, opacity: 0.8 });
let locationMarker;
function updateInspectionLocation(log, lat) {
var lastLat = lat;
var newPoint = new T.LngLat(log, lastLat);
path.push(newPoint);
lineLayer.setLngLats(path);
map.addOverLay(lineLayer);
}
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: '#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, true);
}
function mapMoveEnd(e) {
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);
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)
});
}
//添加分水房
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》》》》》addMarker>>>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: `
${name}
`,
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);
}
}
)();