feat: 优化页面效果
This commit is contained in:
parent
c79c868c41
commit
d694ea8835
@ -1245,6 +1245,8 @@
|
||||
var deviceInfo = feature.get('deviceInfo');
|
||||
var iconSrc;
|
||||
var color = '#000';
|
||||
var isHovered = feature.get('hovered') === true;
|
||||
var scale = isHovered ? 0.85 : 0.7;
|
||||
|
||||
if (deviceInfo.warning == 2) {
|
||||
iconSrc = '../images/loc1_red.png';
|
||||
@ -1258,7 +1260,7 @@
|
||||
image: new ol.style.Icon({
|
||||
anchor: [0.5, 1],
|
||||
src: iconSrc,
|
||||
scale: 0.7
|
||||
scale: scale
|
||||
})
|
||||
});
|
||||
|
||||
@ -1267,9 +1269,14 @@
|
||||
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'
|
||||
fill: new ol.style.Fill({
|
||||
color: isHovered ? '#1aa094' : color
|
||||
}),
|
||||
stroke: new ol.style.Stroke({
|
||||
color: '#fff',
|
||||
width: isHovered ? 3 : 2
|
||||
}),
|
||||
font: isHovered ? 'bold 12px Arial' : '12px Arial'
|
||||
}));
|
||||
}
|
||||
|
||||
@ -1365,6 +1372,45 @@
|
||||
vectorLayer.changed();
|
||||
});
|
||||
|
||||
// 鼠标悬停效果
|
||||
var hoveredFeature = null;
|
||||
|
||||
// 鼠标移动事件
|
||||
map.on('pointermove', function(evt) {
|
||||
if (evt.dragging) {
|
||||
return;
|
||||
}
|
||||
|
||||
var pixel = map.getEventPixel(evt.originalEvent);
|
||||
var hit = map.hasFeatureAtPixel(pixel);
|
||||
|
||||
map.getTargetElement().style.cursor = hit ? 'pointer' : '';
|
||||
|
||||
// 处理悬停效果
|
||||
var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
|
||||
return feature;
|
||||
});
|
||||
|
||||
if (hoveredFeature && hoveredFeature !== feature) {
|
||||
hoveredFeature.set('hovered', false);
|
||||
}
|
||||
|
||||
if (feature) {
|
||||
// 处理集群
|
||||
var features = feature.get('features');
|
||||
if (features && features.length === 1) {
|
||||
features[0].set('hovered', true);
|
||||
hoveredFeature = features[0];
|
||||
} else if (!features && feature.get('deviceInfo')) {
|
||||
feature.set('hovered', true);
|
||||
hoveredFeature = feature;
|
||||
}
|
||||
}
|
||||
|
||||
vectorLayer.changed();
|
||||
});
|
||||
|
||||
// 点击事件
|
||||
map.on('click', function(evt) {
|
||||
var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
|
||||
return feature;
|
||||
@ -1382,12 +1428,20 @@
|
||||
} else if (features && features.length === 1) {
|
||||
// 单个设备点击
|
||||
var deviceInfo = features[0].get('deviceInfo');
|
||||
if (deviceInfo && weatherEnabled) {
|
||||
showWeatherForecast(deviceInfo);
|
||||
if (deviceInfo) {
|
||||
// 显示设备信息
|
||||
showDeviceInfo(deviceInfo);
|
||||
// 如果天气预测开启，显示天气卡片
|
||||
if (weatherEnabled) {
|
||||
showWeatherForecast(deviceInfo);
|
||||
}
|
||||
}
|
||||
} else if (feature.get('deviceInfo')) {
|
||||
// 直接点击设备标记
|
||||
var deviceInfo = feature.get('deviceInfo');
|
||||
// 显示设备信息
|
||||
showDeviceInfo(deviceInfo);
|
||||
// 如果天气预测开启，显示天气卡片
|
||||
if (weatherEnabled) {
|
||||
showWeatherForecast(deviceInfo);
|
||||
}
|
||||
@ -1523,7 +1577,7 @@
|
||||
function onMapTypeChange() {
|
||||
var mapType = document.getElementById('mapTypeSelectNew').value;
|
||||
|
||||
if(mapType.startsWith('google_') && /*[[${role}]]*/ 'USER' != "SUPER_ADMIN") {
|
||||
if(mapType.startsWith('google_') && [[${role}]] != "SUPER_ADMIN") {
|
||||
layer.msg('拒绝使用');
|
||||
document.getElementById('mapTypeSelectNew').value = 'tianditu_terrain_hybrid';
|
||||
mapType = 'tianditu_terrain_hybrid';
|
||||
@ -2209,16 +2263,49 @@
|
||||
document.getElementById('mapFunctionsMenu').classList.remove('show');
|
||||
}
|
||||
|
||||
// 显示天气预测卡片
|
||||
function showWeatherForecast(deviceInfo) {
|
||||
if (!weatherEnabled) {
|
||||
return;
|
||||
// 显示设备信息
|
||||
function showDeviceInfo(deviceInfo) {
|
||||
var infoMsg = '<div style="padding: 10px; line-height: 1.5;">' +
|
||||
'<p><strong>设备编号:</strong> ' + deviceInfo.deviceid + '</p>' +
|
||||
'<p><strong>坐标:</strong> ' + deviceInfo.latitude.toFixed(6) + ', ' + deviceInfo.longitude.toFixed(6) + '</p>';
|
||||
|
||||
if (deviceInfo.warning === 2) {
|
||||
infoMsg += '<p><strong>状态:</strong> <span style="color: #f56565;">严重告警</span></p>';
|
||||
} else if (deviceInfo.warning === 1) {
|
||||
infoMsg += '<p><strong>状态:</strong> <span style="color: #ed8936;">一般告警</span></p>';
|
||||
} else {
|
||||
infoMsg += '<p><strong>状态:</strong> <span style="color: #48bb78;">正常</span></p>';
|
||||
}
|
||||
|
||||
infoMsg += '</div>';
|
||||
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: '设备信息',
|
||||
area: ['300px', 'auto'],
|
||||
shade: 0,
|
||||
offset: 'auto',
|
||||
content: infoMsg,
|
||||
time: 3000,
|
||||
anim: 2
|
||||
});
|
||||
}
|
||||
|
||||
// 显示天气预测卡片
|
||||
function showWeatherForecast(deviceInfo) {
|
||||
currentWeatherDevice = deviceInfo;
|
||||
currentForecastIndex = 0;
|
||||
weatherData = null;
|
||||
|
||||
if (!weatherEnabled) {
|
||||
// 如果天气预测未启用，显示提示信息
|
||||
layer.msg(
|
||||
'天气预测功能未启用，请在地图功能菜单中开启',
|
||||
{time: 2000}
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
document.getElementById('weatherDeviceId').textContent = '设备: ' + deviceInfo.deviceid;
|
||||
document.getElementById('weatherDeviceCoords').textContent =
|
||||
'坐标: ' + deviceInfo.latitude.toFixed(4) + ', ' + deviceInfo.longitude.toFixed(4);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user