1027 lines
39 KiB
HTML
1027 lines
39 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>设备总览</title>
|
||
<meta name="renderer" content="webkit">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
<meta name="mobile-web-app-capable" content="yes">
|
||
<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
|
||
<link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
|
||
<link rel="stylesheet" href="../css/public.css" media="all">
|
||
<link rel="stylesheet" href="../css/ol.css">
|
||
<style>
|
||
.top-panel {
|
||
border: 1px solid #eceff9;
|
||
border-radius: 5px;
|
||
text-align: center;
|
||
}
|
||
|
||
.stats-panel {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.stats-panel > .layui-card-body {
|
||
height: auto;
|
||
min-height: 60px;
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
.top-panel-number {
|
||
font-size: 30px;
|
||
border-right: 1px solid #eceff9;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.top-panel-tips{
|
||
line-height:30px;
|
||
font-size: 12px
|
||
}
|
||
|
||
.flex-row {
|
||
display: flex;
|
||
align-items: stretch;
|
||
flex-wrap: wrap;
|
||
}
|
||
.flex-row > .layui-col-xs12,
|
||
.flex-row > .layui-col-md6 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.stats-panel .layui-col-xs3 a,
|
||
.stats-panel .layui-col-md4 a,
|
||
.stats-panel .layui-col-xs3 div a,
|
||
.stats-panel .layui-col-md4 div a {
|
||
display: block;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
ul li {
|
||
list-style: none;
|
||
}
|
||
.btn-wrap {
|
||
z-index: 999;
|
||
position: fixed;
|
||
bottom: 2rem;
|
||
margin-left: 1rem;
|
||
padding: .5rem .5rem;
|
||
border-radius: .25rem;
|
||
background-color: #fff;
|
||
box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
|
||
}
|
||
.btn {
|
||
width: 75px;
|
||
height: 30px;
|
||
float: left;
|
||
background-color: #fff;
|
||
color: rgba(27, 142, 236, 1);
|
||
font-size: 14px;
|
||
border: 1px solid rgba(27, 142, 236, 1);
|
||
border-radius: 5px;
|
||
margin: 0 5px;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.btn:hover, .btn.active {
|
||
background-color: rgba(27, 142, 236, 0.8);
|
||
color: #fff;
|
||
}
|
||
#map-container {
|
||
height: 85vh;
|
||
width: 100%;
|
||
padding:0px;
|
||
position: relative;
|
||
}
|
||
.map-control-card {
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 10px;
|
||
z-index: 1000;
|
||
background: white;
|
||
padding: 10px;
|
||
border-radius: 3px;
|
||
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
||
min-width: 220px;
|
||
margin-bottom: 1em;
|
||
}
|
||
.map-control-card .title {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
margin-bottom: 8px;
|
||
color: #1aa094;
|
||
}
|
||
.search-box {
|
||
display: flex;
|
||
margin-bottom: 10px;
|
||
align-items: center;
|
||
}
|
||
.search-box input {
|
||
flex: 1;
|
||
border: 1px solid #e6e6e6;
|
||
height: 30px;
|
||
padding: 0 10px;
|
||
}
|
||
.search-box button {
|
||
width: 50px;
|
||
height: 30px;
|
||
background-color: #1aa094;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 3px;
|
||
margin-left: 5px;
|
||
cursor: pointer;
|
||
}
|
||
.search-box button:hover {
|
||
background-color: #148e83;
|
||
}
|
||
.map-controls select {
|
||
width: 100%;
|
||
border: 1px solid #e6e6e6;
|
||
height: 30px;
|
||
}
|
||
.switch-box {
|
||
margin-top: 10px;
|
||
}
|
||
.switch-box .layui-form-item {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 0 5px;
|
||
}
|
||
.switch-box .layui-form-switch {
|
||
margin-top: 0;
|
||
border-radius: 6px;
|
||
}
|
||
|
||
@media screen and (max-width: 768px) {
|
||
.map-control-card {
|
||
position: static;
|
||
display: block;
|
||
margin-bottom: 1em;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<script src="../js/ol.js"></script>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="layuimini-main">
|
||
|
||
<div class="layui-row layui-col-space30 flex-row" style="margin-bottom: 1em;">
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-card top-panel stats-panel">
|
||
<div class="layui-card-header">设备数量</div>
|
||
<div class="layui-card-body">
|
||
<div class="layui-row layui-col-space5">
|
||
<div class="layui-col-xs9 layui-col-md8 top-panel-number">
|
||
<a style="color: #1aa094" th:text="${deviceOnlineNum}">2,020</a><br>
|
||
</div>
|
||
<div class="layui-col-xs3 layui-col-md4">
|
||
<a href="#" onclick="queryDevices('offline')" style="color: #bd3004" th:text="'掉线数 '+${deviceOfflineNum}">0</a>
|
||
<div th:if="${deviceNoFwdNum>0}"><a href="#" onclick="queryDevices('no_fwd')" style="color: #bd3004" th:text="'未推送数 '+${deviceNoFwdNum}">0</a></div>
|
||
<div th:if="${noFix>0}"><a href="#" onclick="queryDevices('nofixed')" style="color: #bd3004" th:text="'长期无效解 '+${noFix}">0</a></div>
|
||
<a style="color: #000000" th:text="'装机量 '+${deviceDeployedNum}">2020</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-card top-panel stats-panel">
|
||
<div class="layui-card-header">告警统计</div>
|
||
<div class="layui-card-body">
|
||
<div class="layui-row layui-col-space5">
|
||
<div class="layui-col-xs9 layui-col-md8 top-panel-number">
|
||
<a style="color: #f6c102" th:text="${warningTotalNum}">20</a><br>
|
||
</div>
|
||
<div class="layui-col-xs3 layui-col-md4">
|
||
<a href="#" onclick="queryDevices('warning2')" style="color: #bd3004" th:text="'严重 '+${warning2Num}">5</a>
|
||
<a href="#" onclick="queryDevices('warning1')" style="color: #f6c102" th:text="'一般 '+${warning1Num}">20</a>
|
||
<div th:if="${noGGA>0}"><a href="#" onclick="queryDevices('nogga')" style="color: #e7be1d" th:text="'无GGA '+${noGGA}">0</a></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-row layui-col-space15">
|
||
<div class="layui-card top-panel">
|
||
<ul class="btn-wrap" style="z-index: 99;">
|
||
<li class="light btn" id="btn-all" onclick="showAll()">全部</li>
|
||
<li class="night btn" id="btn-warning1" onclick="showWarning1()">一般告警</li>
|
||
<li class="night btn active" id="btn-warning2" onclick="showWarning2()">严重告警</li>
|
||
<li class="night btn" id="btn-device-locate" style="display: none; min-width: 120px;"> 设备定位: <span id="current-device-id"></span> </li>
|
||
</ul>
|
||
<div id="map-container" class="layui-card-body">
|
||
<div class="map-control-card">
|
||
<div class="map-controls">
|
||
<form class="layui-form">
|
||
<div class="layui-form-item">
|
||
<select id="mapTypeSelect" lay-filter="mapType">
|
||
<option value="tianditu_satellite" selected>天地图-卫星影像</option>
|
||
<option value="tianditu_normal">天地图-矢量</option>
|
||
<option value="amap_satellite">高德-卫星影像</option>
|
||
<option value="amap">高德-矢量</option>
|
||
</select>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="search-box">
|
||
<input type="text" id="deviceSearch" placeholder="输入设备编号搜索">
|
||
<button onclick="searchDevice()">搜索</button>
|
||
</div>
|
||
<div class="switch-box">
|
||
<form class="layui-form">
|
||
<div class="layui-form-item" style="margin-bottom: 0;">
|
||
<input type="checkbox" name="showDeviceId" lay-skin="switch" lay-text="显示设备信息" lay-filter="showDeviceId" checked>
|
||
<input type="checkbox" name="showCluster" lay-skin="switch" lay-text="设备集群显示" lay-filter="showCluster" checked>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
|
||
|
||
<script th:inline="javascript">
|
||
var map;
|
||
var vectorSource;
|
||
var vectorLayer;
|
||
var currentBaseLayer;
|
||
var greenFeatures = [];
|
||
var orangeFeatures = [];
|
||
var redFeatures = [];
|
||
var marker_state = 3; // 1:all; 2:orange; 3:red
|
||
var allFeatures = []; // 存储所有设备标记，用于搜索功能
|
||
var currentSearchedDevice = null; // 当前搜索的设备ID
|
||
var myLocationFeature = null; // 存储"我的位置"标记
|
||
var myLocationInterval; // 存储定时更新位置的interval对象
|
||
var clusterSource;
|
||
var clusterLayer;
|
||
var showDeviceId = true;
|
||
var showCluster = true;
|
||
var minZoomForLabels = 4;
|
||
var maxZoomForClustering = 8;
|
||
|
||
// 天地图 API 密钥（fengyarnom@gmail.com）
|
||
var TIANDITU_KEY = '0c260b8a094a4e0bc507808812cefdac';
|
||
|
||
var deviceList = [
|
||
[# th:each="device : ${deviceList}"]
|
||
{
|
||
deviceid: [[${device.deviceid}]],
|
||
latitude: [[${device.latitude}]],
|
||
longitude: [[${device.longitude}]],
|
||
warning: [[${device.warning}]]
|
||
},
|
||
[/]
|
||
];
|
||
|
||
var pi = 3.14159265358979324;
|
||
var a = 6378245.0;
|
||
var ee = 0.00669342162296594323;
|
||
|
||
/*判断是否在国内，不在国内则不做偏移*/
|
||
function outOfChina(lon, lat) {
|
||
if ((lon < 72.004 || lon > 137.8347) && (lat < 0.8293 || lat > 55.8271)) {
|
||
return true;
|
||
} else {
|
||
return false;
|
||
}
|
||
}
|
||
|
||
function transformLat(x, y) {
|
||
var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
|
||
ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
|
||
ret += (20.0 * Math.sin(y * pi) + 40.0 * Math.sin(y / 3.0 * pi)) * 2.0 / 3.0;
|
||
ret += (160.0 * Math.sin(y / 12.0 * pi) + 320 * Math.sin(y * pi / 30.0)) * 2.0 / 3.0;
|
||
return ret;
|
||
}
|
||
|
||
function transformLon(x, y) {
|
||
var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
|
||
ret += (20.0 * Math.sin(6.0 * x * pi) + 20.0 * Math.sin(2.0 * x * pi)) * 2.0 / 3.0;
|
||
ret += (20.0 * Math.sin(x * pi) + 40.0 * Math.sin(x / 3.0 * pi)) * 2.0 / 3.0;
|
||
ret += (150.0 * Math.sin(x / 12.0 * pi) + 300.0 * Math.sin(x / 30.0 * pi)) * 2.0 / 3.0;
|
||
return ret;
|
||
}
|
||
|
||
function transform(wgLat, wgLon) {
|
||
var mars_point = {lon: 0, lat: 0};
|
||
if (outOfChina(wgLon, wgLat)) {
|
||
mars_point.lat = wgLat;
|
||
mars_point.lon = wgLon;
|
||
return mars_point;
|
||
}
|
||
var dLat = transformLat(wgLon - 105.0, wgLat - 35.0);
|
||
var dLon = transformLon(wgLon - 105.0, wgLat - 35.0);
|
||
var radLat = wgLat / 180.0 * pi;
|
||
var magic = Math.sin(radLat);
|
||
magic = 1 - ee * magic * magic;
|
||
var sqrtMagic = Math.sqrt(magic);
|
||
dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * pi);
|
||
dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * pi);
|
||
mars_point.lat = wgLat + dLat;
|
||
mars_point.lon = wgLon + dLon;
|
||
return mars_point;
|
||
}
|
||
|
||
var mapLayers = {
|
||
amap: new ol.layer.Tile({
|
||
source: new ol.source.XYZ({
|
||
url: 'https://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
|
||
})
|
||
}),
|
||
amap_satellite: new ol.layer.Group({
|
||
layers: [
|
||
new ol.layer.Tile({
|
||
source: new ol.source.XYZ({
|
||
url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
|
||
})
|
||
}),
|
||
new ol.layer.Tile({
|
||
source: new ol.source.XYZ({
|
||
url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}'
|
||
})
|
||
})
|
||
]
|
||
}),
|
||
tianditu_satellite: new ol.layer.Group({
|
||
layers: [
|
||
new ol.layer.Tile({
|
||
source: new ol.source.XYZ({
|
||
url: 'https://t{0-7}.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY,
|
||
tileLoadFunction: function(imageTile, src) {
|
||
imageTile.getImage().src = src;
|
||
imageTile.getImage().onerror = function() {
|
||
// 天地图加载失败时切换到高德地图
|
||
var mapTypeSelect = document.getElementById('mapTypeSelect');
|
||
if(mapTypeSelect.value === 'tianditu_satellite') {
|
||
mapTypeSelect.value = 'amap_satellite';
|
||
switchMapType('amap_satellite');
|
||
layer.msg('天地图卫星图加载失败,已自动切换到高德卫星图');
|
||
layui.form.render('select');
|
||
} else if(mapTypeSelect.value === 'tianditu_normal') {
|
||
mapTypeSelect.value = 'amap';
|
||
switchMapType('amap');
|
||
layer.msg('天地图矢量图加载失败,已自动切换到高德矢量图');
|
||
layui.form.render('select');
|
||
}
|
||
};
|
||
}
|
||
})
|
||
}),
|
||
new ol.layer.Tile({
|
||
source: new ol.source.XYZ({
|
||
url: 'https://t{0-7}.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY,
|
||
tileLoadFunction: function(imageTile, src) {
|
||
imageTile.getImage().src = src;
|
||
imageTile.getImage().onerror = function() {
|
||
// 天地图加载失败时切换到高德地图
|
||
var mapTypeSelect = document.getElementById('mapTypeSelect');
|
||
if(mapTypeSelect.value === 'tianditu_satellite') {
|
||
mapTypeSelect.value = 'amap_satellite';
|
||
switchMapType('amap_satellite');
|
||
layer.msg('天地图卫星图加载失败,已自动切换到高德卫星图');
|
||
layui.form.render('select');
|
||
} else if(mapTypeSelect.value === 'tianditu_normal') {
|
||
mapTypeSelect.value = 'amap';
|
||
switchMapType('amap');
|
||
layer.msg('天地图矢量图加载失败,已自动切换到高德矢量图');
|
||
layui.form.render('select');
|
||
}
|
||
};
|
||
}
|
||
})
|
||
})
|
||
]
|
||
}),
|
||
tianditu_normal: new ol.layer.Group({
|
||
layers: [
|
||
new ol.layer.Tile({
|
||
source: new ol.source.XYZ({
|
||
url: 'https://t{0-7}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY,
|
||
tileLoadFunction: function(imageTile, src) {
|
||
imageTile.getImage().src = src;
|
||
imageTile.getImage().onerror = function() {
|
||
// 天地图加载失败时切换到高德地图
|
||
var mapTypeSelect = document.getElementById('mapTypeSelect');
|
||
if(mapTypeSelect.value === 'tianditu_satellite') {
|
||
mapTypeSelect.value = 'amap_satellite';
|
||
switchMapType('amap_satellite');
|
||
layer.msg('天地图卫星图加载失败,已自动切换到高德卫星图');
|
||
layui.form.render('select');
|
||
} else if(mapTypeSelect.value === 'tianditu_normal') {
|
||
mapTypeSelect.value = 'amap';
|
||
switchMapType('amap');
|
||
layer.msg('天地图矢量图加载失败,已自动切换到高德矢量图');
|
||
layui.form.render('select');
|
||
}
|
||
};
|
||
}
|
||
})
|
||
}),
|
||
new ol.layer.Tile({
|
||
source: new ol.source.XYZ({
|
||
url: 'https://t{0-7}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=' + TIANDITU_KEY,
|
||
tileLoadFunction: function(imageTile, src) {
|
||
imageTile.getImage().src = src;
|
||
imageTile.getImage().onerror = function() {
|
||
// 天地图加载失败时切换到高德地图
|
||
var mapTypeSelect = document.getElementById('mapTypeSelect');
|
||
if(mapTypeSelect.value === 'tianditu_satellite') {
|
||
mapTypeSelect.value = 'amap_satellite';
|
||
switchMapType('amap_satellite');
|
||
layer.msg('天地图卫星图加载失败,已自动切换到高德卫星图');
|
||
layui.form.render('select');
|
||
} else if(mapTypeSelect.value === 'tianditu_normal') {
|
||
mapTypeSelect.value = 'amap';
|
||
switchMapType('amap');
|
||
layer.msg('天地图矢量图加载失败,已自动切换到高德矢量图');
|
||
layui.form.render('select');
|
||
}
|
||
};
|
||
}
|
||
})
|
||
})
|
||
]
|
||
})
|
||
};
|
||
|
||
function initialize() {
|
||
vectorSource = new ol.source.Vector();
|
||
vectorLayer = new ol.layer.Vector({
|
||
source: vectorSource,
|
||
style: function(feature) {
|
||
if (!feature.get('isMyLocation')) {
|
||
var deviceInfo = feature.get('deviceInfo');
|
||
var iconSrc;
|
||
var color = '#000';
|
||
|
||
if (deviceInfo.warning == 2) {
|
||
iconSrc = '../images/loc1_red.png';
|
||
} else if (deviceInfo.warning == 1) {
|
||
iconSrc = '../images/loc1_orange.png';
|
||
} else {
|
||
iconSrc = '../images/loc1_green.png';
|
||
}
|
||
|
||
var style = new ol.style.Style({
|
||
image: new ol.style.Icon({
|
||
anchor: [0.5, 1],
|
||
src: iconSrc,
|
||
scale: 0.7
|
||
})
|
||
});
|
||
|
||
// 根据缩放级别和设置决定是否显示设备ID
|
||
if (showDeviceId && map.getView().getZoom() >= minZoomForLabels) {
|
||
style.setText(new ol.style.Text({
|
||
text: deviceInfo.deviceid,
|
||
offsetY: -30,
|
||
fill: new ol.style.Fill({ color: color }),
|
||
stroke: new ol.style.Stroke({ color: '#fff', width: 2 }),
|
||
font: '12px Arial'
|
||
}));
|
||
}
|
||
|
||
return style;
|
||
}
|
||
return null;
|
||
}
|
||
});
|
||
|
||
clusterSource = new ol.source.Cluster({
|
||
distance: 40,
|
||
source: vectorSource
|
||
});
|
||
|
||
clusterLayer = new ol.layer.Vector({
|
||
source: clusterSource,
|
||
style: function(feature) {
|
||
var size = feature.get('features').length;
|
||
var style = new ol.style.Style({
|
||
image: new ol.style.Circle({
|
||
radius: 15,
|
||
fill: new ol.style.Fill({
|
||
color: '#3399CC'
|
||
})
|
||
}),
|
||
text: new ol.style.Text({
|
||
text: size.toString(),
|
||
fill: new ol.style.Fill({
|
||
color: '#fff'
|
||
})
|
||
})
|
||
});
|
||
return style;
|
||
}
|
||
});
|
||
|
||
var initialMapType = document.getElementById('mapTypeSelect').value;
|
||
currentBaseLayer = mapLayers[initialMapType];
|
||
|
||
map = new ol.Map({
|
||
target: 'map-container',
|
||
layers: [
|
||
currentBaseLayer,
|
||
clusterLayer,
|
||
vectorLayer
|
||
],
|
||
view: new ol.View({
|
||
center: ol.proj.fromLonLat([116.404, 39.915]),
|
||
zoom: 7
|
||
})
|
||
});
|
||
|
||
// 设置初始可见性状态
|
||
var initialZoom = map.getView().getZoom();
|
||
if (showCluster && initialZoom < maxZoomForClustering) {
|
||
clusterLayer.setVisible(true);
|
||
vectorLayer.setVisible(false);
|
||
} else {
|
||
clusterLayer.setVisible(false);
|
||
vectorLayer.setVisible(true);
|
||
}
|
||
|
||
map.getView().on('change:resolution', function() {
|
||
var zoom = map.getView().getZoom();
|
||
if (showCluster) {
|
||
if (zoom >= maxZoomForClustering) {
|
||
clusterLayer.setVisible(false);
|
||
vectorLayer.setVisible(true);
|
||
} else {
|
||
clusterLayer.setVisible(true);
|
||
vectorLayer.setVisible(false);
|
||
}
|
||
}
|
||
vectorLayer.changed();
|
||
});
|
||
|
||
map.on('click', function(evt) {
|
||
var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
|
||
return feature;
|
||
});
|
||
|
||
if (feature) {
|
||
var features = feature.get('features');
|
||
if (features && features.length > 1) {
|
||
var extent = vectorSource.getExtent();
|
||
map.getView().fit(extent, {
|
||
padding: [50, 50, 50, 50],
|
||
duration: 1000
|
||
});
|
||
}
|
||
}
|
||
});
|
||
|
||
if (deviceList.length > 0) {
|
||
var centerLat = 0;
|
||
var centerLon = 0;
|
||
|
||
for (var i = 0; i < deviceList.length; i++) {
|
||
centerLat += deviceList[i].latitude;
|
||
centerLon += deviceList[i].longitude;
|
||
}
|
||
|
||
centerLat = centerLat / deviceList.length;
|
||
centerLon = centerLon / deviceList.length;
|
||
|
||
map.getView().setCenter(ol.proj.fromLonLat([centerLon, centerLat]));
|
||
}
|
||
|
||
addDeviceMarkers();
|
||
myLocation();
|
||
startLocationUpdates();
|
||
}
|
||
|
||
function switchMapType(mapType) {
|
||
map.removeLayer(currentBaseLayer);
|
||
currentBaseLayer = mapLayers[mapType];
|
||
map.getLayers().insertAt(0, currentBaseLayer);
|
||
|
||
updateMyLocationForMapType(mapType);
|
||
addDeviceMarkers();
|
||
}
|
||
|
||
// 根据地图类型更新我的位置标记
|
||
function updateMyLocationForMapType(mapType) {
|
||
if (myLocationFeature) {
|
||
var originalCoords = myLocationFeature.get('originalCoords');
|
||
if (originalCoords) {
|
||
var lat = originalCoords.lat;
|
||
var lon = originalCoords.lon;
|
||
var coordinates;
|
||
|
||
if (mapType === 'amap' || mapType === 'amap_satellite') {
|
||
// 高德地图使用GCJ-02坐标系，需要转换
|
||
var gcjCoord = transform(lat, lon);
|
||
coordinates = ol.proj.fromLonLat([gcjCoord.lon, gcjCoord.lat]);
|
||
} else {
|
||
// 天地图使用CGCS2000/WGS84坐标系，直接使用
|
||
coordinates = ol.proj.fromLonLat([lon, lat]);
|
||
}
|
||
|
||
myLocationFeature.getGeometry().setCoordinates(coordinates);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 设备定位标志
|
||
function addDeviceMarkers() {
|
||
var savedMyLocationFeature = myLocationFeature;
|
||
|
||
vectorSource.clear();
|
||
greenFeatures = [];
|
||
orangeFeatures = [];
|
||
redFeatures = [];
|
||
allFeatures = [];
|
||
|
||
for (var i = 0; i < deviceList.length; i++) {
|
||
var device = deviceList[i];
|
||
var mapCoordinates;
|
||
var currentMapType = document.getElementById('mapTypeSelect').value;
|
||
if (currentMapType === 'amap' || currentMapType === 'amap_satellite') {
|
||
// 高德地图 WGS84 转换为 GCJ-02
|
||
var gcjCoord = transform(device.latitude, device.longitude);
|
||
mapCoordinates = ol.proj.fromLonLat([gcjCoord.lon, gcjCoord.lat]);
|
||
} else {
|
||
// 天地图 CGCS2000，2000国家大地坐标系，与WGS84实质一样
|
||
mapCoordinates = ol.proj.fromLonLat([device.longitude, device.latitude]);
|
||
}
|
||
|
||
var feature = new ol.Feature({
|
||
geometry: new ol.geom.Point(mapCoordinates),
|
||
deviceInfo: device
|
||
});
|
||
|
||
if (device.warning == 2) {
|
||
redFeatures.push(feature);
|
||
} else if (device.warning == 1) {
|
||
orangeFeatures.push(feature);
|
||
} else {
|
||
greenFeatures.push(feature);
|
||
}
|
||
|
||
allFeatures.push(feature);
|
||
vectorSource.addFeature(feature);
|
||
}
|
||
|
||
if (savedMyLocationFeature) {
|
||
vectorSource.addFeature(savedMyLocationFeature);
|
||
}
|
||
|
||
if (currentSearchedDevice) {
|
||
filterByDeviceId(currentSearchedDevice);
|
||
} else {
|
||
if (marker_state === 2) {
|
||
hideGreen();
|
||
hideRed();
|
||
} else if (marker_state === 3) {
|
||
hideGreen();
|
||
hideOrange();
|
||
}
|
||
}
|
||
|
||
// 强制更新样式
|
||
vectorLayer.changed();
|
||
}
|
||
|
||
function myLocation() {
|
||
if (navigator.geolocation) {
|
||
navigator.geolocation.getCurrentPosition(function(position) {
|
||
var lon = position.coords.longitude;
|
||
var lat = position.coords.latitude;
|
||
var currentMapType = document.getElementById('mapTypeSelect').value;
|
||
var coordinates;
|
||
|
||
if (currentMapType === 'amap' || currentMapType === 'amap_satellite') {
|
||
// 高德地图使用GCJ-02坐标系，需要转换
|
||
var gcjCoord = transform(lat, lon);
|
||
coordinates = ol.proj.fromLonLat([gcjCoord.lon, gcjCoord.lat]);
|
||
} else {
|
||
// 天地图使用CGCS2000/WGS84坐标系，直接使用
|
||
coordinates = ol.proj.fromLonLat([lon, lat]);
|
||
}
|
||
|
||
// 如果已经存在位置标记，则先移除
|
||
if (myLocationFeature) {
|
||
vectorSource.removeFeature(myLocationFeature);
|
||
}
|
||
|
||
myLocationFeature = new ol.Feature({
|
||
geometry: new ol.geom.Point(coordinates),
|
||
isMyLocation: true,
|
||
originalCoords: {lat: lat, lon: lon}
|
||
});
|
||
|
||
var style = new ol.style.Style({
|
||
image: new ol.style.Icon({
|
||
anchor: [0.5, 1],
|
||
src: '../images/loc_blue.png',
|
||
scale: 0.7
|
||
})
|
||
});
|
||
|
||
myLocationFeature.setStyle(style);
|
||
vectorSource.addFeature(myLocationFeature);
|
||
map.getView().setCenter(coordinates);
|
||
});
|
||
}
|
||
}
|
||
|
||
function startLocationUpdates() {
|
||
if (myLocationInterval) {
|
||
clearInterval(myLocationInterval);
|
||
}
|
||
|
||
myLocationInterval = setInterval(function() {
|
||
myLocation();
|
||
}, 10 * 60 * 1000); // 10 min = 10 * 60 * 1000ms
|
||
}
|
||
|
||
function showAll() {
|
||
document.getElementById('btn-all').classList.add('active');
|
||
document.getElementById('btn-warning1').classList.remove('active');
|
||
document.getElementById('btn-warning2').classList.remove('active');
|
||
document.getElementById('btn-device-locate').classList.remove('active');
|
||
document.getElementById('btn-device-locate').style.display = 'none';
|
||
|
||
currentSearchedDevice = null;
|
||
document.getElementById('deviceSearch').value = '';
|
||
var savedMyLocationFeature = myLocationFeature;
|
||
|
||
vectorSource.clear();
|
||
|
||
if (savedMyLocationFeature) {
|
||
vectorSource.addFeature(savedMyLocationFeature);
|
||
}
|
||
|
||
for (var i = 0; i < allFeatures.length; i++) {
|
||
vectorSource.addFeature(allFeatures[i]);
|
||
}
|
||
|
||
marker_state = 1;
|
||
}
|
||
|
||
function showWarning1() {
|
||
document.getElementById('btn-all').classList.remove('active');
|
||
document.getElementById('btn-warning1').classList.add('active');
|
||
document.getElementById('btn-warning2').classList.remove('active');
|
||
document.getElementById('btn-device-locate').classList.remove('active');
|
||
document.getElementById('btn-device-locate').style.display = 'none';
|
||
|
||
currentSearchedDevice = null;
|
||
document.getElementById('deviceSearch').value = '';
|
||
|
||
var savedMyLocationFeature = myLocationFeature;
|
||
|
||
vectorSource.clear();
|
||
|
||
if (savedMyLocationFeature) {
|
||
vectorSource.addFeature(savedMyLocationFeature);
|
||
}
|
||
|
||
for (var i = 0; i < allFeatures.length; i++) {
|
||
vectorSource.addFeature(allFeatures[i]);
|
||
}
|
||
|
||
hideGreen();
|
||
hideRed();
|
||
marker_state = 2;
|
||
}
|
||
|
||
function showWarning2() {
|
||
document.getElementById('btn-all').classList.remove('active');
|
||
document.getElementById('btn-warning1').classList.remove('active');
|
||
document.getElementById('btn-warning2').classList.add('active');
|
||
document.getElementById('btn-device-locate').classList.remove('active');
|
||
document.getElementById('btn-device-locate').style.display = 'none';
|
||
|
||
currentSearchedDevice = null;
|
||
document.getElementById('deviceSearch').value = '';
|
||
|
||
var savedMyLocationFeature = myLocationFeature;
|
||
|
||
vectorSource.clear();
|
||
|
||
if (savedMyLocationFeature) {
|
||
vectorSource.addFeature(savedMyLocationFeature);
|
||
}
|
||
|
||
for (var i = 0; i < allFeatures.length; i++) {
|
||
vectorSource.addFeature(allFeatures[i]);
|
||
}
|
||
|
||
hideGreen();
|
||
hideOrange();
|
||
marker_state = 3;
|
||
}
|
||
|
||
function showGreen() {
|
||
for (var i = 0; i < greenFeatures.length; i++) {
|
||
if (!vectorSource.hasFeature(greenFeatures[i])) {
|
||
vectorSource.addFeature(greenFeatures[i]);
|
||
}
|
||
}
|
||
}
|
||
|
||
function showOrange() {
|
||
for (var i = 0; i < orangeFeatures.length; i++) {
|
||
if (!vectorSource.hasFeature(orangeFeatures[i])) {
|
||
vectorSource.addFeature(orangeFeatures[i]);
|
||
}
|
||
}
|
||
}
|
||
|
||
function showRed() {
|
||
for (var i = 0; i < redFeatures.length; i++) {
|
||
if (!vectorSource.hasFeature(redFeatures[i])) {
|
||
vectorSource.addFeature(redFeatures[i]);
|
||
}
|
||
}
|
||
}
|
||
|
||
function hideGreen() {
|
||
for (var i = 0; i < greenFeatures.length; i++) {
|
||
vectorSource.removeFeature(greenFeatures[i]);
|
||
}
|
||
}
|
||
|
||
function hideOrange() {
|
||
for (var i = 0; i < orangeFeatures.length; i++) {
|
||
vectorSource.removeFeature(orangeFeatures[i]);
|
||
}
|
||
}
|
||
|
||
function hideRed() {
|
||
for (var i = 0; i < redFeatures.length; i++) {
|
||
vectorSource.removeFeature(redFeatures[i]);
|
||
}
|
||
}
|
||
|
||
function searchDevice() {
|
||
var deviceId = document.getElementById('deviceSearch').value.trim();
|
||
|
||
if (!deviceId) {
|
||
currentSearchedDevice = null;
|
||
vectorSource.clear();
|
||
|
||
for (var i = 0; i < allFeatures.length; i++) {
|
||
vectorSource.addFeature(allFeatures[i]);
|
||
}
|
||
|
||
if (marker_state === 2) {
|
||
hideGreen();
|
||
hideRed();
|
||
} else if (marker_state === 3) {
|
||
hideGreen();
|
||
hideOrange();
|
||
}
|
||
|
||
document.getElementById('btn-device-locate').style.display = 'none';
|
||
updateFilterButtonsState(marker_state);
|
||
|
||
return;
|
||
}
|
||
|
||
currentSearchedDevice = deviceId;
|
||
filterByDeviceId(deviceId);
|
||
}
|
||
|
||
function locateDeviceOnMap(deviceId, latitude, longitude) {
|
||
currentSearchedDevice = deviceId;
|
||
filterByDeviceId(deviceId);
|
||
|
||
var layerIndex = layer.index;
|
||
layer.close(layerIndex);
|
||
|
||
layer.msg('已定位到设备: ' + deviceId);
|
||
}
|
||
|
||
function updateFilterButtonsState(state) {
|
||
document.getElementById('btn-all').classList.remove('active');
|
||
document.getElementById('btn-warning1').classList.remove('active');
|
||
document.getElementById('btn-warning2').classList.remove('active');
|
||
|
||
if (state === 1) {
|
||
document.getElementById('btn-all').classList.add('active');
|
||
} else if (state === 2) {
|
||
document.getElementById('btn-warning1').classList.add('active');
|
||
} else if (state === 3) {
|
||
document.getElementById('btn-warning2').classList.add('active');
|
||
}
|
||
}
|
||
|
||
function filterByDeviceId(deviceId) {
|
||
var savedMyLocationFeature = myLocationFeature;
|
||
|
||
vectorSource.clear();
|
||
|
||
if (savedMyLocationFeature) {
|
||
vectorSource.addFeature(savedMyLocationFeature);
|
||
}
|
||
|
||
var found = false;
|
||
|
||
for (var i = 0; i < allFeatures.length; i++) {
|
||
var feature = allFeatures[i];
|
||
var deviceInfo = feature.get('deviceInfo');
|
||
|
||
if (deviceInfo && deviceInfo.deviceid.includes(deviceId)) {
|
||
vectorSource.addFeature(feature);
|
||
found = true;
|
||
|
||
// 将地图中心移动到该设备位置
|
||
var geometry = feature.getGeometry();
|
||
var deviceCoord = geometry.getCoordinates();
|
||
map.getView().setCenter(deviceCoord);
|
||
map.getView().setZoom(15);
|
||
}
|
||
}
|
||
|
||
if (!found) {
|
||
layer.msg('未找到设备: ' + deviceId);
|
||
|
||
if (marker_state === 1) {
|
||
showAll();
|
||
} else if (marker_state === 2) {
|
||
showWarning1();
|
||
} else if (marker_state === 3) {
|
||
showWarning2();
|
||
}
|
||
}
|
||
|
||
document.getElementById('current-device-id').textContent = deviceId;
|
||
document.getElementById('btn-device-locate').style.display = 'block';
|
||
document.getElementById('btn-device-locate').classList.add('active');
|
||
document.getElementById('btn-all').classList.remove('active');
|
||
document.getElementById('btn-warning1').classList.remove('active');
|
||
document.getElementById('btn-warning2').classList.remove('active');
|
||
}
|
||
layui.use(['form'], function(){
|
||
var form = layui.form;
|
||
|
||
form.on('select(mapType)', function(data){
|
||
switchMapType(data.value);
|
||
});
|
||
|
||
form.on('switch(showDeviceId)', function(data){
|
||
showDeviceId = data.elem.checked;
|
||
vectorLayer.changed();
|
||
});
|
||
|
||
// 聚合显示
|
||
form.on('switch(showCluster)', function(data){
|
||
showCluster = data.elem.checked;
|
||
if (showCluster) {
|
||
var zoom = map.getView().getZoom();
|
||
if (zoom < maxZoomForClustering) {
|
||
clusterLayer.setVisible(true);
|
||
vectorLayer.setVisible(false);
|
||
} else {
|
||
clusterLayer.setVisible(false);
|
||
vectorLayer.setVisible(true);
|
||
}
|
||
} else {
|
||
clusterLayer.setVisible(false);
|
||
vectorLayer.setVisible(true);
|
||
}
|
||
});
|
||
|
||
initialize();
|
||
showAll();
|
||
});
|
||
|
||
function queryDevices(status_type) {
|
||
var index = layer.open({
|
||
title: '',
|
||
type: 2,
|
||
shade: 0.2,
|
||
maxmin: true,
|
||
shadeClose: true,
|
||
anim: 2,
|
||
offset: 'rb',
|
||
area: ['100%', '50%'],
|
||
content: '../page/gnss_q_status?query=' + status_type,
|
||
});
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html> |