develop #13
@ -34,7 +34,6 @@
|
||||
}
|
||||
|
||||
.top-panel-number {
|
||||
/* line-height: 60px; */
|
||||
font-size: 30px;
|
||||
border-right: 1px solid #eceff9;
|
||||
height: 100%;
|
||||
@ -89,6 +88,8 @@
|
||||
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);
|
||||
@ -120,6 +121,7 @@
|
||||
.search-box {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
.search-box input {
|
||||
flex: 1;
|
||||
@ -145,6 +147,18 @@
|
||||
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;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/ol@v10.5.0/dist/ol.js"></script>
|
||||
@ -201,7 +215,6 @@
|
||||
</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">
|
||||
@ -218,6 +231,14 @@
|
||||
<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>
|
||||
@ -240,6 +261,12 @@
|
||||
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';
|
||||
@ -357,9 +384,73 @@
|
||||
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];
|
||||
|
||||
@ -367,6 +458,7 @@
|
||||
target: 'map-container',
|
||||
layers: [
|
||||
currentBaseLayer,
|
||||
clusterLayer,
|
||||
vectorLayer
|
||||
],
|
||||
view: new ol.View({
|
||||
@ -374,6 +466,48 @@
|
||||
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;
|
||||
@ -391,10 +525,10 @@
|
||||
|
||||
addDeviceMarkers();
|
||||
myLocation();
|
||||
startLocationUpdates(); // 启动位置定时更新
|
||||
startLocationUpdates();
|
||||
}
|
||||
|
||||
function switchMapType(mapType) {
|
||||
console.log('切换地图类型到:', mapType);
|
||||
map.removeLayer(currentBaseLayer);
|
||||
currentBaseLayer = mapLayers[mapType];
|
||||
map.getLayers().insertAt(0, currentBaseLayer);
|
||||
@ -402,7 +536,7 @@
|
||||
updateMyLocationForMapType(mapType);
|
||||
addDeviceMarkers();
|
||||
}
|
||||
|
||||
|
||||
// 根据地图类型更新我的位置标记
|
||||
function updateMyLocationForMapType(mapType) {
|
||||
if (myLocationFeature) {
|
||||
@ -426,6 +560,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
// 设备定位标志
|
||||
function addDeviceMarkers() {
|
||||
var savedMyLocationFeature = myLocationFeature;
|
||||
|
||||
@ -453,36 +588,14 @@
|
||||
deviceInfo: device
|
||||
});
|
||||
|
||||
var iconSrc;
|
||||
var color = '#000';
|
||||
|
||||
if (device.warning == 2) {
|
||||
iconSrc = '../images/loc1_red.png';
|
||||
redFeatures.push(feature);
|
||||
} else if (device.warning == 1) {
|
||||
iconSrc = '../images/loc1_orange.png';
|
||||
orangeFeatures.push(feature);
|
||||
} else {
|
||||
iconSrc = '../images/loc1_green.png';
|
||||
greenFeatures.push(feature);
|
||||
}
|
||||
|
||||
var style = new ol.style.Style({
|
||||
image: new ol.style.Icon({
|
||||
anchor: [0.5, 1],
|
||||
src: iconSrc,
|
||||
scale: 1
|
||||
}),
|
||||
text: new ol.style.Text({
|
||||
text: device.deviceid,
|
||||
offsetY: -30,
|
||||
fill: new ol.style.Fill({ color: color }),
|
||||
stroke: new ol.style.Stroke({ color: '#fff', width: 2 }),
|
||||
font: '12px Arial'
|
||||
})
|
||||
});
|
||||
|
||||
feature.setStyle(style);
|
||||
allFeatures.push(feature);
|
||||
vectorSource.addFeature(feature);
|
||||
}
|
||||
@ -502,6 +615,9 @@
|
||||
hideOrange();
|
||||
}
|
||||
}
|
||||
|
||||
// 强制更新样式
|
||||
vectorLayer.changed();
|
||||
}
|
||||
|
||||
function myLocation() {
|
||||
@ -536,7 +652,7 @@
|
||||
image: new ol.style.Icon({
|
||||
anchor: [0.5, 1],
|
||||
src: '../images/loc_blue.png',
|
||||
scale: 1
|
||||
scale: 0.7
|
||||
})
|
||||
});
|
||||
|
||||
@ -778,13 +894,36 @@
|
||||
}
|
||||
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();
|
||||
|
||||
showWarning2();
|
||||
showAll();
|
||||
});
|
||||
|
||||
function queryDevices(status_type) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user