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