128 lines
3.6 KiB
JavaScript
128 lines
3.6 KiB
JavaScript
import { stationInfoTableList,mainMap} from "../index.js";
|
|
import { showSchoolBaseInfo } from "../schoolBaseInfo.js";
|
|
import { getSchoolInfoDiv } from "../schoolBaseInfo.js";
|
|
let deviceMarkerHash={};
|
|
function addDeviceMarkerHash(key,value){
|
|
deviceMarkerHash[key] = value;
|
|
}
|
|
//清空所有的marker
|
|
function emptyDeviceMarker(){
|
|
for(var d in deviceMarkerHash){
|
|
delDeviceMarker(d);
|
|
}
|
|
}
|
|
|
|
//删除marker
|
|
function delDeviceMarker(key){
|
|
if(key in deviceMarkerHash){
|
|
mainMap.remove(deviceMarkerHash[key]);
|
|
delete deviceMarkerHash[key];
|
|
}
|
|
}
|
|
|
|
function drawSchoolMarker(){
|
|
stationInfoTableList.forEach(item=>{
|
|
addDeviceMarker(item);
|
|
})
|
|
|
|
}
|
|
//添加marker
|
|
function addDeviceMarker(obj){
|
|
var deviceid=obj["deviceid"];
|
|
var longitude=obj["longitude"];
|
|
var latitude=obj["latitude"];
|
|
var img=`./pages/cmddispatch/image/xiaoan-xx.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(){
|
|
showSchoolBaseInfo(obj);
|
|
openSchoolInfoWindow(obj);
|
|
})
|
|
addDeviceMarkerHash(deviceid,deviceMarker);
|
|
}
|
|
|
|
|
|
function openSchoolInfoWindow(obj){
|
|
var deviceInfoWindow = new AMap.InfoWindow({
|
|
isCustom: true, //使用自定义窗体
|
|
content:createSchoolInfowindow(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 createSchoolInfowindow(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;
|
|
}
|
|
|
|
//关闭信息窗体
|
|
function closeInfoWindow() {
|
|
mainMap.clearInfoWindow();
|
|
}
|
|
|
|
|
|
|
|
export {
|
|
drawSchoolMarker,
|
|
openSchoolInfoWindow,
|
|
closeInfoWindow
|
|
} |