电子围栏可视化，提高安全运维效率_vue 电子围栏模型加人员定位-优快云博客

现代工业化的推进在极大加速现代化进程的同时也带来的相应的安全隐患，在传统的监控领域，一般都是基于Web前端技术来实现 2D 可视化监控，本文采用ThingJS来构造轻量化的 3D 可视化场景，该3D场景展示了一个现代化商场的数字孪生可视化场景，包括人员的实时位置、电子围栏的范围、现场的安全情况等等，帮助直观的了解当前人员的安全状况。

电子围栏又称周界防盗报警系统，监控防区工作状态，实景中的电子围栏系统用于农业、畜牧业，以及监狱、军事设施等安全敏感地区。ThingJS平台上，电子围栏指的是一个区域，使用PolygonRegion属性。创建物体对象或模型并开启移动功能，即可开始检测目标点是否进入电子围栏区域，判断true或false显示告警反应。

本篇文章通过对数字孪生可视化场景的搭建和模型的加载，人物实时定位代码的实现、电子围栏和轨迹图的实现进行阐述，了解如何通过使用ThingJS实现一个简单的3D电子围栏可视化。

// 添加电子围栏
    new THING.widget.Button('添加电子围栏', function() {
        // 构成多边形的点（取世界坐标系下的坐标）
        points = [
            [81, 0.5, 63],
            [81, 0.5, 52],
            [72, 0.5, 52],
            [72, 0.5, 63]
        ];
        if (polygonMarker) { return; }
        // 创建电子围栏（区域）
        polygonMarker = app.create({
            type: 'PolygonRegion',
            points: points, // 传入世界坐标系下点坐标
            style: {
                regionOpacity: .6,
                regionColor: '#3CF9DF', // 区域颜色
                lineColor: '#3CF9DF' // 线框颜色
            }
        });
        // 设置永远在最上层显示
        polygonMarker.style.alwaysOnTop = false;
    })

当人物或物体对象出发警报时，有2种方式提醒注意，一是踏足的禁区围栏颜色发生改变；二是展示面板显示报警信息，可视化监控目标点的移动范围。

完整代码如下：

// 添加图片标注
    new THING.widget.Button('添加图片标注', function() {
        var coord = [83, 0.5, 61];
        if (marker1) { return; }
        // 创建目标点(marker)
        marker1 = app.create({
            type: "Marker",
            id: "marker1",
            url: "/guide/examples/images/navigation/user.png",
            position: coord,
            size: 1
        })
    })

    var point = [
        [81, 63],
        [81, 52],
        [72, 52],
        [72, 63]
    ];
    //