feat: 适配手机端
This commit is contained in:
parent
c0d25ef0e7
commit
3cbeba9832
@ -11,6 +11,7 @@
|
||||
<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">
|
||||
<!-- 谷歌地图的API接口，这个访问没有天地图的次数多，所以这边限制只有管理员能使用 -->
|
||||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBEBxB5n9vikPHbfNMzo_dzneXJi77YqjE" async defer></script>
|
||||
<style>
|
||||
.top-panel {
|
||||
@ -102,7 +103,6 @@
|
||||
}
|
||||
|
||||
|
||||
/* 设备总览条样式 */
|
||||
.device-overview-bar {
|
||||
background: white;
|
||||
border: 1px solid #e6e8eb;
|
||||
@ -112,8 +112,6 @@
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 地图顶部功能条样式 */
|
||||
.map-toolbar {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
@ -253,6 +251,7 @@
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 由于不使用layui的元素，所以这边还得适配手机端 */
|
||||
@media screen and (max-width: 768px) {
|
||||
.layuimini-main {
|
||||
height: 108vh;
|
||||
@ -326,9 +325,6 @@
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 移动端工具栏适配 */
|
||||
.map-toolbar {
|
||||
position: absolute;
|
||||
transform: none;
|
||||
@ -351,11 +347,9 @@
|
||||
|
||||
.toolbar-label {
|
||||
font-size: 10px;
|
||||
display: none; /* 隐藏标签节省空间 */
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.toolbar-select,
|
||||
.toolbar-input {
|
||||
font-size: 11px;
|
||||
@ -370,7 +364,7 @@
|
||||
}
|
||||
|
||||
.toolbar-divider {
|
||||
display: none; /* 隐藏分隔线 */
|
||||
display: none;
|
||||
}
|
||||
|
||||
#toolbar-device-locate span:not(.toolbar-label) {
|
||||
@ -378,7 +372,6 @@
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
/* 移动端下拉菜单适配 */
|
||||
.dropdown-menu {
|
||||
min-width: 180px;
|
||||
max-width: 95vw;
|
||||
@ -408,7 +401,6 @@
|
||||
border: 1px solid #ffcc33;
|
||||
}
|
||||
|
||||
/* 下拉菜单样式 */
|
||||
.dropdown-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
@ -482,7 +474,6 @@
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
/* 开关样式 */
|
||||
.switch-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@ -535,8 +526,6 @@
|
||||
|
||||
<body>
|
||||
<div class="layuimini-main">
|
||||
|
||||
<!-- 设备总览条 -->
|
||||
<div class="device-overview-bar">
|
||||
<div class="overview-stats">
|
||||
<div class="stat-item non-clickable">
|
||||
@ -586,16 +575,16 @@
|
||||
<div class="map-card">
|
||||
|
||||
<div id="map-container">
|
||||
<!-- 新的地图工具栏 -->
|
||||
<div class="map-toolbar">
|
||||
<div class="toolbar-item">
|
||||
<select id="mapTypeSelectNew" class="toolbar-select" lay-filter="mapTypeNew" onchange="onMapTypeChange()">
|
||||
<option value="tianditu_terrain_hybrid" selected>天地图-地形混合</option>
|
||||
<option value="tianditu_satellite">天地图-卫星影像</option>
|
||||
<option value="tianditu_satellite" selected>天地图-卫星影像</option>
|
||||
<option value="tianditu_terrain_hybrid" >天地图-地形混合</option>
|
||||
<option value="tianditu_normal">天地图-矢量</option>
|
||||
<option value="tianditu_terrain">天地图-地形</option>
|
||||
<option value="amap_satellite">高德-卫星影像</option>
|
||||
<option value="amap">高德-矢量</option>
|
||||
<!-- 只能超级管理员使用 -->
|
||||
<option value="google_satellite" th:if="${role=='SUPER_ADMIN'}">谷歌-卫星影像</option>
|
||||
<option value="google_terrain" th:if="${role=='SUPER_ADMIN'}">谷歌-地形图</option>
|
||||
<option value="google_roadmap" th:if="${role=='SUPER_ADMIN'}">谷歌-道路图</option>
|
||||
@ -686,7 +675,7 @@
|
||||
var showCluster = true;
|
||||
var minZoomForLabels = 4;
|
||||
var maxZoomForClustering = 8;
|
||||
// 测距专用source和layer
|
||||
// 测距
|
||||
var measureSource;
|
||||
var measureLayer;
|
||||
|
||||
@ -1027,7 +1016,7 @@
|
||||
})
|
||||
});
|
||||
|
||||
// 创建测距专用图层
|
||||
// 测距专用图层
|
||||
measureSource = new ol.source.Vector();
|
||||
measureLayer = new ol.layer.Vector({
|
||||
source: measureSource,
|
||||
@ -1045,11 +1034,8 @@
|
||||
});
|
||||
map.addLayer(measureLayer);
|
||||
|
||||
// 添加比例尺控件
|
||||
var scaleLineControl = new ol.control.ScaleLine();
|
||||
map.addControl(scaleLineControl);
|
||||
|
||||
// 设置初始可见性状态
|
||||
var initialZoom = map.getView().getZoom();
|
||||
if (showCluster && initialZoom < maxZoomForClustering) {
|
||||
clusterLayer.setVisible(true);
|
||||
@ -1109,11 +1095,9 @@
|
||||
myLocation();
|
||||
startLocationUpdates();
|
||||
|
||||
// 设置默认显示模式
|
||||
showDeviceId = true;
|
||||
showCluster = true;
|
||||
|
||||
// 确保开关状态与默认值一致
|
||||
document.getElementById('showDeviceIdSwitch').checked = showDeviceId;
|
||||
document.getElementById('showClusterSwitch').checked = showCluster;
|
||||
}
|
||||
@ -1153,7 +1137,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 设备定位标志
|
||||
function addDeviceMarkers() {
|
||||
var savedMyLocationFeature = myLocationFeature;
|
||||
|
||||
@ -1221,9 +1204,8 @@
|
||||
function onMapTypeChange() {
|
||||
var mapType = document.getElementById('mapTypeSelectNew').value;
|
||||
|
||||
// 检查用户权限，如果不是SUPER_ADMIN但尝试使用Google地图，则阻止并提示
|
||||
if(mapType.startsWith('google_') && [[${role}]] != "SUPER_ADMIN") {
|
||||
layer.msg('您没有权限使用谷歌地图服务');
|
||||
layer.msg('拒绝使用');
|
||||
document.getElementById('mapTypeSelectNew').value = 'tianditu_terrain_hybrid';
|
||||
mapType = 'tianditu_terrain_hybrid';
|
||||
}
|
||||
@ -1239,12 +1221,10 @@
|
||||
return;
|
||||
}
|
||||
|
||||
// 定位到设备，但不隐藏其他设备
|
||||
filterByDeviceId(deviceId);
|
||||
}
|
||||
|
||||
function clearDeviceSearch() {
|
||||
// 清空搜索框
|
||||
document.getElementById('deviceSearchNew').value = '';
|
||||
}
|
||||
|
||||
@ -1305,7 +1285,6 @@
|
||||
}
|
||||
|
||||
function showAll() {
|
||||
// 注释掉原有按钮操作
|
||||
// document.getElementById('btn-all').classList.add('active');
|
||||
// document.getElementById('btn-warning1').classList.remove('active');
|
||||
// document.getElementById('btn-warning2').classList.remove('active');
|
||||
@ -1315,7 +1294,6 @@
|
||||
currentSearchedDevice = null;
|
||||
// document.getElementById('deviceSearch').value = '';
|
||||
document.getElementById('deviceSearchNew').value = '';
|
||||
// 已移除toolbar-device-locate元素，不需要再设置其display属性
|
||||
var savedMyLocationFeature = myLocationFeature;
|
||||
|
||||
vectorSource.clear();
|
||||
@ -1332,7 +1310,6 @@
|
||||
}
|
||||
|
||||
function showWarning1() {
|
||||
// 注释掉原有按钮操作
|
||||
// document.getElementById('btn-all').classList.remove('active');
|
||||
// document.getElementById('btn-warning1').classList.add('active');
|
||||
// document.getElementById('btn-warning2').classList.remove('active');
|
||||
@ -1478,7 +1455,6 @@
|
||||
}
|
||||
|
||||
function updateFilterButtonsState(state) {
|
||||
// 注释掉原有按钮操作
|
||||
// document.getElementById('btn-all').classList.remove('active');
|
||||
// document.getElementById('btn-warning1').classList.remove('active');
|
||||
// document.getElementById('btn-warning2').classList.remove('active');
|
||||
@ -1515,7 +1491,6 @@
|
||||
map.getView().setCenter(deviceCoord);
|
||||
map.getView().setZoom(15);
|
||||
|
||||
// 高亮显示该设备（可以在这里添加高亮效果）
|
||||
layer.msg('已定位到设备: ' + deviceId);
|
||||
} else {
|
||||
layer.msg('未找到设备: ' + deviceId);
|
||||
@ -1524,7 +1499,6 @@
|
||||
layui.use(['form'], function(){
|
||||
var form = layui.form;
|
||||
|
||||
// 注释掉原有表单控件事件
|
||||
// form.on('select(mapType)', function(data){
|
||||
// switchMapType(data.value);
|
||||
// });
|
||||
@ -1576,18 +1550,15 @@
|
||||
});
|
||||
}
|
||||
|
||||
// 新工具栏的事件处理函数
|
||||
function onWarningFilterChange() {
|
||||
var filterValue = document.getElementById('warningFilter').value;
|
||||
|
||||
// 重置按钮状态 (注释掉原有按钮操作)
|
||||
// document.getElementById('btn-all').classList.remove('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 = '';
|
||||
document.getElementById('deviceSearchNew').value = '';
|
||||
@ -1601,11 +1572,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉菜单控制
|
||||
function toggleMapFunctionsMenu() {
|
||||
document.getElementById('mapFunctionsMenu').classList.toggle('show');
|
||||
|
||||
// 点击其他地方关闭菜单
|
||||
document.addEventListener('click', closeMapFunctionsMenu);
|
||||
}
|
||||
|
||||
@ -1619,7 +1587,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 设备信息显示开关
|
||||
function toggleDeviceId() {
|
||||
showDeviceId = document.getElementById('showDeviceIdSwitch').checked;
|
||||
updateLayerVisibility();
|
||||
@ -1649,11 +1616,9 @@
|
||||
vectorLayer.setVisible(true);
|
||||
}
|
||||
|
||||
// 强制更新样式
|
||||
vectorLayer.changed();
|
||||
}
|
||||
|
||||
// --- 测距相关变量 ---
|
||||
var measureActive = false;
|
||||
var measureDraw; // 当前测距交互
|
||||
var measureTooltipElement;
|
||||
@ -1668,7 +1633,7 @@
|
||||
layer.msg('测距功能已关闭');
|
||||
} else {
|
||||
activateMeasure();
|
||||
layer.msg('测距功能已开启，单击地图添加测量点，双击结束当前测量');
|
||||
layer.msg('双击以结束当前测量');
|
||||
}
|
||||
// 关闭下拉菜单
|
||||
document.getElementById('mapFunctionsMenu').classList.remove('show');
|
||||
@ -1677,7 +1642,6 @@
|
||||
function activateMeasure() {
|
||||
measureActive = true;
|
||||
|
||||
// 创建测距交互
|
||||
measureDraw = new ol.interaction.Draw({
|
||||
source: measureSource,
|
||||
type: 'LineString',
|
||||
@ -1698,19 +1662,15 @@
|
||||
var sketch;
|
||||
var listener;
|
||||
|
||||
// 开始绘制
|
||||
measureDraw.on('drawstart', function(evt) {
|
||||
sketch = evt.feature;
|
||||
|
||||
// 清空当前测距的临时tooltip
|
||||
currentMeasureTooltips = [];
|
||||
|
||||
// 监听几何变化
|
||||
listener = sketch.getGeometry().on('change', function(e) {
|
||||
var geom = e.target;
|
||||
var coords = geom.getCoordinates();
|
||||
|
||||
// 清除当前临时tooltip
|
||||
clearTemporaryTooltips();
|
||||
|
||||
// 计算总距离
|
||||
@ -1738,22 +1698,17 @@
|
||||
});
|
||||
});
|
||||
|
||||
// 结束绘制
|
||||
measureDraw.on('drawend', function(evt) {
|
||||
// 获取最终坐标
|
||||
var coords = evt.feature.getGeometry().getCoordinates();
|
||||
|
||||
// 清除临时tooltip
|
||||
clearTemporaryTooltips();
|
||||
|
||||
// 计算总距离
|
||||
var total = 0;
|
||||
for (var i = 1; i < coords.length; i++) {
|
||||
var seg = new ol.geom.LineString([coords[i-1], coords[i]]);
|
||||
total += ol.sphere.getLength(seg);
|
||||
}
|
||||
|
||||
// 创建起点和终点的永久tooltip
|
||||
var startTooltip = createMeasureTooltip(coords[0], '起点', true);
|
||||
measureTooltips.push(startTooltip);
|
||||
|
||||
@ -1762,17 +1717,12 @@
|
||||
(Math.round(total * 10) / 10) + ' m');
|
||||
var endTooltip = createMeasureTooltip(coords[coords.length-1], output, true);
|
||||
measureTooltips.push(endTooltip);
|
||||
|
||||
// 保存测距线段
|
||||
measureFeatures.push(evt.feature);
|
||||
|
||||
ol.Observable.unByKey(listener);
|
||||
|
||||
// 重新激活测距工具，可以继续测量
|
||||
map.removeInteraction(measureDraw);
|
||||
activateMeasure();
|
||||
|
||||
// 显示当前测距数量
|
||||
updateMeasureCount();
|
||||
});
|
||||
}
|
||||
@ -1785,14 +1735,9 @@
|
||||
measureDraw = null;
|
||||
}
|
||||
|
||||
// 清除临时tooltip
|
||||
clearTemporaryTooltips();
|
||||
|
||||
// 不清除已完成的测距结果和永久tooltip
|
||||
// 用户可以通过clearMeasure函数清除所有测距
|
||||
}
|
||||
|
||||
// 创建测距tooltip
|
||||
function createMeasureTooltip(coord, text, isStatic) {
|
||||
var elem = document.createElement('div');
|
||||
elem.className = isStatic ? 'ol-tooltip ol-tooltip-static' : 'ol-tooltip ol-tooltip-measure';
|
||||
@ -1807,39 +1752,33 @@
|
||||
return overlay;
|
||||
}
|
||||
|
||||
// 清除所有测距tooltip
|
||||
function clearAllMeasureTooltips() {
|
||||
// 清除永久tooltip
|
||||
for (var i = 0; i < measureTooltips.length; i++) {
|
||||
map.removeOverlay(measureTooltips[i]);
|
||||
}
|
||||
measureTooltips = [];
|
||||
|
||||
// 清除临时tooltip
|
||||
clearTemporaryTooltips();
|
||||
}
|
||||
|
||||
// 清除临时tooltip
|
||||
function clearTemporaryTooltips() {
|
||||
// 清除当前测量过程中的临时tooltip
|
||||
for (var i = 0; i < currentMeasureTooltips.length; i++) {
|
||||
map.removeOverlay(currentMeasureTooltips[i]);
|
||||
}
|
||||
currentMeasureTooltips = [];
|
||||
}
|
||||
|
||||
// 更新测距数量显示 (不再显示测距段数)
|
||||
|
||||
function updateMeasureCount() {
|
||||
// 不再显示测距段数
|
||||
|
||||
}
|
||||
|
||||
// 清除测距按钮
|
||||
|
||||
function clearMeasure() {
|
||||
measureSource.clear();
|
||||
clearAllMeasureTooltips();
|
||||
measureFeatures = []; // 清空测距线段数组
|
||||
measureFeatures = [];
|
||||
layer.msg('测距标记已清除');
|
||||
// 关闭下拉菜单
|
||||
document.getElementById('mapFunctionsMenu').classList.remove('show');
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user