终于闲下来了,前段时间做了个项目,高精度精准定位系统,用到了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="data: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();
            });
        }
    }
})

three3D地图的更多相关文章

  1. three3D地图设置两点之间的连线

    点:可以用THREE.Vector3D来表示 现在来看看怎么定义个点,假设有一个点x=4,y=8,z=9.你可以这样定义它: var point1 = new THREE.Vecotr3(4,8,9) ...

  2. Java 征途:行者的地图

    前段时间应因缘梳理了下自己的 Java 知识体系, 成文一篇望能帮到即将走进或正在 Java 世界跋涉的程序员们. 第一张,基础图 大约在 2003 年我开始知道 Java 的(当时还在用 Delph ...

  3. 【详细教程】论android studio中如何申请百度地图新版Key中SHA1值

    一.写在前面 现在越来越多的API接口要求都要求提供我们的项目SHA1值,开发版目前还要求不高,但是发布版是必定要求的.而目前定位在各大APP中也较为常见,当下主流的百度地图和高德地图都在申请的时候会 ...

  4. C# 程序中嵌入百度地图

    本例是对WinForm中使用百度地图的简要介绍.百度地图目前支持Android开发,IOS开发,Web开发,服务接口,具体可以参照'百度地图开放平台'. [动态加载百度地图]涉及到的知识点: WebB ...

  5. 高德地图api实现地址和经纬度的转换(python)

    利用高德地图web服务api实现地理/逆地址编码 api使用具体方法请查看官方文档 文档网址:http://lbs.amap.com/api/webservice/guide/api/georegeo ...

  6. Highcharts中国地图热力图

    最近有个项目需要将MC销量按大陆各省统计,并以中国地图人力图效果显示.由于项目一直使用Highcharts进行图表的统计,故采用Highmaps来实现. 效果如下: 1)中国各个省.直辖市.自治区: ...

  7. arcgis api for js入门开发系列六地图分屏对比(含源代码)

    上一篇实现了demo的地图标绘模块,本篇新增地图地图分屏对比模块,截图如下(源代码见文章底部): 对效果图的简单介绍一下,在demo只采用了两分屏对比,感兴趣的话,可以在两分屏的基础上拓展,修改css ...

  8. arcgis api for js入门开发系列五地图态势标绘(含源代码)

    上一篇实现了demo的地图查询功能,本篇新增地图态势标绘模块,截图如下: 本篇核心的在于调用API的Draw工具:https://developers.arcgis.com/javascript/3/ ...

  9. arcgis api for js入门开发系列四地图查询(含源代码)

    备注:由于实现本篇功能的需求,修改了地图数据的dlsearch.mxd,然后更新了地图服务,需要的在文章最后有提供最新的mxd以及源代码下载的 上一篇实现了demo的地图工具栏,本篇新增地图查询功能, ...

随机推荐

  1. Rails 5 Test Prescriptions 第4章 什么制造了伟大的测试

    伴随着程序成长,测试变长,复杂性增加,如何更高效的写测试,对以后开发不会造成麻烦. 测试本身没发被测试,所以一定要清楚,可控.不要加循环,不要过于复杂的自动编程. Cost and Value 成本和 ...

  2. vue全家桶实现笔记本功能

    一个通过vue实现的练手小项目,数据保存和导出通过node进行处理 成品截图: 安装vue-cli,webpack: cnpm install webpack -g cnpm install vue- ...

  3. Mybatis四种分页方式

    数组分页 查询出全部数据,然后再list中截取需要的部分. mybatis接口 List<Student> queryStudentsByArray(); xml配置文件 <sele ...

  4. python numpy 学习

    例子 >>> import numpy as np >>> a = np.arange(15).reshape(3, 5) >>> a array ...

  5. oracle用户 密码永不过期

    ALTER PROFILE DEFAULT LIMIT PASSWORD_LIFE_TIME UNLIMITED;

  6. HDU 1045 dfs + 回溯

    题目链接:http://acm.hrbust.edu.cn/vj/index.php?/vj/index.php?c=&c=contest-contest&cid=134#proble ...

  7. 流程设计器jQuery + svg/vml(Demo2 - UI界面增加属性显示)

    设计器UI界面有了,接下来结点的属性怎么显示呢,采用弹窗的话觉得不方便用户:用easyui的propertygrid在最右边显示,又觉得要引入easyui,使得插件变复杂了:最后决定自己写. 1.实现 ...

  8. mysql 多条语句合并查询

    select count(*) from matches where StartTime > 1519315200 and endtime < 1519401600 and matchty ...

  9. Swift自定义头视图和尾视图

    var data: [[String]]! override func viewDidLoad() { super.viewDidLoad() // Do any additional setup a ...

  10. BZOJ2121: 字符串游戏(DP)(字符串删单词,求最多可以删去多少)

    2121: 字符串游戏 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 672  Solved: 376[Submit][Status][Discuss ...