anxiao_web/pages/cmddispatch/js/marker/skynetIpcMarker.js

import {mainMap,skynetIpcInfo} from "../index.js";
import { iframeVideoUrl,serverIp,ipAddress } from "../../../../public/js/url.js";
var skynetIpcMarkerHash={};
var cusSkynetIpcMarkers=null;
window.showH5sVideo=function(that){
    var token=$(that).attr("token");
    playHKiPC(token);
}

function playHKiPC(token){
    if(serverIp=="43.15.198.61"){
        var url=`${iframeVideoUrl}?token=${token}&autoplay=true`
        window.open(url);
    }else{
        var url=`http://${ipAddress}/schoolplayhk/index.html?cameraIndexCode=${token}`
        window.open(url);
    }
}

function deleteSkynetIpcMarker(){
    for(var i  in skynetIpcMarkerHash){
        delete skynetIpcMarkerHash[i]
    }
    cusSkynetIpcMarkers.clearLayers();
}

function addSkynetIpcMarkerHash(id,marker){
    skynetIpcMarkerHash[id]=marker;
}

function drawSkynetIpcMarker(){	
    var iconObj=L.icon({
        iconUrl:"./pages/cmddispatch/image/wb_ipc.png",//图片路径
        iconSize: [24, 24]//图片大小设置
    });
    cusSkynetIpcMarkers = L.markerClusterGroup({iconCreateFunction: function(cluster) {
        return L.divIcon({ html: `<div class="polyMarker-cusmarker">   
            <img src="./pages/cmddispatch/image/wb_ipc.png">
            <span> ${cluster.getChildCount()}</span>
        </div>` });
      }});
    //标记绑定弹窗显示
    skynetIpcInfo.forEach(item=>{
        var name=item["name"];
        var pointCode=item["pointCode"];
        let longitude=item["longitude"];
        let latitude=item["latitude"];
        let marker=L.marker([latitude,longitude],{
            icon: iconObj,//将marker设置为上面引用的图形
            title:name,
            riseOnHover:true
        });
        marker.bindTooltip(item["name"]).openTooltip();
        marker.on('click',function(e){
            showSkynetIpcInfoWindow(item)
        })
        addSkynetIpcMarkerHash(pointCode,marker)
        cusSkynetIpcMarkers.addLayer(marker);
    })
    mainMap.addLayer(cusSkynetIpcMarkers);  
}

function showSkynetIpcInfoWindow(obj){
    var pointCode=obj["pointCode"];  
    if(pointCode in skynetIpcMarkerHash){
        skynetIpcMarkerHash[pointCode].unbindPopup();
        skynetIpcMarkerHash[pointCode].bindPopup(`<div class="skynetIpcInfoWindow">${getskynetIpcInfoWindowDiv(obj)}</div>`,{maxHeight:260}).openPopup();
        var lnglat= skynetIpcMarkerHash[pointCode].getLatLng()
        mainMap.setView(lnglat, 18);
    }
}

function getskynetIpcInfoWindowDiv(item){
    return `<div>
        <div class="skynetIpcTop">
            <div>
                <p>
                    <span>点位名称</span>
                    <span title="${item["name"]}">${item["name"]}</span>
                </p>
                <p>
                    <span>学校名称</span>
                    <span title="${item["station"]}">${item["station"]}</span>
                </p>
            </div>
            <div>
                <p>
                    <span>所属分局</span>
                    <span>长沙芙蓉分局</span>
                </p>
                <p>
                    <span>所属派出所</span>
                    <span title="${item["borough"]}">${item["borough"]}</span>
                </p>
            </div>
            <div>
                <p>
                    <span>所属项目</span>
                    <span  title="${item["projectName"]}">${item["projectName"]}</span>
                </p>
                <p>
                    <span>设备类型</span>
                    <span>${item["deviceType"]}</span>
                </p>
            </div>

            <div>
                <p>
                    <span>人脸抓拍能力</span>
                    <span>${item["aiFace"]==1?"是":"否"}</span>
                </p>
                <p>
                    <span>车辆抓拍能力</span>
                    <span>${item["aiVehicle"]==1?"是":"否"}</span>
                </p>
            </div>

            <div>
                <p>
                    <span>国标编码</span>
                    <span>${item["pointCode"]}</span>
                </p>
            </div>
        </div>
        <div class="skynetIpcBottom">
            <span>操作：</span>
            <button token='${item["pointCode"]}' class="layui-btn layui-btn-normal deviceopearbtn" onclick='showH5sVideo(this)'>
                <img src="./pages/cmddispatch/infowindow/video.png">视频
            </button>
        </div>
    </div>`
}

export {
    drawSkynetIpcMarker,
    deleteSkynetIpcMarker,
    skynetIpcMarkerHash,
    playHKiPC
}