新BS平台
blame | 历史 | 补丁 | 提交 | 提交对比 | 忽略空白
zhitong.yu
2024-03-21 6beef2ce75f15a8b3d4394b83da62071c686eb3d 
 src/main/webapp/Home/Home1.jsp


@@ -9,17 +9,18 @@


<html>


<head>


    <title>Title</title>


    <script src="../fengmap/js/fengmap.map.min.js"></script>


    <script src="https://developer.fengmap.com/fmAPI/demos/libs/js/fengmap.plugin.layers.min.js"></script>


    <script src="https://developer.fengmap.com/fmAPI/demos/libs/layui/layui.js"></script>


    <script src="https://developer.fengmap.com/fmAPI/demos/libs/js/fengmap.map.min.js"></script>


    <script src="https://developer.fengmap.com/fmAPI/demos/libs/js/jquery-3.6.1.min.js"></script>


    <script src="https://developer.fengmap.com/fmAPI/demos/libs/js/FMUI.js"></script>


    <script src="https://developer.fengmap.com/fmAPI/demos/BaseMap/tileBaseMap/js/index.js"></script>


    <link rel="stylesheet" href="https://developer.fengmap.com/fmAPI/demos/libs/css/toolBarStyle.css">


    <script src="https://developer.fengmap.com/fmAPI/demos/libs/layui/layui.js"></script>


    <script src="../JS/FengMapUi.js"></script>


    <script src="https://developer.fengmap.com/fmAPI/demos/libs/js/imageBase64.js"></script>


    <link rel="stylesheet" href="https://developer.fengmap.com/fmAPI/demos/libs/layui/css/layui.css">


    <link rel="stylesheet" href="https://developer.fengmap.com/fmAPI/demos/libs/css/font/iconfont.css">


    <link rel="stylesheet" href="https://developer.fengmap.com/fmAPI/demos/libs/css/index.css">


    <link rel="stylesheet" href="https://developer.fengmap.com/fmAPI/demos/libs/css/layui.css">


    <link rel="stylesheet" href="https://developer.fengmap.com/fmAPI/demos/BaseMap/tileBaseMap/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>--%>




</head>


<body>


<%--<div class="layui-container">--%>


@@ -180,8 +181,9 @@


            dataType: 'json',


            success: function (data) {


                for (var i = 0; i < data.length; i++) {




                    //playMark[id,name,power,life,x,y,time]


                    realposition.push([data[i].tagid, data[i].name, data[i].power, data[i].life, data[i].baoliu2, data[i].baoliu3, data[i].time, data[i].fence == 1 || data[i].sos == 1, data[i].sousuo, data[i].shipin, data[i].inkaoqing, data


                    realposition.push([data[i].tagid, data[i].name, data[i].power, data[i].life,data[i].baoliu2,data[i].baoliu3,data[i].time, data[i].fence == 1 || data[i].sos == 1, data[i].sousuo, data[i].shipin, data[i].inkaoqing, data


                        [i].jiao, data[i].baoliu24, data[i].baoliu23, data[i].sex, data[i].minzu, data[i].phone, data[i].power, data[i].bumen, data[i].baoliu19,data[i].image,data[i].bumencolor,data[i].baoliu35])


                }


            },


@@ -474,20 +476,14 @@


            var tileLayer;




            var flag;


    var domMarker = null;




            var objType = {


                'tilelayer': fengmap.FMTileProvider.AMAP_VECTOR, //百度矢量图替换BAIDU_VECTOR


                'tilelayerAMAP': fengmap.FMTileProvider.AMAP_SATELLITE, //百度卫星图替换BAIDU_SATELLITE


            }








        //地图属性


    //地图属性


        var options = {


            container: document.getElementById("fengmap"),


                appName: 'map1',


                key: '09facc4ee52d1844bc1e561dad5abf59',


                mapID: '1732234539564851202',


                mapID: '1761938416618700801',


                themeID: '1737015464018382850',


                mapURL: '../fengmap/data/',


                themeURL: '../fengmap/data/theme/',


@@ -496,57 +492,79 @@




        }




        /* 初始化地图 */


            function InitMap(options) {


                const promise = new Promise((resolve, reject) => {


                    if (map != null) {


                        map.dispose();


                        map = null;


                    }


                    map = new fengmap.FMMap(options);


                    map.on('loaded', function () {


                        SetTileLayerMode('tilelayer')


                        resolve('地图初始化完成！');


                    });


                });


                return promise;


            };


    map = new fengmap.FMMap(options);




            // 设置底图


            function SetTileLayerMode(type) {


                if (tileLayer != null) {


                    tileLayer.remove(map);


                    tileLayer = null;


                }


                // tileLayer = new fengmap.FMTileLayer({


                //     mode: objType[type],


                //     offset: 1.0,


                //     filter: fengmap.FMTileFilter.NONE, //滤镜枚举，默认为fengmap.FMTileFilter.NONE，FMTileFilter类中预置了6种滤镜；也可以自定义滤镜（如果值为fengmap.FMTileFilter.CUSTOM，需要配置filterCustomization，自定义参数设置参考文档）


                // })


                // tileLayer.addTo(map);


    // 地图加载完成事件


    map.on('loaded', function () {


        // 获取地图楼层信息


        floorInfo = map.getFloorInfos()


    });


    // 注册地图点击事件


    map.on('click', function (event) {




                setFilterDisabled();


            }


        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)


    })




            // 显示/隐藏


            function toggleTileLayerVisibility() {


                if (!tileLayer) return


    var anchorObj = {


        'CENTER': fengmap.FMMarkerAnchor.CENTER,


        'BOTTOM': fengmap.FMMarkerAnchor.BOTTOM,


        'LEFT': fengmap.FMMarkerAnchor.LEFT,


        'LEFT_BOTTOM': fengmap.FMMarkerAnchor.LEFT_BOTTOM,


        'LEFT_TOP': fengmap.FMMarkerAnchor.LEFT_TOP,


        'RIGHT': fengmap.FMMarkerAnchor.RIGHT,


        'RIGHT_BOTTOM': fengmap.FMMarkerAnchor.RIGHT_BOTTOM,


        'RIGHT_TOP': fengmap.FMMarkerAnchor.RIGHT_TOP,


        'TOP': fengmap.FMMarkerAnchor.TOP,


    }




                tileLayer.visible = !tileLayer.visible;




                setFilterDisabled(true);


            }


    function addMarker(position) {




            // 删除


            function removeTileLayer() {


                if (!tileLayer) return


        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,


            domHeight: 40,


            anchor: 'CENTER',


            collision: true,


            auto: 'on',




                tileLayer.remove(map);


                tileLayer = null;


                setFilterDisabled(false, true);


            }


        }




            function setFilterDisabled(isToggle, isDelete) {




        /* 构造 Marker 并添加到地图上 */


        var panelSet1 = {...panelSet};


        if (panelSet.auto === 'on') {


            delete panelSet1.domWidth;


            delete panelSet1.domHeight;


        }


        domMarker = new fengmap.FMDomMarker({


            ...panelSet1,


            x: panelSet1.x,


            y: panelSet1.y,


            anchor: anchorObj[panelSet1.anchor],


            content: panelSet.content


        });


        var level = map.getLevel()


        var floor = map.getFloor(level);


        domMarker.addTo(floor);


    }




    function removeMarker() {


        domMarker.remove();


        domMarker = null;


    }


    function setFilterDisabled(isToggle, isDelete) {


                if (isToggle) {


                    let btn = document.getElementById('init');


                    if (!btn) return


@@ -572,28 +590,9 @@


                        }


                    }


                }


                updateUI();


            }




            //滤镜


            function FilterHandleClick(id, value) {


                if (!tileLayer) return




                tileLayer.setFilter(id, value);


            }




            //初始化滤镜


            function initFilterLayer() {


                // 修改设置面板展示状态


                updateUI(true);


            }




            UI.Init().then(() => {


                UI.Loading();


                return InitMap(options);


            }).then(() => {


                UI.Completed();


            });;








@@ -633,6 +632,7 @@


                    x: personlist1[i][4],


                    y: personlist1[i][5]


                });




                turl = '/hxzkuwb/Icon/' + personlist1[i][20] + '';






@@ -645,7 +645,7 @@






                if (fmarker) {


                    console.log("更新坐标")




                    // 如果标记存在，则更新坐标


                    fmarker.moveTo({


                        x: xy.x,


@@ -660,7 +660,7 @@


                        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] >0){


                            //黄色告警区域


                            panelSet = {


                                height: 10,


@@ -771,6 +771,7 @@


                        y: xy.y,


                    });


                    var windowHtml = "";




                   if(personlist1[i][3]=="0"){


                        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:rgb(102,102,102,0.5);"><a style="color: white;font-size: 16px"> ` + personlist1[i][1] + `-离线</a></div>`;


@@ -898,7 +899,7 @@


                    biaoqianids[personlist1[i][0]] = lmarker;


                    biaoqianidc[personlist1[i][0]] = circle;


                }


                if (localStorage.getItem("Online") == "No" && personlist1[i][3] == "0") {


                if (localStorage.getItem("oNLine") == "No" && personlist1[i][3] == "0") {


                    // 如果标记不在线且设备离线，则移除标记


                    fmarker.remove();


                    lmarker.remove();;


@@ -907,5 +908,17 @@


                }


            }


        }






        function getMercator(poi) { //[114.32894, 30.585748]


            var mercator = {};


            var earthRad = 6378137.0;




            mercator.x = poi[0] * Math.PI / 180 * earthRad;


            var a = poi[1] * Math.PI / 180;


            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]


        }


</script>


</html>