1、支持地图告警图层
This commit is contained in:
weidong
parent
1639575184
commit
e016901bf5
@ -27,8 +27,43 @@
|
|||||||
line-height:30px;
|
line-height:30px;
|
||||||
font-size: 12px
|
font-size: 12px
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ul li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
.btn-wrap {
|
||||||
|
z-index: 999;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 3.5rem;
|
||||||
|
margin-left: 3rem;
|
||||||
|
padding: 1rem 1rem;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
.btn:hover {
|
||||||
|
background-color: rgba(27, 142, 236, 0.8);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=4ef46ba62e8fba67b53a0becca4d05da">
|
||||||
|
</script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div class="layuimini-main">
|
<div class="layuimini-main">
|
||||||
|
|
||||||
@ -69,6 +104,11 @@
|
|||||||
|
|
||||||
<div class="layui-row layui-col-space15">
|
<div class="layui-row layui-col-space15">
|
||||||
<div class="layui-card top-panel">
|
<div class="layui-card top-panel">
|
||||||
|
<ul class="btn-wrap" style="z-index: 99;">
|
||||||
|
<li class="light btn" onclick="showAll()">全部</li>
|
||||||
|
<li class="night btn" onclick="showWarning1()">一般告警</li>
|
||||||
|
<li class="night btn" onclick="showWarning2()">严重告警</li>
|
||||||
|
</ul>
|
||||||
<div id="map-container" class="layui-card-body" style="height: 85vh;weight :100vw"></div>
|
<div id="map-container" class="layui-card-body" style="height: 85vh;weight :100vw"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -77,30 +117,37 @@
|
|||||||
|
|
||||||
|
|
||||||
<script th:inline="javascript">
|
<script th:inline="javascript">
|
||||||
|
var greenMarkers=[];
|
||||||
|
var orangeMarkers=[];
|
||||||
|
var redMarkers=[];
|
||||||
|
var batch_id = 0;
|
||||||
|
var deviceList=
|
||||||
|
[
|
||||||
|
[# th:each="device : ${deviceList}"]
|
||||||
|
{deviceid:[[${device.deviceid}]],
|
||||||
|
latitude:[[${device.latitude}]],
|
||||||
|
longitude:[[${device.longitude}]],
|
||||||
|
warning:[[${device.warning}]]},
|
||||||
|
[/]
|
||||||
|
];
|
||||||
|
var marker_state = 0;//0: translating; 1:all; 2:orange; 3:red
|
||||||
|
|
||||||
|
var map = new BMapGL.Map("map-container");
|
||||||
|
var convertor = new BMapGL.Convertor();
|
||||||
|
var loc_green = new BMapGL.Icon("../images/loc1_green.png", new BMapGL.Size(18, 24));
|
||||||
|
var loc_red = new BMapGL.Icon("../images/loc1_red.png", new BMapGL.Size(18, 24));
|
||||||
|
var loc_orange = new BMapGL.Icon("../images/loc1_orange.png", new BMapGL.Size(18, 24));
|
||||||
|
|
||||||
|
initialize();
|
||||||
|
|
||||||
function initialize() {
|
function initialize() {
|
||||||
var map = new BMapGL.Map("map-container"); // 创建Map实例
|
|
||||||
var point = new BMapGL.Point(116.404, 39.915);
|
var point = new BMapGL.Point(116.404, 39.915);
|
||||||
map.centerAndZoom(point, 7);
|
map.centerAndZoom(point, 7);
|
||||||
map.enableScrollWheelZoom(true);
|
map.enableScrollWheelZoom(true);
|
||||||
//map.setMapType(BMAP_SATELLITE_MAP);
|
//map.setMapType(BMAP_SATELLITE_MAP);
|
||||||
|
|
||||||
var centerLat = 0;
|
var centerLat = 0;
|
||||||
var centerLon = 0;
|
var centerLon = 0;
|
||||||
var deviceList=
|
|
||||||
[
|
|
||||||
[# th:each="device : ${deviceList}"]
|
|
||||||
{deviceid:[[${device.deviceid}]],
|
|
||||||
latitude:[[${device.latitude}]],
|
|
||||||
longitude:[[${device.longitude}]],
|
|
||||||
warning:[[${device.warning}]]},
|
|
||||||
[/]
|
|
||||||
];
|
|
||||||
let batch_id = 0;
|
|
||||||
var convertor = new BMapGL.Convertor();
|
|
||||||
|
|
||||||
var loc_green = new BMapGL.Icon("../images/loc1_green.png", new BMapGL.Size(18, 24));
|
|
||||||
var loc_red = new BMapGL.Icon("../images/loc1_red.png", new BMapGL.Size(18, 24));
|
|
||||||
var loc_orange = new BMapGL.Icon("../images/loc1_orange.png", new BMapGL.Size(18, 24));
|
|
||||||
|
|
||||||
//console.log(deviceList);
|
//console.log(deviceList);
|
||||||
for(var i=0; i<deviceList.length; i++) {
|
for(var i=0; i<deviceList.length; i++) {
|
||||||
centerLat += deviceList[i].latitude;
|
centerLat += deviceList[i].latitude;
|
||||||
@ -111,6 +158,7 @@
|
|||||||
centerLon = centerLon/deviceList.length;
|
centerLon = centerLon/deviceList.length;
|
||||||
map.setCenter(new BMapGL.Point(centerLon,centerLat));
|
map.setCenter(new BMapGL.Point(centerLon,centerLat));
|
||||||
}
|
}
|
||||||
|
marker_state = 0;
|
||||||
|
|
||||||
translateCallback = function (data){
|
translateCallback = function (data){
|
||||||
if(data.status === 0) {
|
if(data.status === 0) {
|
||||||
@ -121,29 +169,31 @@
|
|||||||
marker = new BMapGL.Marker(data.points[i], {
|
marker = new BMapGL.Marker(data.points[i], {
|
||||||
icon: loc_red
|
icon: loc_red
|
||||||
});
|
});
|
||||||
|
redMarkers.push(marker);
|
||||||
}
|
}
|
||||||
else if(deviceList[batch_id+i].warning == 1) {
|
else if(deviceList[batch_id+i].warning == 1) {
|
||||||
marker = new BMapGL.Marker(data.points[i], {
|
marker = new BMapGL.Marker(data.points[i], {
|
||||||
icon: loc_orange
|
icon: loc_orange
|
||||||
});
|
});
|
||||||
|
orangeMarkers.push(marker);
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
marker = new BMapGL.Marker(data.points[i], {
|
marker = new BMapGL.Marker(data.points[i], {
|
||||||
icon: loc_green
|
icon: loc_green
|
||||||
});
|
});
|
||||||
|
greenMarkers.push(marker);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 点标记添加点击事件
|
// 点标记添加点击事件
|
||||||
map.addOverlay(marker);
|
map.addOverlay(marker);
|
||||||
|
|
||||||
|
|
||||||
//if(deviceList[batch_id+i].warning != 0){
|
//if(deviceList[batch_id+i].warning != 0){
|
||||||
var label = new BMapGL.Label(deviceList[batch_id+i].deviceid,
|
var label = new BMapGL.Label(deviceList[batch_id+i].deviceid,
|
||||||
{
|
{
|
||||||
position: data.points[i], // 指定文本标注所在的地理位置
|
position: data.points[i], // 指定文本标注所在的地理位置
|
||||||
offset: new BMapGL.Size(10, 10) // 设置文本偏移量
|
offset: new BMapGL.Size(10, 10) // 设置文本偏移量
|
||||||
}); // 创建文本标注对象
|
}); // 创建文本标注对象
|
||||||
map.addOverlay(label);
|
map.addOverlay(label);
|
||||||
//}
|
//}
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -156,6 +206,7 @@
|
|||||||
timer();
|
timer();
|
||||||
}, 500);
|
}, 500);
|
||||||
}
|
}
|
||||||
|
else marker_state = 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
//每秒转换10个坐标，否则会受百度并发限制
|
//每秒转换10个坐标，否则会受百度并发限制
|
||||||
@ -171,20 +222,88 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
convertor.translate(pointArr, 1, 5, translateCallback);
|
convertor.translate(pointArr, 1, 5, translateCallback);
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// 启动函数
|
// 启动函数
|
||||||
timer();
|
timer();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function loadScript() {
|
function showAll(){
|
||||||
var script = document.createElement("script");
|
if(marker_state == 2){
|
||||||
script.src = "https://api.map.baidu.com/api?v=1.0&type=webgl&ak=4ef46ba62e8fba67b53a0becca4d05da&callback=initialize";
|
showGreen();
|
||||||
document.body.appendChild(script);
|
showRed();
|
||||||
}
|
marker_state = 1;
|
||||||
|
}
|
||||||
|
else if(marker_state == 3){
|
||||||
|
showGreen();
|
||||||
|
showOrange();
|
||||||
|
marker_state = 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showWarning1(){
|
||||||
|
if(marker_state == 1){
|
||||||
|
hideGreen();
|
||||||
|
hideRed();
|
||||||
|
marker_state = 2;
|
||||||
|
}
|
||||||
|
else if(marker_state == 3){
|
||||||
|
hideRed();
|
||||||
|
showOrange();
|
||||||
|
marker_state = 2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showWarning2(){
|
||||||
|
if(marker_state == 1){
|
||||||
|
hideGreen();
|
||||||
|
hideOrange();
|
||||||
|
marker_state = 3;
|
||||||
|
}
|
||||||
|
else if(marker_state == 2){
|
||||||
|
hideOrange();
|
||||||
|
showRed();
|
||||||
|
marker_state = 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showGreen(){
|
||||||
|
for(var i=0; i<greenMarkers.length; i++){
|
||||||
|
map.addOverlay(greenMarkers[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showOrange(){
|
||||||
|
for(var i=0; i<orangeMarkers.length; i++){
|
||||||
|
map.addOverlay(orangeMarkers[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function showRed(){
|
||||||
|
for(var i=0; i<redMarkers.length; i++){
|
||||||
|
map.addOverlay(redMarkers[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideGreen(){
|
||||||
|
for(var i=0; i<greenMarkers.length; i++){
|
||||||
|
map.removeOverlay(greenMarkers[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideOrange(){
|
||||||
|
for(var i=0; i<orangeMarkers.length; i++){
|
||||||
|
map.removeOverlay(orangeMarkers[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideRed(){
|
||||||
|
for(var i=0; i<redMarkers.length; i++){
|
||||||
|
map.removeOverlay(redMarkers[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
loadScript();
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user