119 lines
3.5 KiB
JavaScript
119 lines
3.5 KiB
JavaScript
import { iotDeviceHash } from "../../api/stationDeviceWebsocket.js";
|
|
import { closeInfoWindow } from "./schoolMarker.js";
|
|
import { mainMap } from "../index.js";
|
|
let iotDeviceMarkerHash={};
|
|
function addIotDeviceMarkerHash(key,value){
|
|
iotDeviceMarkerHash[key] = value;
|
|
}
|
|
//清空所有的marker
|
|
function emptyIotDeviceMarkerHash(){
|
|
for(var d in iotDeviceMarkerHash){
|
|
delDeviceMarker(d);
|
|
}
|
|
}
|
|
|
|
//删除marker
|
|
function delIotDeviceMarkerHash(key){
|
|
if(key in iotDeviceMarkerHash){
|
|
mainMap.remove(iotDeviceMarkerHash[key]);
|
|
delete iotDeviceMarkerHash[key];
|
|
}
|
|
}
|
|
|
|
function updateIotDeviceMarker(){
|
|
for(var d in iotDeviceHash){
|
|
var obj=iotDeviceHash[d];
|
|
addIotDeviceMarker(obj)
|
|
}
|
|
}
|
|
//添加marker
|
|
function addIotDeviceMarker(obj){
|
|
|
|
var deviceid=obj["deviceid"];
|
|
var longitude=obj["longitude"];
|
|
var latitude=obj["latitude"];
|
|
var img=`./pages/cmddispatch/image/xiaoan-bjd.svg`
|
|
var content=`
|
|
<div class="indexMarkerImg" >
|
|
<img src='${img}'>
|
|
</div>`;
|
|
var deviceMarker = new AMap.Marker({//用来画marker
|
|
content:content,
|
|
position: new AMap.LngLat(longitude, latitude),
|
|
offset: new AMap.Pixel(-21, -19),
|
|
zIndex:14
|
|
});
|
|
deviceMarker.setMap(mainMap);
|
|
deviceMarker.on('click',function(){
|
|
openIotDeviceInfoWindow(obj)
|
|
})
|
|
addIotDeviceMarkerHash(deviceid,deviceMarker);
|
|
}
|
|
|
|
function openIotDeviceInfoWindow(obj){
|
|
var deviceInfoWindow = new AMap.InfoWindow({
|
|
isCustom: true, //使用自定义窗体
|
|
content:createIotDeviceInfowindow(obj),
|
|
offset: new AMap.Pixel(5, 10)
|
|
});
|
|
deviceInfoWindow.open(mainMap,[obj["longitude"],obj["latitude"]]);
|
|
mainMap.setCenter([obj["longitude"],obj["latitude"]]);
|
|
// mainMap.setZoomAndCenter(18,[obj["longitude"],obj["latitude"]])
|
|
}
|
|
|
|
|
|
function createIotDeviceInfowindow(obj){
|
|
var mdinfo = document.createElement("div");
|
|
mdinfo.className = "mdinfo";
|
|
//定义顶部标题
|
|
var mdinfoTop = document.createElement("div");
|
|
var userinfotop = document.createElement("div");
|
|
|
|
var closeX = document.createElement("img");
|
|
mdinfoTop.className = "mdinfoTop";
|
|
|
|
var userinfoSpan=document.createElement("span");
|
|
userinfoSpan.innerHTML=`<span>${obj["name"]}</span>`
|
|
var deviceinfoSpan=document.createElement("span");
|
|
deviceinfoSpan.innerHTML=`<span>${obj["borough"]}</span>`
|
|
|
|
userinfoSpan.className="mapTitleBg";
|
|
userinfotop.append(userinfoSpan);
|
|
//userinfotop.append(deviceinfoSpan);
|
|
|
|
|
|
closeX.src = "./pages/cmddispatch/image/closeInfoWindow.png";
|
|
mdinfoTop.append(userinfotop);
|
|
mdinfoTop.append(closeX);
|
|
closeX.onclick=closeInfoWindow;
|
|
|
|
// userinfoSpan.onclick=function(){
|
|
// mdinfoCenter.innerHTML=getSchoolInfoDiv(obj);
|
|
// userinfoSpan.className="mapTitleBg";
|
|
// deviceinfoSpan.className="";
|
|
// }
|
|
|
|
// deviceinfoSpan.onclick=function(){
|
|
// mdinfoCenter.innerHTML=showDeviceInfoWindow(deviceid)
|
|
// userinfoSpan.className="";
|
|
// deviceinfoSpan.className="mapTitleBg";
|
|
// }
|
|
|
|
//定义中间部分
|
|
var mdinfoCenter=document.createElement("div");
|
|
mdinfoCenter.className = "mdinfoCenter";
|
|
// mdinfoCenter.innerHTML=getSchoolInfoDiv(obj);
|
|
//定义底部操作按钮
|
|
var mdinfoBottom=document.createElement("div");
|
|
mdinfoBottom.className = "mdinfoBottom";
|
|
|
|
mdinfo.appendChild(mdinfoTop);
|
|
mdinfo.appendChild(mdinfoCenter);
|
|
// mdinfo.appendChild(mdinfoBottom);
|
|
return mdinfo;
|
|
}
|
|
|
|
|
|
export {updateIotDeviceMarker}
|
|
|