<html>
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
<head>
|
<style>
|
body, html, #map {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
margin: 0;
|
padding: 0;
|
font-family: "微软雅黑";
|
}
|
. BMap_noprint anchorTR{
|
display: none;
|
}
|
.anchorTR{
|
display: none;
|
}
|
#personMsg{
|
position: fixed;
|
top: 300px;
|
width: 50%;
|
height: 50%;
|
margin: auto;
|
left: 35%;
|
z-index: 99;
|
display: none;
|
}
|
</style>
|
<script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=zoVtgLNWuaZBjMAa32RZRFIagXxST0fm"></script>
|
<title>MapTile</title>
|
</head>
|
<body>
|
<div id="map"></div>
|
<div class="layui-row" id="personMsg" style="z-index: 9999999;" >
|
<div class="layui-col-xs12 layui-col-md12" style="">
|
<div style="width: 55%;height: 70%;background-color: #F2F2F2;padding: 15px">
|
<div>
|
<a href="javascript:;" onclick="ShuaXinShuJu()"><span style="width: 100px;display: inline-block;background-color: #0357D1;text-align: center;color: white;height: 25px;line-height: 25px;">刷新数据</span><span id="personDate" style="color: black;margin-left: 30px"></span></a>
|
<a href="javascript:;" onclick="GuanMsg()"><span style="width: 60px;display: inline-block;background-color: #0357D1;text-align: center;color: white;height: 25px;line-height: 25px;float: right">关闭</span></a>
|
</div>
|
<div style="margin-top: 10px;float: left">
|
<a href="javascript:;"><span style="display: inline-block;width: 100px;height: 200px;" id="personImage">
|
|
</span></a>
|
</div>
|
<div style="margin-top: 10px;float: left;width: 75%;padding-left: 10px">
|
<span style="width: 31%;display:inline-block;font-size: 14px" >姓名：<span class="xingming"></span></span>
|
<span style="width: 28%;display: inline-block;font-size: 14px">性别：<span class="xingbie"></span></span>
|
<span style="width: 34%;display: inline-block;font-size: 14px">部门：<span class="bumen"></span></span>
|
</div>
|
<div style="margin-top: 10px;float: left;;width: 75%;padding-left: 10px">
|
<span style="width: 31%;display:inline-block;font-size: 14px">版本：<span class="banben"></span></span>
|
<span style="width: 28%;display:inline-block;font-size: 14px">类型：<span class="leixing"></span></span>
|
<span style="width: 34%;display:inline-block;font-size: 14px">电话：<span class="dianhua"></span></span>
|
</div>
|
<div style="margin-top: 10px;float: left;width: 75%;padding-left:10px">
|
<span style="width: 31%;display:inline-block;font-size: 14px">卡号：<span class="kahao"></span></span>
|
<span style="width: 28%;display:inline-block;font-size: 14px">岗位：<span class="shijian"></span></span>
|
<span style="width: 34%;display:inline-block;font-size: 14px">电量：<span class="powers"></span></span>
|
</div>
|
<div style="margin-top: 10px;float: left;width: 75%;padding-left:10px">
|
<span style="width: 31%;display:inline-block;font-size: 14px">泊位：<span class="bowei"></span></span>
|
</div>
|
<div style="margin-top: 30px;float: left;margin-left: 10px;width: 500px;">
|
<span style="margin: 20px;position: relative;left: -5px;top: -120px;font-size: 14px">用户照片</span>
|
</div>
|
<div style="margin-top: 10px;float: left;position: relative;top: -110px;width: 100%;">
|
<span style="width: 26%;display: inline-block;font-size: 14px">经度：<span class="jingdu"></span></span>
|
<span style="width: 26%;display: inline-block;font-size: 14px">纬度：<span class="weidu"></span></span>
|
<span style="width: 20%;display: inline-block;font-size: 14px">高程：<span class="gaocheng"></span></span>
|
<span style="width: 20%;display: inline-block;font-size: 14px">状态：<span class="zhuangtai1"></span></span>
|
</div>
|
<div style="margin-top: 10px;float: left;position: relative;top: -110px;width: 100%;">
|
<span style="width: 26%;display: inline-block;font-size: 14px">X坐标：<span class="xzuobiao"></span></span>
|
<span style="width: 26%;display: inline-block;font-size: 14px">Y坐标：<span class="yzuobiao"></span></span>
|
<span style="width: 20%;display: inline-block;font-size: 14px">楼层：<span class="louceng"></span></span>
|
<span style="width: 20%;display: inline-block;font-size: 14px">状态：<span class="zhuangtai2"></span></span>
|
</div>
|
<div style="margin-top: 30px;float: left;position: relative;top: -110px;width: 100%;">
|
<span>文字：</span>
|
<span><input type="text" id="context1" style="width: 70%;height: 25px;border: 1px solid #BFE4F2"></span>
|
<a href="javascript:;" onclick="sendMsg()"><span style="border: 1px solid #BFE4F2;height: 23px;line-height: 23px;width: 40px;background-color:#BFE4F2;display: inline-block;text-align: center;position: relative;left: -5px;top: -1px">发送</span></a>
|
</div>
|
</div>
|
</div>
|
</div>
|
</body>
|
</html>
|
<script src="../HouTai/Js/jquery-3.5.1.js"></script>
|
<script src="../JS/layui.js"></script>
|
<script src="../JS/layer.js"></script>
|
<script>
|
|
function Convertor(ak) {
|
this.stepCount = 100;
|
this.pointCount = [];
|
this.Result = [];
|
this.NoisIndex = [];
|
this.Time = new Date();
|
this.AK = ak;
|
this.M_PI = 3.14159265358979324;
|
this.A = 6378245.0;
|
this.EE = 0.00669342162296594323;
|
this.X_PI = this.M_PI * 3000.0 / 180.0;
|
}
|
Convertor.prototype.outofChine = function (p) {
|
if (p.lng < 72.004 || p.lng > 137.8347) {
|
return true;
|
}
|
if (p.lat < 0.8293 || p.lat > 55.8271) {
|
return true;
|
}
|
return false;
|
}
|
;
|
Convertor.prototype.WGS2GCJ_lat = function (x, y) {
|
var ret1 = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
|
ret1 += (20.0 * Math.sin(6.0 * x * this.M_PI) + 20.0 * Math.sin(2.0 * x * this.M_PI)) * 2.0 / 3.0;
|
ret1 += (20.0 * Math.sin(y * this.M_PI) + 40.0 * Math.sin(y / 3.0 * this.M_PI)) * 2.0 / 3.0;
|
ret1 += (160.0 * Math.sin(y / 12.0 * this.M_PI) + 320 * Math.sin(y * this.M_PI / 30.0)) * 2.0 / 3.0;
|
return ret1;
|
}
|
;
|
Convertor.prototype.WGS2GCJ_lng = function (x, y) {
|
var ret2 = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
|
ret2 += (20.0 * Math.sin(6.0 * x * this.M_PI) + 20.0 * Math.sin(2.0 * x * this.M_PI)) * 2.0 / 3.0;
|
ret2 += (20.0 * Math.sin(x * this.M_PI) + 40.0 * Math.sin(x / 3.0 * this.M_PI)) * 2.0 / 3.0;
|
ret2 += (150.0 * Math.sin(x / 12.0 * this.M_PI) + 300.0 * Math.sin(x / 30.0 * this.M_PI)) * 2.0 / 3.0;
|
return ret2;
|
}
|
;
|
Convertor.prototype.WGS2GCJ = function (poi) {
|
if (this.outofChine(poi)) {
|
return;
|
}
|
var poi2 = {};
|
var dLat = this.WGS2GCJ_lat(poi.lng - 105.0, poi.lat - 35.0);
|
var dLon = this.WGS2GCJ_lng(poi.lng - 105.0, poi.lat - 35.0);
|
var radLat = poi.lat / 180.0 * this.M_PI;
|
var magic = Math.sin(radLat);
|
magic = 1 - this.EE * magic * magic;
|
var sqrtMagic = Math.sqrt(magic);
|
dLat = (dLat * 180.0) / ((this.A * (1 - this.EE)) / (magic * sqrtMagic) * this.M_PI);
|
dLon = (dLon * 180.0) / (this.A / sqrtMagic * Math.cos(radLat) * this.M_PI);
|
poi2.lat = poi.lat + dLat;
|
poi2.lng = poi.lng + dLon;
|
return poi2;
|
}
|
;
|
Convertor.prototype.GCJ2BD09 = function (poi) {
|
var poi2 = {};
|
var x = poi.lng
|
, y = poi.lat;
|
var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * this.X_PI);
|
var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * this.X_PI);
|
poi2.lng = z * Math.cos(theta) + 0.0065;
|
poi2.lat = z * Math.sin(theta) + 0.006;
|
return poi2;
|
}
|
;
|
/**
|
* WGS->百度坐标系
|
*/
|
Convertor.prototype.WGS2BD09 = function (poi) {
|
//WGS->GCJ
|
var poi2 = this.WGS2GCJ(poi);
|
if (typeof poi2 === "undefined") {
|
return;
|
}
|
//GCJ->百度坐标系
|
return this.GCJ2BD09(poi2);
|
}
|
</script>
|
<script type="text/javascript">
|
var showRect = true;
|
var nameFormat = "{x}_{y}";
|
var ext = ".png";
|
var fences = getfence();
|
var shijiao;
|
var zhongxindian;
|
var gao;
|
var level;
|
$.ajax({
|
url: "/hxzkuwb/findbaidumapList",
|
async: false,
|
success: function(data) {
|
shijiao = data[0].shijiao;
|
gao = data[0].heig;
|
zhongxindian = data[0].center
|
level = data[0].level;
|
},
|
error: function() {
|
// 在这里处理失败的回调函数
|
}
|
});
|
// 百度地图
|
var map = new BMapGL.Map('map', { mapType: BMAP_HYBRID_MAP, minZoom: 4, maxZoom: 20 });
|
var zhong =zhongxindian.split(';') ;
|
map.centerAndZoom(new BMapGL.Point(105.899483,37.236549), 17); // 初始化地图,设置中心点坐标和地图级别
|
map.enableScrollWheelZoom();
|
map.enableDoubleClickZoom();
|
map.addControl(new BMapGL.MapTypeControl({
|
mapTypes: [
|
BMAP_NORMAL_MAP,
|
BMAP_SATELLITE_MAP,
|
BMAP_HYBRID_MAP
|
]
|
}));
|
map.setHeading(shijiao); //设置地图旋转角度
|
map.setTilt(gao);
|
// 增加瓦片图层
|
var tileLayer = new BMapGL.TileLayer();
|
tileLayer.getTilesUrl = function(tileCoord, zoom) {
|
var name = nameFormat
|
.replace("{x}", tileCoord.x)
|
.replace("{y}", tileCoord.y)
|
.replace("{z}", zoom)
|
;
|
return 'tiles/' + zoom + '/' + name + ext;
|
}
|
map.addTileLayer(tileLayer);
|
// 增加矩形图层
|
for (var i = 0; i < fences.length; i++) {
|
fences[i] = fences[i].split(";");
|
for (var j = 0; j < fences[i].length; j++) {
|
fences[i][j] = fences[i][j].split(",");
|
}
|
}
|
var points = [];
|
for(var i = 0 ; i < fences.length;i++){
|
for (var j = i ; j< fences[i].length;j++){
|
var point = new BMapGL.Point(fences[i][j][0], fences[i][j][1]);
|
points.push(point);
|
}
|
}
|
var polygon = new BMapGL.Polygon(points, { strokeColor: "red", strokeOpacity: 0.5, fillColor: "red", fillOpacity: 0.3 });
|
map.addOverlay(polygon);
|
|
var markers = {};
|
var markers1 = {};
|
|
var timer = setInterval(function() {
|
if (localStorage.getItem("百度地图") == "不执行"){
|
console.log("百度地图不执行")
|
return
|
}
|
markers = {};
|
map.clearOverlays();
|
var polygon = new BMapGL.Polygon(points, { strokeColor: "red", strokeOpacity: 0.5, fillColor: "red", fillOpacity: 0.3 });
|
map.addOverlay(polygon);
|
var gps_node_list1 = getGPS();
|
for (var i = 0; i < gps_node_list1.length; i++) {
|
var gpsInfo = gps_node_list1[i];
|
var c = new Convertor();
|
if(gpsInfo.baoliu2!= "-1" && gpsInfo.baoliu2 !=""){
|
// var rr = c.WGS2BD09({ lng: parseFloat(105.883329), lat: parseFloat(37.228208)});
|
var lng = parseFloat(gpsInfo.baoliu2);
|
var lat = parseFloat(gpsInfo.baoliu3);
|
var userId = gpsInfo.ptagid;
|
// 判断在线状态
|
var baidus = document.getElementById("baidus");
|
var isChecked = true;
|
if(isChecked == true){
|
if(gpsInfo.psos == "1") {
|
if (markers1.hasOwnProperty(userId)) {
|
// 如果已经存在该标记，则移除原来的标记
|
map.removeOverlay(markers1[userId]);
|
// 更新标记位置
|
const customOverlay = new BMapGL.CustomOverlay(createDOM, {
|
point: new BMapGL.Point(lng, lat),
|
opacity: 1,
|
map: map,
|
offsetY: 26,
|
zIndex: -1
|
});
|
map.addOverlay(customOverlay);
|
markers1[userId] = customOverlay;
|
} else {
|
// 如果不存在该标记，则添加新标记
|
const customOverlay = new BMapGL.CustomOverlay(createDOM, {
|
point: new BMapGL.Point(lng, lat),
|
opacity: 1,
|
map: map,
|
offsetY: 26,
|
zIndex: -1
|
});
|
map.addOverlay(customOverlay);
|
markers1[userId] = customOverlay;
|
}
|
}else{
|
|
if (markers1.hasOwnProperty(userId)) {
|
// 如果已经存在该标记，则移除原来的标记
|
map.removeOverlay(markers1[userId]);
|
}
|
}
|
// 创建坐标点
|
var point = new BMapGL.Point(lng, lat);
|
// 创建标记
|
var myIcon = new BMapGL.Icon("../Icon/"+gpsInfo.pimage, new BMapGL.Size(40, 40), {
|
anchor: new BMapGL.Size(20, 40)
|
});
|
var marker = new BMapGL.Marker(point, { icon: myIcon });
|
// 将标记添加到地图上
|
map.addOverlay(marker);
|
var label = new BMapGL.Label(gpsInfo.pname+" "+userId, {offset: new BMapGL.Size(0, -70)});
|
label.setStyle({
|
color: "#fff",
|
fontSize: "14px",
|
borderRadius: "5px",
|
padding: "5px 5px",
|
border: "0",
|
backgroundColor: gpsInfo.bumencolor,
|
transform: 'translateX(-50%)',
|
});
|
marker.setLabel(label);
|
// 存储标记到 markers 对象中
|
markers[userId] = marker;
|
marker.setTitle(gpsInfo.ptagid);
|
marker.addEventListener("click", function () {
|
console.log("123456")
|
var data = "id="+this.getTitle();
|
$.ajax({
|
url: "/hxzkuwb/findtagIdPerson",
|
data: data,
|
async: false,
|
success: function(data) {
|
if (data.ponline == "1") {
|
data.ponline = "在线";
|
} else {
|
data.ponline = "离线";
|
}
|
$("#personImage").empty()
|
$("#personImage").append('<img style="width: 100px;height: 100px" src=/hxzkuwb/Icon/'+data.baoliu38+'/>')
|
$(".xingming").text(data.pname);
|
$(".xingbie").text(data.psex);
|
$(".bumen").text(data.pdepartment);
|
$(".banben").text("未知");
|
$(".bowei").text(data.baoliu39);
|
$(".leixing").text(data.baoliu19);
|
$(".dianhua").text(data.pphone);
|
$(".kahao").text(data.ptagid);
|
$(".shijian").text(data.pzu);
|
$(".powers").text(data.ppower+"%")
|
$(".jingdu").text(data.baoliu2);
|
$(".weidu").text(data.baoliu3);
|
$(".gaocheng").text(data.baoliu4);
|
$(".zhuangtai1").text(data.baoliu13);
|
$(".xzuobiao").text(data.px);
|
$(".yzuobiao").text(data.py);
|
$(".louceng").text(data.pfloor);
|
$(".zhuangtai2").text(data.ponline);
|
}
|
});
|
$("#personMsg").show();
|
});
|
}
|
|
}
|
}
|
}, 5000); // 为每一个icon 添加点击事件
|
|
function getGPS() {
|
var gpslist = [];
|
$.ajax({
|
async: false,
|
type: 'POST',
|
traditional: true,
|
url: "/hxzkuwb/getGPS",
|
dataType: 'json',
|
data: {},
|
success: function (data) {
|
//经纬度从度分秒转成度
|
gpslist = data
|
},
|
});
|
return gpslist;
|
};
|
|
|
|
|
|
|
|
function zhuanhuan(aaa) {
|
var c = new Convertor();
|
var bbb = [];
|
for (var i = 0; i < aaa.length; i++) {
|
var rr = c.WGS2BD09({ lng: aaa[i].lng, lat: aaa[i].lat });
|
bbb.push(rr);
|
}
|
return bbb;
|
c = null;
|
bbb = null;
|
}
|
|
function createDOM() {
|
const img = document.createElement('img');
|
img.style.height = '120px';
|
img.style.width = '120px';
|
img.src = '/hxzkuwb/Home/HomeImg/警示.gif';
|
img.draggable = false;
|
return img;
|
}
|
function GuanMsg(){
|
$("#personMsg").hide()
|
}
|
function getfence() {
|
var fences = [];
|
$.ajax({
|
async: false, //同步的
|
type: "GET",
|
url: "/hxzkuwb/baidufence.do",
|
dataType: "json",
|
success: function (data) {
|
fences = data.fences;
|
},
|
});
|
return fences;
|
}
|
</script>
|
