终于闲下来了,前段时间做了个项目,高精度精准定位系统,用到了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. android--------Universal-Image-Loader图片加载框架和结合LruCache缓存图片

    本博客包含包含Android-Universal-Image-Loader 网络图片加载框架实现图片加载和结合universal-image-loader与LruCache来自定义缓存图片,可以设置缓 ...

  2. UVA-1613 K-Graph Oddity (着色问题)

    题目大意:一张n个顶点.m条边的无向连通图,用k种颜色着色(相邻顶点颜色不能相同),其中k为不小于点的最大度数的最小奇数. 题目分析:水题一道.建张图深搜一下就行了. # include<ios ...

  3. oracle用户 密码永不过期

    ALTER PROFILE DEFAULT LIMIT PASSWORD_LIFE_TIME UNLIMITED;

  4. SSRS 在使用矩阵的时候,隐藏掉一列空白值

    SSRS 在使用矩阵的时候会因为数据集中含有NULL导致出现一列空白值 数据结果如图: 然后以houseid 作为矩阵组列,productcode作为行, 列名196前面多出就是NUll的列,那么我们 ...

  5. JBOSS context root 项目名字默认不写

    进到 %JBOSS_HOME%/configuration/standalone.xml,修改下面节点 <virtual-server name="localhost" en ...

  6. Alpha冲刺 (4/10)

    前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/9979357.html 作业博客:https://edu.cnblogs.com/campus/ ...

  7. (转) 一致性Hash算法在Memcached中的应用

    前言 大家应该都知道Memcached要想实现分布式只能在客户端来完成,目前比较流行的是通过一致性hash算法来实现.常规的方法是将 server的hash值与server的总台数进行求余,即hash ...

  8. Loj 2005 相关分析

    Loj 2005 相关分析 大力把式子拆开. \[ \begin{aligned} a &= \frac {\sum_{i=L}^{R} (x_i-\bar{x})(y_i-\bar{y})} ...

  9. 《DSP using MATLAB》Problem 2.5

    2.代码: %% ------------------------------------------------------------------------ %% Output Info abo ...

  10. 【消息队列值Beanstalk】beeanstalk初识

    Beanstalk是一个高性能.轻量级的.分布式的.内存型的消息队列系统.最初设计的目的是想通过后台异步执行耗时的任务来降低高容量Web应用系统的页面访问延迟.其实Beanstalkd是典型的类Mem ...