anxiao_web/pages/video/js/marker/iotDeviceMarker.js

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}