可视化场景内任意绘制线段并测量距离_thingjs pickedposition-优快云博客

在数字孪生可视化场景中，可能会遇到这个问题，即需要测量数字孪生可视化场景中的不同目标之间的距离。通过这个测量，可以明确的知道可视化场景中各个目标的位置以及各个目标之间的距离，便于做出合理的规划。这个需求并不难，我们需要做的是确定需要测量的对象的坐标点起点和终点位置。

运行效果如下：

在ThingJS中要知道场景中两点间的空间距离可以通过调用三维空间内所有坐标点，计算两个坐标点的距离去量算出两点之间的空间距离，需要通过鼠标点击才能获取到两点之间的空间距离。比如我要知道场景中某两个场景距离有多长，就可以通过鼠标点击两个甚至多个场景位置，来计算三维场景中任意三维点的空间距离。下面一起看一下操作步骤：

1、添加注册事件，注册测量详情界面拖拽事件，设置可拖拽范围不能超出屏幕。

registerEvent() {
        var _this = this;
        // 注册测量详情界面关闭按钮点击事件
        $('#dataDetails .tj-close').on('click', function() {
            $('#dataDetails').css('display', 'none');
        });

        // 注册测量详情界面拖拽事件，设置可拖拽范围，不能超出屏幕
        $('#dataDetails .tj-title').on('mousedown', function(ev) {
            ev.preventDefault();
            var domEle = $('#dataDetails .tj-panel');
            var spacX = ev.pageX - domEle[0].offsetLeft;
            var spacY = ev.pageY - domEle[0].offsetTop;
            $(document).bind('mousemove', function(event) {
                var x = event.pageX - spacX;
                var y = event.pageY - spacY;
                if (event.pageX < 0 || event.pageX > $(window).width() || event.pageY < 0 || event.pageY > $(window).height()) {
                    $(document).unbind('mousemove');
                }
                if (x <= 0) x = 0;
                if (x > ($(window).width() - domEle.width())) {
                    x = $(window).width() - domEle.width();
                }
                if (y <= 0) y = 0;
                if (y > ($(window).height() - domEle.height())) {
                    y = $(window).height() - domEle.height();
                }
                domEle.css('left', x + 'px').css('top', y + 'px');
            });
        }).on('mouseup', function() {
            $(document).unbind('mousemove');
        });

        // 注册单击事件，创建测距线段实例
        app.on(THING.EventType.SingleClick, '*', function(e) {
            if (e.button == 0) {
                _this.lineNum++;
                let line = new Dr