1.优化我的界面的更新本地数据功能添加loding 2.优化巡检详情页面增大放大级别 3.优化我的界面的更新本地数据功能所有接口都结束后显示数据更新成功

zuoxiao

2025-02-21 986648a7fc5d377d5c100ba41350e6313dcf6e5b

 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》》》》》locationOverLay");
        //        console.log("function》》》》》locationOverLay");
        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》》》》》setCenterAndZoom>>>>lng:" + lng + ",lat:" + lat);
        //        console.log("function》》》》》setCenterAndZoom>>>>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》》》》》addMarker>>>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》》》》》addMarker>>>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 提供的接口，获取数据
        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);
    }

}

})();
)();