| | |
| | | <link rel="stylesheet" href="https://developer.fengmap.com/fmAPI/demos/libs/css/index.css"> |
| | | <link rel="stylesheet" href="https://developer.fengmap.com/fmAPI/demos/Search/mapReconnaissance/css/index.css"> |
| | | <link rel="stylesheet" href="https://developer.fengmap.com/fmAPI/demos/Marker/FMDomMarker/css/index.css"> |
| | | <%-- <script src="https://developer.fengmap.com/fmAPI/demos/Marker/FMDomMarker/js/index.js"></script>--%> |
| | | <script src="https://developer.fengmap.com/fmAPI/demos/Marker/FMDomMarker/js/index.js"></script> |
| | | <style> |
| | | .box { |
| | | |
| | | } |
| | | </style> |
| | | </head> |
| | | <body> |
| | | <%--<div class="layui-container">--%> |
| | |
| | | return realposition |
| | | }; |
| | | |
| | | function FindShowJiZhan() { |
| | | var realposition = []; |
| | | $.ajax({ |
| | | async: false, |
| | | type: 'Get', |
| | | url: "/hxzkuwb/FindSanWeiJiZhan", |
| | | dataType: 'json', |
| | | success: function (data) { |
| | | realposition = data; |
| | | }, |
| | | }); |
| | | return realposition |
| | | }; |
| | | |
| | | function FindShowWangGuan() { |
| | | var realposition = []; |
| | | $.ajax({ |
| | | async: false, |
| | | type: 'Get', |
| | | url: "/hxzkuwb/FindGateWayList", |
| | | dataType: 'json', |
| | | success: function (data) { |
| | | realposition = data; |
| | | }, |
| | | }); |
| | | return realposition |
| | | }; |
| | | |
| | | |
| | | |
| | | |
| | | function getAnchorInfo2() { |
| | |
| | | return [online_anchorList, offline_anchorList] |
| | | }; |
| | | |
| | | var JianZhuName = ""; |
| | | var sousuopd = false; |
| | | var biaoqians = new Object(); |
| | | var biaoqianids = new Object(); |
| | | var biaoqianidc = new Object(); |
| | | var onlineanchor = new Object(); |
| | | var onlineanchor1 = new Object(); |
| | | var offlineanchor = new Object(); |
| | | var oo = 0; |
| | | var bm_offView = 0;//是否离线不显示图标 |
| | |
| | | appName: 'map1', |
| | | key: '09facc4ee52d1844bc1e561dad5abf59', |
| | | mapID: '1761938416618700801', |
| | | themeID: '1737015464018382850', |
| | | themeID: '1765945708318105601', |
| | | mapURL: '../fengmap/data/', |
| | | themeURL: '../fengmap/data/theme/', |
| | | minTiltAngle: 0, |
| | |
| | | map.on('loaded', function () { |
| | | // 获取地图楼层信息 |
| | | floorInfo = map.getFloorInfos() |
| | | localStorage.removeItem("domMar") |
| | | }); |
| | | // 注册地图点击事件 |
| | | |
| | | map.on('click', function (event) { |
| | | |
| | | console.log(target) |
| | | |
| | | marker = null; |
| | | var clickMode = event.targets.find(it => it.type === fengmap.FMType.MODEL) |
| | | var floor = floorInfo.find(it => it.level === event.level) |
| | | //更新界面的点击信息 |
| | | UI.updateInfo(clickMode, floor, event) |
| | | var fencename = $(".Alise").text(); |
| | | console.log(event) |
| | | addMarker(event.coords) |
| | | JianZhuName = fencename |
| | | console.log(event.targets[0].FID) |
| | | console.log(JianZhuName) |
| | | JianZhuMsg(event.targets[0].FID,JianZhuName) |
| | | }) |
| | | |
| | | var anchorObj = { |
| | |
| | | |
| | | |
| | | function addMarker(position) { |
| | | |
| | | var panelSet = { |
| | | height: 5, |
| | | x: position.x, |
| | | y: position.y, |
| | | content: `<div style="background-color: white;display: flex;align-items: center;padding: 15px"><div style="width: 54px;height: 54px;text-align: center;line-height:54px;margin-right: 14px;background: #FFFFFF;border: 1px solid #EDEDED;"><img width="37" src="https://developer.fengmap.com/fmAPI/images/domlogo.png"/></div><div><div style="font-size: 14;font-weight: bold;">DomMarker</div><div style="color: rgba(0,0,0,0.7);font-size: 12px;margin-top: 5px;">商铺 <span style="color: rgba(0,0,0,0.5);">L001</span></div><div style="color: rgba(0,0,0,0.7);font-size: 12px;margin-top: 5px;">面积 <span style="color: rgba(0,0,0,0.5);">100㎡</span></div></div></div>`, |
| | | domWidth: 200, |
| | | content: '<div style="height: 200px;background: url(\'../Home/HomeImg/FloorBg.png\') no-repeat;align-items: center;padding: 20px;background-size: cover;width: 270px"><div style="margin-top: 25px"><div style="font-weight: bold;color: white;font-size: 15px">建筑名称:'+JianZhuName+'<span><img style="cursor: pointer;width: 20px; height: 20px;position: absolute;left: 85%" src="../Home/HomeImg/clos.png" onclick="removeMarker1()"/></span></div><div style="color: black;font-size: 14px;font-weight: bold;margin-top: 10px">总共人数:80人</div></div></div>', |
| | | domWidth: 300, |
| | | domHeight: 40, |
| | | anchor: 'CENTER', |
| | | collision: true, |
| | | auto: 'on', |
| | | |
| | | } |
| | | |
| | | |
| | | /* 构造 Marker 并添加到地图上 */ |
| | | var panelSet1 = {...panelSet}; |
| | | if (panelSet.auto === 'on') { |
| | | delete panelSet1.domWidth; |
| | |
| | | var level = map.getLevel() |
| | | var floor = map.getFloor(level); |
| | | domMarker.addTo(floor); |
| | | localStorage.setItem("domMar",domMarker); |
| | | } |
| | | |
| | | function removeMarker() { |
| | | if (localStorage.getItem("domMar") == "" || localStorage.getItem("domMar") == null){ |
| | | |
| | | }else{ |
| | | domMarker.remove(); |
| | | } |
| | | } |
| | | |
| | | function removeMarker1() { |
| | | localStorage.removeItem("SanWei_JianZhu") |
| | | domMarker.remove(); |
| | | domMarker = null; |
| | | localStorage.removeItem("domMar") |
| | | } |
| | | function setFilterDisabled(isToggle, isDelete) { |
| | | if (isToggle) { |
| | |
| | | fn3(); |
| | | timer = setTimeout(f, 3000); |
| | | }, 3000); |
| | | |
| | | var ans = "Yes"; |
| | | //循环移动 |
| | | var personlist2 = FindShowJiZhan(); |
| | | var personlist3 = FindShowWangGuan(); |
| | | function fn3() { |
| | | if(localStorage.getItem("三维地图") != "执行"){ |
| | | return |
| | | } |
| | | var personlist1 = getRealPositionsanwei(); |
| | | var radioes = 0; |
| | | $.ajax({ |
| | | url: "/hxzkuwb/findPerAll", |
| | | type: "GET", |
| | | async: false, |
| | | success: function(data) { |
| | | radioes = data[0].redius |
| | | }, |
| | | }); |
| | | //显示基站 |
| | | if (localStorage.getItem("jizhanshow") == "1"){ |
| | | for(var i = 0 ; i <personlist2.length;i++){ |
| | | var level = map.getLevel(); |
| | | var floor1 = map.getFloor(level); |
| | | var xy |
| | | var turl; |
| | | xy = fengmap.FMCalculator.latlngToMapCoordinate({ |
| | | x: personlist2[i].baoliu6, |
| | | y: personlist2[i].baoliu7 |
| | | }); |
| | | turl = '/hxzkuwb/Icon/jizhan.png'; |
| | | fmarkerAnchor = new fengmap.FMImageMarker({ |
| | | url: turl, |
| | | x: xy.x, |
| | | y: xy.y, |
| | | }); |
| | | var windowHtml = '<div class="" style="height: 100px;width: 80px;text-align: center;position: absolute;top: -40px;left: -40px">'; |
| | | windowHtml += `<div class="content" style="border-radius: 5px;background-color:ghostwhite;"><a style="color: black;font-size: 14px"> 基站:` + personlist2[i].anchorid + `</a></div>`; |
| | | windowHtml += `</div>`; |
| | | lmarkerAnchor = new fengmap.FMDomMarker({ |
| | | x: xy.x, |
| | | y: xy.y, |
| | | content: windowHtml |
| | | }); |
| | | fmarkerAnchor.addTo(floor1); |
| | | lmarkerAnchor.addTo(floor1) |
| | | } |
| | | } |
| | | //显示网关 |
| | | if (localStorage.getItem("wangguanshow") == "1"){ |
| | | for(var i = 0 ; i <personlist3.length;i++){ |
| | | var level = map.getLevel(); |
| | | var floor1 = map.getFloor(level); |
| | | var xy |
| | | var turl; |
| | | xy = fengmap.FMCalculator.latlngToMapCoordinate({ |
| | | x: personlist3[i].lon, |
| | | y: personlist3[i].lat |
| | | }); |
| | | console.log(xy) |
| | | turl = '/hxzkuwb/Icon/wangguan.png'; |
| | | fmarkerAnchor = new fengmap.FMImageMarker({ |
| | | url: turl, |
| | | x: xy.x, |
| | | y: xy.y, |
| | | }); |
| | | var windowHtml = '<div class="" style="height: 100px;width: 80px;text-align: center;position: absolute;top: -40px;left: -40px">'; |
| | | windowHtml += `<div class="content" style="border-radius: 5px;background-color:ghostwhite;"><a style="color: black;font-size: 14px"> 网关:` + personlist3[i].loragwid + `</a></div>`; |
| | | windowHtml += `</div>`; |
| | | lmarkerAnchor = new fengmap.FMDomMarker({ |
| | | x: xy.x, |
| | | y: xy.y, |
| | | content: windowHtml |
| | | }); |
| | | fmarkerAnchor.addTo(floor1); |
| | | lmarkerAnchor.addTo(floor1) |
| | | } |
| | | } |
| | | |
| | | |
| | | |
| | | for (var i = 0; i < personlist1.length; i++) { |
| | | var xy; |
| | | var turl; |
| | |
| | | |
| | | |
| | | var fmarker = biaoqians[personlist1[i][0]]; |
| | | |
| | | var lmarker = biaoqianids[personlist1[i][0]]; |
| | | |
| | | var circles = biaoqianidc[personlist1[i][0]] |
| | | |
| | | |
| | | |
| | | if (fmarker) { |
| | | |
| | | // 如果标记存在,则更新坐标 |
| | | fmarker.moveTo({ |
| | | x: xy.x, |
| | |
| | | }); |
| | | if (circles){ |
| | | circles.remove(); |
| | | //从数据库获取半径 |
| | | var level = map.getLevel(); |
| | | var floor = map.getFloor(level); |
| | | var panelSet; |
| | | if(personlist1[i][22] <=3 && personlist1[i][3] >0){ |
| | | if(personlist1[i][22] <=3 && personlist1[i][3] == 1 && personlist1[i][22] > 0){ |
| | | //黄色告警区域 |
| | | panelSet = { |
| | | height: 10, |
| | |
| | | } |
| | | |
| | | /* 添加圆形 */ |
| | | var circle_radius = 60; |
| | | var circle_radius = radioes; |
| | | // segments 影响形成的圆形的边数和顶点数量,数值越大圆形在视觉上越 ’平滑‘ |
| | | var circle_segments = 500; |
| | | var circle_center = { |
| | |
| | | } |
| | | |
| | | /* 添加圆形 */ |
| | | var circle_radius = 60; |
| | | var circle_radius = radioes; |
| | | // segments 影响形成的圆形的边数和顶点数量,数值越大圆形在视觉上越 ’平滑‘ |
| | | var circle_segments = 500; |
| | | var circle_center = { |
| | |
| | | } |
| | | |
| | | /* 添加圆形 */ |
| | | var circle_radius = 60; |
| | | var circle_radius = radioes; |
| | | // segments 影响形成的圆形的边数和顶点数量,数值越大圆形在视觉上越 ’平滑‘ |
| | | var circle_segments = 500; |
| | | var circle_center = { |
| | |
| | | } |
| | | biaoqianidc[personlist1[i][0]] = circle; |
| | | } |
| | | |
| | | |
| | | |
| | | } else { |
| | | // 如果标记不存在,则添加marker |
| | | fmarker = new fengmap.FMImageMarker({ |
| | |
| | | content: windowHtml |
| | | }); |
| | | }else{ |
| | | var windowHtml = '<div class="" style="height: 100px;width: 100px;text-align: center;position: absolute;top: -30px;left: -30px">'; |
| | | windowHtml += `<div class="content" style="border-radius: 5px;background-color: ` + personlist1[i][21] + `;"><a style="color: white;font-size: 16px"> ` + personlist1[i][1] + `</a></div>`; |
| | | windowHtml += `</div>`; |
| | | lmarker = new fengmap.FMDomMarker({ |
| | | x: xy.x, |
| | | y: xy.y, |
| | | content: windowHtml |
| | | }); |
| | | if (personlist1[i][1].length>7){ |
| | | var name = personlist1[i][1].substring(0,6) |
| | | var windowHtml = '<div class="" style="height: 100px;width: 100px;text-align: center;position: absolute;top: -40px;left: -50px">'; |
| | | windowHtml += `<div class="content" style="border-radius: 5px;background-color: ` + personlist1[i][21] + `;"><a style="color: white;font-size: 16px"> ` + name + `</a></div>`; |
| | | windowHtml += `</div>`; |
| | | lmarker = new fengmap.FMDomMarker({ |
| | | x: xy.x, |
| | | y: xy.y, |
| | | content: windowHtml |
| | | }); |
| | | }else{ |
| | | var windowHtml = '<div class="" style="height: 100px;width: 100px;text-align: center;position: absolute;top: -40px;left: -50px">'; |
| | | windowHtml += `<div class="content" style="border-radius: 5px;background-color: ` + personlist1[i][21] + `;"><a style="color: white;font-size: 16px"> ` + personlist1[i][1] + `</a></div>`; |
| | | windowHtml += `</div>`; |
| | | lmarker = new fengmap.FMDomMarker({ |
| | | x: xy.x, |
| | | y: xy.y, |
| | | content: windowHtml |
| | | }); |
| | | } |
| | | } |
| | | |
| | | var level = map.getLevel(); |
| | | var floor = map.getFloor(level); |
| | | var panelSet; |
| | | if(personlist1[i][22] <=3 && personlist1[i][3] == 1){ |
| | | if(personlist1[i][22] <=3 && personlist1[i][3] == 1 && personlist1[i][22] > 0){ |
| | | //黄色告警区域 |
| | | panelSet = { |
| | | height: 10, |
| | |
| | | } |
| | | |
| | | /* 添加圆形 */ |
| | | var circle_radius = 60; |
| | | var circle_radius = radioes; |
| | | // segments 影响形成的圆形的边数和顶点数量,数值越大圆形在视觉上越 ’平滑‘ |
| | | var circle_segments = 500; |
| | | var circle_center = { |
| | |
| | | } |
| | | |
| | | /* 添加圆形 */ |
| | | var circle_radius = 60; |
| | | var circle_radius = radioes; |
| | | // segments 影响形成的圆形的边数和顶点数量,数值越大圆形在视觉上越 ’平滑‘ |
| | | var circle_segments = 500; |
| | | var circle_center = { |
| | |
| | | } |
| | | |
| | | /* 添加圆形 */ |
| | | var circle_radius = 60; |
| | | var circle_radius = radioes; |
| | | // segments 影响形成的圆形的边数和顶点数量,数值越大圆形在视觉上越 ’平滑‘ |
| | | var circle_segments = 500; |
| | | var circle_center = { |
| | |
| | | mercator.y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a))); |
| | | |
| | | return [mercator.x, mercator.y]; //[12727039.383734727, 3579066.6894065146] |
| | | |
| | | |
| | | } |
| | | localStorage.removeItem("SanWei_JianZhu") |
| | | function JianZhuMsg(Fid,Name){ |
| | | //根据Fid查询,如果查到则显示, |
| | | var data = "Fid="+Fid |
| | | $.get("/hxzkuwb/FindSanWeiIFID",data,function (data){ |
| | | if(data>0){ |
| | | localStorage.setItem("SanWei_JianZhu",Name) |
| | | localStorage.setItem("SanWei_JianZhuFID",Fid) |
| | | localStorage.setItem("DiaoYong_SanWeiFlOoor","FID") |
| | | }else{ |
| | | localStorage.removeItem("SanWei_JianZhu") |
| | | localStorage.removeItem("SanWei_JianZhuFID") |
| | | } |
| | | }) |
| | | |
| | | } |
| | | </script> |
| | | </html> |