无关风月
9 小时以前 e8044ee933b7e2f834855f28ea8575d82eb0eeac
ManagementOKTravel/guns-admin/src/main/webapp/static/modular/system/tSite/electricFence.js
@@ -1,196 +1,160 @@
var map = new AMap.Map('container',{
    resizeEnable: true,
    zoom:10
});
// 初始化地图
var map = new BMap.Map('container');
var point = new BMap.Point(114.329123,29.847218);
map.centerAndZoom(point, 10);
map.enableScrollWheelZoom();
var value = "";
map.getCity(
    callback=function (result) {
        value = result.city;
        drawBounds();
    }
);
var mouseTool = new AMap.MouseTool(map);
//监听draw事件可获取画好的覆盖物
// 全局变量
var coordinate = '';
var overlays = [];
var name = null;
var coordinate = '';//存储坐标
var objs = {//存储各种类型的覆盖物对象
    "polyline":[],
    "polygon":[],
    "rectangle":[],
    "circle":[]
var objs = {
    "polyline": [],
    "polygon": [],
    "rectangle": [],
    "circle": []
};
var editors = [];
mouseTool.on('draw',function(e){
    overlays.push(e.obj);
    console.log(e.obj.getPath());
    switch (name) {
        case 'polyline':{//折线图
            var polyline = e.obj.getPath();
            getCoordinate(polyline);
            objs.polyline.push(e.obj);
            break;
        }
        case 'polygon':{//多边形
            var polygon = e.obj.getPath();
            getCoordinate(polygon);
            objs.polygon.push(e.obj);
            break;
        }
        case 'rectangle':{//矩形
            var rectangle = e.obj.getPath();
            getCoordinate(rectangle);
            objs.rectangle.push(e.obj);
            break;
        }
        case 'circle':{//圆形
            var center = e.obj.getCenter();
            var radius = e.obj.getRadius();
            if(radius > 5000){
                Feng.error("创建电子围栏失败,圆半径不能大于5000米");
                return;
// 初始化绘图工具
var drawingManager = new BMapLib.DrawingManager(map, {
    isOpen: false,
    enableDrawingTool: true,
    drawingToolOptions: {
        anchor: BMAP_ANCHOR_TOP_RIGHT,
        offset: new BMap.Size(5, 5),
        drawingModes: [
            'polygon',    // 修改这里
            'circle'      // 修改这里
        ]
    },
    polygonOptions: {
        strokeColor: "#80d8ff",
        fillColor: "#00b0ff",
        strokeWeight: 2,
        strokeOpacity: 0.8
    },
    circleOptions: {
        strokeColor: "#80d8ff",
        fillColor: "#00b0ff",
        strokeWeight: 2,
        strokeOpacity: 0.8
    }
});
// 添加提示信息
function showDrawingTips() {
    var tips = document.createElement('div');
    tips.className = 'drawing-tips';
    tips.style.cssText = 'position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,0.8); padding: 5px 10px; border-radius: 4px; z-index: 1000;';
    tips.innerHTML = '提示:双击左键结束绘制';
    document.getElementById('container').appendChild(tips);
    // 3秒后自动消失
    setTimeout(function() {
        tips.style.display = 'none';
    }, 3000);
}
// 监听绘制完成事件
drawingManager.addEventListener('overlaycomplete', function(e) {
    console.log("绘制完成事件触发,类型:", e.type);
    var overlay = e.overlay;
    overlays.push(overlay);
    try {
        // 修改判断条件,使用字符串比较
        if (e.type === 'polygon') {
            var path = overlay.getPath();
            console.log("多边形路径点:", path);
            if (path && path.length > 0) {
                var str = '';
                for (var i = 0; i < path.length; i++) {
                    str += path[i].lat + ',' + path[i].lng + ';';
                }
                coordinate = str.substring(0, str.length - 1);
                objs.polygon.push(overlay);
                console.log("多边形绘制完成,当前坐标:", coordinate);
            } else {
                console.error("多边形路径点为空");
            }
            coordinate += center.lng + ',' + center.lat + ';' + radius + "_";
            objs.circle.push(e.obj);
            break;
        }
    }
    console.log(coordinate);
})
        } else if (e.type === 'circle') {
            var center = overlay.getCenter();
            var radius = overlay.getRadius();
            console.log("圆形中心点:", center, "半径:", radius);
var district = null;
var polygons=[];
function drawBounds() {
    if(value == ''){
        value = '北京市';
    }
    //加载行政区划插件
    if(!district){
        //实例化DistrictSearch
        var opts = {
            subdistrict: 0,   //获取边界不需要返回下级行政区
            extensions: 'all',  //返回行政区边界坐标组等具体信息
            level: 'district'  //查询行政级别为 市
        };
        district = new AMap.DistrictSearch(opts);
    }
    //行政区查询
    district.setLevel(document.getElementById('level').value)
    district.search(value, function(status, result) {
        map.remove(polygons)//清除上次结果
        polygons = [];
        var bounds = result.districtList[0].boundaries;
        if (bounds) {
            for (var i = 0, l = bounds.length; i < l; i++) {
                //生成行政区划polygon
                var polygon = new AMap.Polygon({
                    strokeWeight: 1,
                    path: bounds[i],
                    fillOpacity: 0.4,
                    fillColor: '#80d8ff',
                    strokeColor: '#0091ea'
                });
                polygons.push(polygon);
            if (center && radius) {
                if (radius > 5000) {
                    Feng.error("创建电子围栏失败,圆半径不能大于5000米");
                    map.removeOverlay(overlay);
                    return;
                }
                coordinate = center.lat + ',' + center.lng + ';' + radius;
                objs.circle.push(overlay);
                console.log("圆形绘制完成,当前坐标:", coordinate);
            } else {
                console.error("圆形参数不完整");
            }
        }
        map.add(polygons)
        map.setFitView(polygons);//视口自适应
    });
}
document.getElementById('find').onclick = function () {
    value = document.getElementById('district').value;
    if(value == ''){
        value = "北京市";
    } catch (error) {
        console.error("处理绘制完成事件时出错:", error);
    }
    drawBounds()
};
document.getElementById('district').onkeydown = function(e) {
    if (e.keyCode === 13) {
        value = document.getElementById('district').value;
        if(value == ''){
            value = "北京市";
        }
        drawBounds();
        return false;
    }
    return true;
};
});
// 绘制功能
function draw(type) {
    console.log("开始绘制,类型:", type);
    // 清除之前的坐标
    coordinate = '';
//处理坐标结果
function getCoordinate(arr){
    var str = '';
    for(var i = 0; i < arr.length; i++){
        var lng = arr[i].lng;
        var lat = arr[i].lat;
        str += lng + ',' + lat + ';';
    }
    coordinate += str.substring(0, str.length - 1) + "_";
}
function draw(type){
    switch(type){
        case 'marker':{
            mouseTool.marker({
                //同Marker的Option设置
            });
            break;
    try {
        switch (type) {
            case 'polygon': {
                drawingManager.setDrawingMode('polygon');  // 修改这里
                drawingManager.open();
                showDrawingTips();
                break;
            }
            case 'circle': {
                drawingManager.setDrawingMode('circle');   // 修改这里
                drawingManager.open();
                break;
            }
        }
        case 'polyline':{
            mouseTool.polyline({
                strokeColor:'#80d8ff'
                //同Polyline的Option设置
            });
            break;
        }
        case 'polygon':{
            mouseTool.polygon({
                fillColor:'#00b0ff',
                strokeColor:'#80d8ff'
                //同Polygon的Option设置
            });
            break;
        }
        case 'rectangle':{
            mouseTool.rectangle({
                fillColor:'#00b0ff',
                strokeColor:'#80d8ff'
                //同Polygon的Option设置
            });
            break;
        }
        case 'circle':{
            mouseTool.circle({
                fillColor:'#00b0ff',
                strokeColor:'#80d8ff'
                //同Circle的Option设置
            });
            break;
        }
    } catch (error) {
        console.error("设置绘制模式时出错:", error);
    }
}
var radios = document.getElementsByName('func');
for(var i=0;i<radios.length;i+=1){
    radios[i].onchange = function(e){
        draw(e.target.value)
        name = e.target.value;
    }
}
// draw('marker')
document.getElementById('clear').onclick = function(){
    map.remove(overlays)
// 添加一个直接获取坐标的函数
function getOverlayCoordinate(overlay) {
    try {
        if (overlay instanceof BMap.Polygon) {
            var path = overlay.getPath();
            if (path && path.length > 0) {
                var str = '';
                for (var i = 0; i < path.length; i++) {
                    str += path[i].lat + ',' + path[i].lng + ';';
                }
                return str.substring(0, str.length - 1);
            }
        } else if (overlay instanceof BMap.Circle) {
            var center = overlay.getCenter();
            var radius = overlay.getRadius();
            if (center && radius) {
                return center.lat + ',' + center.lng + ';' + radius;
            }
        }
    } catch (error) {
        console.error("获取坐标时出错:", error);
    }
    return '';
}
// 清除按钮事件
document.getElementById('clear').onclick = function() {
    map.clearOverlays();
    overlays = [];
    coordinate = '';
    objs.circle = [];
@@ -198,132 +162,125 @@
    objs.polygon = [];
    objs.polyline = [];
    closeEdit();
    console.log("清除后的坐标:", coordinate);
}
document.getElementById('close').onclick = function(){
    mouseTool.close()//关闭,并清除覆盖物
    for(var i=0;i<radios.length;i+=1){
// 关闭绘图按钮事件
document.getElementById('close').onclick = function() {
    drawingManager.close();
    for (var i = 0; i < radios.length; i++) {
        radios[i].checked = false;
    }
    closeEdit();
    console.log("关闭后的坐标:", coordinate);
}
//点击提交处理函数
function submitCoordinate(){
    var name = $('#addressName').val();
    if('' == name){
        Feng.error('请填写地址名称');
        return;
    }
    if('' == coordinate){
        Feng.error('请在地图上规划区域');
        return;
    }
    coordinate = coordinate.substring(0, coordinate.length - 1);
}
// 编辑所有覆盖物
function editAll() {
    coordinate = '';
    editors = [];
    //折线
    for(var i in objs.polyline){
        var polyline = objs.polyline[i];
        var polyEditor = new AMap.PolyEditor(map, polyline)
        polyEditor.on('addnode', function(event) {
            // log.info('触发事件:addnode')
        })
        polyEditor.on('adjust', function(event) {
            // log.info('触发事件:adjust')
        })
        polyEditor.on('removenode', function(event) {
            // log.info('触发事件:removenode')
        })
        polyEditor.on('end', function(e) {
            var polyline = e.target.getPath();
            getCoordinate(polyline);
        })
        editors.push(polyEditor);
        polyEditor.open();
    }
    //多边形
    for(var i in objs.polygon){
    // 多边形编辑
    for (var i in objs.polygon) {
        var polygon = objs.polygon[i];
        var polyEditor = new AMap.PolyEditor(map, polygon)
        polyEditor.on('addnode', function(event) {
            // log.info('触发事件:addnode')
        })
        polyEditor.on('adjust', function(event) {
            // log.info('触发事件:adjust')
        })
        polyEditor.on('removenode', function(event) {
            // log.info('触发事件:removenode')
        })
        polyEditor.on('end', function(e) {
            var polygon = e.target.getPath();
            getCoordinate(polygon);
        })
        editors.push(polyEditor);
        polyEditor.open();
        var polygonEditor = new BMapLib.PolygonEditor(map, polygon);
        polygonEditor.addEventListener('drawend', function(e) {
            var path = e.overlay.getPath();
            var str = '';
            for (var i = 0; i < path.length; i++) {
                str += path[i].lat + ',' + path[i].lng + ';';
            }
            coordinate = str.substring(0, str.length - 1);
            console.log("编辑后的坐标:", coordinate);
        });
        editors.push(polygonEditor);
        polygonEditor.open();
    }
    //矩形
    for(var i in objs.rectangle){
        var rectangle = objs.rectangle[i];
        var rectangleEditor = new AMap.RectangleEditor(map, rectangle)
        rectangleEditor.on('adjust', function(event) {
            // log.info('触发事件:adjust')
        })
        rectangleEditor.on('end', function(e) {
            var polygon = e.target.getPath();
            getCoordinate(polygon);
        })
        editors.push(rectangleEditor);
        rectangleEditor.open();
    }
    //圆形
    for(var i in objs.circle){
    // 圆形编辑
    for (var i in objs.circle) {
        var circle = objs.circle[i];
        var circleEditor = new AMap.CircleEditor(map, circle)
        circleEditor.on('move', function(event) {
            // log.info('触发事件:move')
        })
        circleEditor.on('adjust', function(e) {
            var radius = e.target.getRadius();
            if(radius > 5000){
        var circleEditor = new BMapLib.CircleEditor(map, circle);
        circleEditor.addEventListener('drawend', function(e) {
            var center = e.overlay.getCenter();
            var radius = e.overlay.getRadius();
            if (radius > 5000) {
                Feng.error("创建电子围栏失败,圆半径不能大于5000米");
                return;
            }
        })
        circleEditor.on('end', function(e) {
            var center = e.target.getCenter();
            var radius = e.target.getRadius();
            coordinate += center.lng + ',' + center.lat + ';' + radius + "_";
        })
            coordinate = center.lat + ',' + center.lng + ';' + radius;
            console.log("编辑后的坐标:", coordinate);
        });
        editors.push(circleEditor);
        circleEditor.open();
    }
}
// 关闭编辑
function closeEdit() {
    for(var i in editors){
        var editor = editors[i];
        editor.close();
    for (var i = 0; i < editors.length; i++) {
        editors[i].close();
    }
    editors = [];
}
// 添加提交函数
function submitCoordinate() {
    console.log("提交时的坐标:", coordinate);
    if (!coordinate || coordinate.trim() === '') {
        Feng.error('请在地图上规划区域');
        return false;
    }
    return coordinate;
}
// 测试函数
// 修改测试函数
function testCoordinate() {
    console.log("当前坐标值:", coordinate);
    console.log("当前覆盖物数量:", overlays.length);
    console.log("多边形数量:", objs.polygon.length);
    console.log("圆形数量:", objs.circle.length);
    // 尝试从最后一个覆盖物获取坐标
    if (overlays.length > 0) {
        var lastOverlay = overlays[overlays.length - 1];
        var newCoordinate = getOverlayCoordinate(lastOverlay);
        console.log("从最后一个覆盖物获取的坐标:", newCoordinate);
        if (newCoordinate) {
            coordinate = newCoordinate;
        }
    }
}
// 绑定单选按钮事件
var radios = document.getElementsByName('func');
for (var i = 0; i < radios.length; i++) {
    radios[i].onchange = function(e) {
        draw(e.target.value);
    }
}
// 在绘制完成后自动测试
drawingManager.addEventListener('overlaycomplete', function(e) {
    setTimeout(testCoordinate, 10); // 延迟1秒后测试
});
// 页面加载完成后初始化
$(document).ready(function() {
    // 初始化地图
    initMap();
    // 监听市区选择变化
    $("#areaCode").change(function() {
        console.log("市区选择变化,重新获取地图数据");
        getMapData();
    });
});
// 初始化地图
function initMap() {
    // 设置地图中心点和缩放级别
    var point = new BMap.Point(114.329123,29.847218);
    map.centerAndZoom(point, 15);
    map.enableScrollWheelZoom();
}