zoukankan      html  css  js  c++  java
  • three3D地图

    终于闲下来了,前段时间做了个项目,高精度精准定位系统,用到了three3D地图

    听起来是不是很炫酷?其实并不难。先把部分代码附上(文件比较多,只粘贴部分的)

    $(function () {
        if (!Detector.webgl) Detector.addGetWebGLMessage();
        var container = document.getElementById('container');
        var baseUrl = "http://172.16.51.21:8099"; //接口拼接
        var baseWs = '172.16.51.21'; //socket服务

        // 初始化场景、光和渲染器
        scene = new THREE.Scene();
        scene.background = new THREE.Color(0x2054B5);//设置背景色
        scene.add(new THREE.AmbientLight(0xffffff));
        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        container.appendChild(renderer.domElement);
        //yunfei-添加-start
        //控制网格宽度
        var grid = new THREE.GridHelper(1000, 1000, 0xffffff, 0x555555);
        scene.add(grid);
        //yunfei-添加-end
        //加载建筑楼房模型
        var loader = new THREE.KMZLoader();
        loader.load('file/map.kmz', function (kmz) {
            kmz.scene.position.y = 0.5;
            scene.add(kmz.scene);
            render();
        });
        //动态添加基站
        $.ajax({
            url: baseUrl+"/hals/getAnchorPoint",
            type: "GET",
            dataType: "json",
            success: function (dataSu) {
                for (let i in dataSu) {
                    var loader = new THREE.KMZLoader();
                    loader.load('file/station.kmz', function (kmz) {
                        kmz.scene.position.x = dataSu[i].x;
                        kmz.scene.position.y = dataSu[i].y;
                        kmz.scene.position.z = dataSu[i].z;
                        scene.add(kmz.scene);
                        render();
                    });
                }
            },
            error: function (err) {
                console.log('连接失败!')
            }
        });

        // 初始化相机和相机控制
        var aspect = window.innerWidth / window.innerHeight;
        camera = new THREE.PerspectiveCamera(45, aspect, 1, 10000);
        camera.position.set(-12, 15, 10);
        controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.target.set(0, aspect / 10, 1); //第一个参数控制鼠标拖动中心位置点
        controls.maxPolarAngle = Math.PI / 2.1;     //控制物体不能向下翻动
        controls.update();
        window.addEventListener('resize', onWindowResize, false);
        animate();

        var personList = {};
        //初始化动态标签按钮及勾选状态
        function showControllerBtn(personData) {
            if (personData == '连接成功') {
                return;
            } else {
                //根据推送数据创建人物
                if (!personList[personData.tmnId]) {
                    var person = new Person(personData);
                    person.loadTo(scene, renderer, camera);
                    personList[personData.tmnId] = person;
                    //创建人物标签
                    var liStr = `<div id="tag-${personData.tmnId}"style="margin-right:2px;" class="colSm_bordbai1" data-index="${personData.tmnId}">
                                        <span class='border_1'></span>
                                        <label style="margin-top:4px;cursor:pointer">${personData.tmnId}</label>
                                        <img class="colSm_img1" id="WifiImg_1" src="image/icon-selected.png">
                             </div>`;
                    $('.showControllerBtn').append(liStr);
                    //创建锚点距离
                    var debugObj = personData.debug;
                    for (let k in debugObj) {
                        var liStr = `<li class="cr number" data-index ="${personData.tmnId}" style="display:none;">
                                         <div>
                                            <span class="property-name">${k}</span>
                                            <span class="propertyJu" style="margin-left: 40px;">${debugObj[k]}</span>
                                         </div>
                                 </li>`;
                        $('.showDebug').append(liStr);
                    }
                } else {
                    //更新数据
                    person = personList[personData.tmnId];
                    person.moveTo(personData);
                    var debugObj = personData.debug;
                    var dls = [];
                    for (k in debugObj) {
                        dls.push(debugObj[k]);
                    }
                    var lis = $('.showDebug').find('.number[data-index='+personData.tmnId+']');
                    for (var i = 0; i < lis.length; i++) {
                        lis.eq(i).find('span:eq(1)').text(dls[i]);
                    }
                }

                $('.colSm_bordbai1').unbind('click').on('click', function () {
                    var index = $(this).attr('data-index');
                    var tagNum = $('.showControllerBtn').children();
                    $('.colSm_bordbai1').not($(this)).removeClass('active');
                    if ($(this).hasClass('active')) {
                        $(this).removeClass('active')
                        // 显示所有人
                        for (person in personList) {
                            personList[person].showModel(true);
                        }
                    } else {
                        $(this).addClass('active');
                        // 隐藏所有人
                        for (person in personList) {
                            if ($(this).attr('id').indexOf(person.tmnId) == -1) {
                                personList[person].showModel(false);
                            }
                        }
                    }
                    //处理标切换隐藏显示
                    var objec = $('.showDebug').children();
                    var attrObj = $(this).attr('data-index')
                    for (var i = 1; i < objec.length; i++) {
                        if (attrObj == objec[i].attributes[1].value && $(this).hasClass('active')) {
                            objec[i].style.display = 'block';
                            personList[$(this).attr('data-index')].showModel(true);
                        } else {
                            objec[i].style.display = 'none';
                        }
                    }
                });
            }
        }


        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
        function animate() {
            //  // 渲染循环
            requestAnimationFrame(animate);
            render();
        }

        function render() {
            renderer.render(scene, camera);
        }
        //点击关闭隐藏面板
        $('#closeControl').on('click', function () {
            $('#closeDesktop').hide();
            $('#openDesktop').show();
        })
        $('#openControl').on('click', function () {
            $('#closeDesktop').show();
            $('#openDesktop').hide();
        })
        //倾斜
        $('#btn_incline').on('click', function () {
            camera.position.set(-12, 15, 10);
            controls.update();
        })
        //俯视
        $('#btn_overlook').on('click', function () {
            camera.position.set(0, 25, 1);
            controls.update();
        })
        //左视
        $('#btn_leftView').on('click', function () {
            camera.position.set(-20, 0, 2);
            controls.update();
        })
        //右视
        $('#btn_rightView').on('click', function () {
            camera.position.set(20, 0, 2);
            controls.update();

        })
        //前视
        $('#btn_beforeView').on('click', function () {
            camera.position.set(-2, 5, 20);
            controls.update();
        })
        //后视
        $('#btn_laterView').on('click', function () {
            camera.position.set(-2, 5, -20);
            controls.update();
        })


        //人员推送信息
        connect();
        // var port = location.port;
        //websocket页面客户端接收服务端传过来的数据
        function connect() {
            //socket = new WebSocket("ws://localhost:9094/starManager/websocket/张三");
            var socket;
            if (typeof (WebSocket) == "undefined") {
                console.log("您的浏览器不支持WebSocket");
            } else {
                console.log("您的浏览器支持WebSocket");

                //实现化WebSocket对象,指定要连接的服务器地址与端口 建立连接
                //socket = new WebSocket("ws://localhost:9094/starManager/websocket/张三")
                socket = new WebSocket("ws://" + baseWs + ":8099/hals/websocket");
                //打开事件
                socket.onopen = function () {
                    console.log("Socket 已打开");
                    //socket.send("这是来自客户端的消息" + location.href + new Date());
                };
                //获得消息事件
                socket.onmessage = function (msg) {
                    var personData = JSON.parse(msg.data)
                    showControllerBtn(personData);
                    //发现消息进入 调后台获取
                    //getCallingList();
                };
                //关闭事件
                socket.onclose = function () {
                    console.log("Socket已关闭");
                };
                //发生了错误事件
                socket.onerror = function () {
                    alert("Socket发生了错误");
                }
                $(window).unload(function () {
                    socket.close();
                });
            }
        }
    })
  • 相关阅读:
    数据可视化之DAX篇(二十五)PowerBI常用的度量值:累计至今
    数据可视化之DAX篇(二十四)Power BI应用技巧:在总计行实现条件格式
    Type-generic math (Numerics) – C 中文开发手册
    Bootstrap4 卡片
    Linux let 命令
    PHP ftp_fput() 函数
    如何从SQL Server DateTime数据类型返回日期
    ID选择器 | ID selectors (Selectors) – CSS 中文开发手册
    git write-tree (Plumbing Commands) – Git 中文开发手册
    C 库函数 – strtod()
  • 原文地址:https://www.cnblogs.com/benmumu/p/9407655.html
Copyright © 2011-2022 走看看