监管gis，两侧背景图颜色调整

sgj

2026-03-25 a1282a38396443dff9b8406d1b7145cebdb5259d

 fzzy-igdss-web/src/main/resources/static/security/patrol-record.js

@@ -5,10 +5,10 @@
        layer = layui.layer;
    });
});

function initMap() {
    // 可删除代码开始
    // 检查百度地图API是否加载成功
    if (typeof BMapGL === 'undefined') {
    // 检查高德地图API是否加载成功
    if (typeof AMap === 'undefined') {
        layer.msg("地图加载失败，请检查网络连接！", {icon: 2});
        return;
    }
@@ -23,54 +23,60 @@
    // 检查数据
    if (!patrolRecordList || patrolRecordList.length === 0) {
        layer.msg("暂无轨迹数据！", {icon: 2});
        var defaultPoint = new BMapGL.Point(116.404, 39.915);
        map.centerAndZoom(defaultPoint, 12);
        map.enableScrollWheelZoom(true);
        var defaultPoint = [116.404, 39.915]; // 高德地图使用数组格式[经度,纬度]
        map = new AMap.Map("map", {
            zoom: 12,
            center: defaultPoint
        });
        return;
    }
    //可删除代码结束

    // ========== 百度地图初始化与轨迹渲染 ==========
    // ========== 高德地图初始化与轨迹渲染 ==========
    // 1. 初始化地图
    var map = new BMapGL.Map("map");
    var map = new AMap.Map("map", {
        zoom: 13,
        center: [116.404, 39.915] // 默认中心点
    });

    // 2. 获取轨迹点数据
    if (patrolRecordList.length === 0) {
        layer.msg("暂无轨迹数据！", {icon: 2});
        var defaultPoint = new BMapGL.Point(116.404, 39.915);
        map.centerAndZoom(defaultPoint, 14);
        map.enableScrollWheelZoom(true);
        map.setZoom(14);
        return;
    }


    // 3. 构造轨迹点数组和标记点数组
    var points = [];       // 轨迹折线点
    var points = [];       // 轨迹坐标点
    var markers = [];      // 地图标记点
    var cardElements = document.querySelectorAll('.track-card'); // 所有卡片元素



    patrolRecordList.forEach(function (record, index) {
        var lng = record.longitude;
        var lat = record.latitude;
        var point = new BMapGL.Point(lng, lat);
        var point = [lng, lat]; // 高德地图使用数组格式[经度,纬度]
        points.push(point);

        // 创建地图标记点
        var marker = new BMapGL.Marker(point);
        var marker = new AMap.Marker({
            position: point,
            map: map
        });
        markers.push(marker);

        // 标记点弹窗信息
        var infoWindow = new BMapGL.InfoWindow(`
                <div style="font-size: 12px; line-height: 1.8;">
        var infoWindow = new AMap.InfoWindow({
            content: `
                <div style="font-size: 12px; line-height: 1.8; padding: 10px;">
                    <p><strong>巡检人：</strong>${record.createBy}</p>
                    <p><strong>巡检时间：</strong>${new Date(record.createTime).toLocaleString()}</p>
                    <p><strong>经纬度：</strong>${lat}, ${lng}</p>
                </div>
            `);
            `,
            offset: new AMap.Pixel(0, -30)
        });

        // 标记点点击事件：高亮对应卡片 + 显示弹窗
        marker.addEventListener("click", function () {
        marker.on('click', function () {
            // 移除所有卡片的active样式
            cardElements.forEach(el => el.classList.remove('active'));
            // 高亮当前卡片
@@ -78,7 +84,7 @@
            // 滚动到当前卡片
            cardElements[index].scrollIntoView({behavior: 'smooth', block: 'center'});
            // 显示弹窗
            this.openInfoWindow(infoWindow);
            infoWindow.open(map, point);
        });

        // 卡片点击事件：定位到对应标记点 + 高亮卡片
@@ -88,74 +94,36 @@
            // 高亮当前卡片
            this.classList.add('active');
            // 地图中心定位到当前标记点
            map.centerAndZoom(point, 15);
            map.setCenter(point);
            map.setZoom(15);
            // 显示标记点弹窗
            marker.openInfoWindow(infoWindow);
            // 轻微动画效果
            marker.setAnimation(BMAP_ANIMATION_BOUNCE);
            setTimeout(() => marker.setAnimation(null), 1500);
            infoWindow.open(map, point);
            // 轻微动画效果（高德地图没有直接的bounce动画，可以使用跳动效果）
            marker.setAnimation('AMAP_ANIMATION_DROP');
        });

        map.addOverlay(marker);
    });

    // 寻找points中间的点位
    // 寻找points中间的点位作为中心点
    var midIndex = Math.floor(points.length / 2);
    const centerPoint = points[midIndex] || new BMapGL.Point(116.404, 39.915);
    map.centerAndZoom(centerPoint, 13); // 14为地图缩放级别
    var centerPoint = points[midIndex] || [116.404, 39.915];
    map.setCenter(centerPoint);

    // 4. 绘制轨迹折线
    var polyline = new BMapGL.Polyline(points, {
    var polyline = new AMap.Polyline({
        path: points,
        strokeColor: "#1890ff", // 主色调：蓝色
        strokeWeight: 6,        // 折线宽度
        strokeOpacity: 0.8,     // 透明度
        strokeStyle: 'solid'    // 实线
        isOutline: true,
        outlineColor: '#ffffff',
        borderWeight: 1
    });
    map.addOverlay(polyline);
    map.add(polyline);

    // // 5. 起点/终点特殊标记
    // // 起点标记
    // var startMarker = new BMapGL.Marker(points[0], {
    //     icon: new BMapGL.Icon("http://api.map.baidu.com/img/markers.png", new BMapGL.Size(25, 34), {
    //         offset: new BMapGL.Size(12, 34),
    //         imageOffset: new BMapGL.Size(0, 0) // 起点图标
    //     })
    // });
    // map.addOverlay(startMarker);
    // // startMarker.setLabel(new BMapGL.Label("起点：" + patrolRecordList[0].pointName, {
    // //     offset: new BMapGL.Size(30, -15),
    // //     styles: {fontSize: '12px', color: '#fff', background: '#52c41a', padding: '0px 14px', borderRadius: '3px'}
    // // }));
    // startMarker.setLabel(new BMapGL.Label("起点：" + patrolRecordList[0].pointName, {
    //     offset: new BMapGL.Size(30, -15),
    //     styles: {
    //         fontSize: '12px',
    //         color: '#fff',
    //         background: '#52c41a',
    //         padding: '8px 8px',  // 左右padding保持一致（14px），保证背景两侧空间对称
    //         borderRadius: '3px',
    //         textAlign: 'center'  // 新增：强制文字在背景内水平居中
    //     }
    // }));
    //
    // // 终点标记
    // var endMarker = new BMapGL.Marker(points[points.length - 1], {
    //     icon: new BMapGL.Icon("http://api.map.baidu.com/img/markers.png", new BMapGL.Size(25, 34), {
    //         offset: new BMapGL.Size(12, 34),
    //         imageOffset: new BMapGL.Size(-114, 0) // 终点图标
    //     })
    // });
    // map.addOverlay(endMarker);
    // endMarker.setLabel(new BMapGL.Label("终点：" + patrolRecordList[patrolRecordList.length - 1].pointName, {
    //     offset: new BMapGL.Size(30, -15),
    //     styles: {fontSize: '12px', color: '#fff', background: '#ff4d4f', padding: '0px 14px', borderRadius: '3px'}
    // }));
    // 5. 地图自适应所有轨迹点
    map.setFitView();

    // 6. 地图自适应所有轨迹点
    map.enableScrollWheelZoom(true); // 开启滚轮缩放
    map.setViewport(points); // 适配所有轨迹点

    // 7. 初始提示
    // 6. 初始提示
    layer.msg("轨迹加载完成！点击卡片可定位到对应点位", {
        icon: 1,
        time: 3000,
@@ -164,4 +132,4 @@
}

// 页面加载完成后初始化地图
window.onload = initMap;
window.onload = initMap;