uskycloud
/
usky-web-mobile


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580
							<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>协同作战地图</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <link rel="stylesheet" type="text/css" href="./js/M_select/M_select.css">
    <link rel="stylesheet" type="text/css" href="./js/notification/index.css">
    <style>
        html,
        body,
        #mapF {
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
    <div id="mapF" class="map" tabindex="0"></div>

    <div style="padding: 0 10px;">
        <div style="position: absolute;top: 0;display:inline-block;width: 50%;padding-top: 10px;">
            <select id="selectId" class="select02">
            </select>
        </div>
    </div>

    <div id="notification" style="display: none;">
        <div class="mask"> </div>
        <div class="content"> </div>
    </div>

    <script src="https://a.amap.com/jsapi_demos/static/china.js"></script>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: 'ce0e44758ad6b69607e23bf8e6a6ac11',
        }
    </script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=14aefebea926bb958032d5daf836fadf">
    </script>


    <!-- <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=8e266e1ac2ad2383c7773ff504ac248f">
    </script> -->
    <!-- <script src="https://webapi.amap.com/loader.js"></script> -->
    <script type="text/javascript" src="https://webapi.amap.com/ui/1.1/main.js"></script>

    <script type="text/javascript" src="./js/jquery-2.2.1.min.js"></script>
    <script src="./js/M_select/M_select.js"></script>
    <script type="text/javascript" src="http://172.16.120.165:13200/assets/map-data.js.js"></script>
    <script type="text/javascript" src="./js/map-text.js"></script>

    <script type="text/javascript">
        var checkedArray = {
                checkedData: 1,
                checkedList: [{
                    value: 1,
                    label: "消防站"
                }, {
                    value: 2,
                    label: "消防车"
                }, {
                    value: 3,
                    label: "监控"
                }, {
                    value: 4,
                    label: "重点单位"
                }, {
                    value: 5,
                    label: "消火栓/天然水源"
                }, ],
            } //类型筛选

        $.each(checkedArray.checkedList, function(i, item) {
            $("#selectId").append(`<option value="${item.value}">${item.label}</option>`)
        })
        $(function() {
            $(".select02").M_select({
                // 手动添加下拉款图片（以html页面为起始位置写路径）
                "Img": "./js/M_select/up4.png",
                "Img2": "./js/M_select/down4.png",
                "radius": "15px",
                "Title": "--请选择--",
                "inputName": "selected_value",
                // 默认选中的值（参数值写需要选中的select的value值）
                "selected": "1",
                Succee: function() {
                    checkedArray.checkedData = parseInt($(".inputHidden").val())
                    mapCluster();
                }
            });
        });

        //点击遮罩层关闭
        $('#notification .mask').on('click', function(e) {
            $('#notification').css('display', 'none')

            $('#notification .content #xxxx').remove()
        })
    </script>

    <script type="text/javascript">
        var cluster, markers = [];
        var map = [];
        var mapPolList = [];
        var colorList = [
            ['#99e', "#F33"],
            ['#ee6', "#c38"],
            ['#c38', "#F33"],
            ['#6E7', '#F33'],
            ['#6A7', "#F33"],
            ['#EF7', "#F33"],
            ['#AF7', "#F33"],
            ['#BAC', "#F33"],
            ['#BEF', "#F33"],
            ['#BBB', "#F33"],
            ['#EFA', "#F33"],
            ['#FE6', "#F33"],
            ['#7F6', "#F33"],
            ['#7dc', "#F33"],
        ];
        var colorIndList = [-1, 7, 21, 26, 31, 37, 46, 52, 57, 66, 68, 71, 74, 100]

        var polygon1 = null //选中地图区域数据存储
        var textList = [] //地图文字数据存储

        var streetTown = "" //街镇信息存储
        var streetTownList = [{
            value: "",
            label: "全区"
        }, {
            value: "华漕镇",
            label: "华漕镇"
        }, {
            value: "虹桥镇",
            label: "虹桥镇"
        }, {
            value: "梅陇镇",
            label: "梅陇镇"
        }, {
            value: "七宝镇",
            label: "七宝镇"
        }, {
            value: "颛桥镇",
            label: "颛桥镇"
        }, {
            value: "马桥镇",
            label: "马桥镇"
        }, {
            value: "吴泾镇",
            label: "吴泾镇"
        }, {
            value: "浦江镇",
            label: "浦江镇"
        }, {
            value: "新虹街道",
            label: "新虹街道"
        }, {
            value: "古美路街道",
            label: "古美路街道"
        }, {
            value: "江川路街道",
            label: "江川路街道"
        }, {
            value: "浦锦街道",
            label: "浦锦街道"
        }, {
            value: "莘庄镇",
            label: "莘庄镇"
        }, ]

        var tankuangXY = {} //撒点弹框坐标
        var arrayList = {} //撒点弹框数据存储


        function initMap() {
            map = new AMap.Map("mapF", {
                // mapStyle: 'amap://styles/d0ddc09bd7cbd7331a8e8fa691e5b0da', //设置地图的显示样式
                resizeEnable: true,
                zoom: 13,
                zooms: [3, 16],
            });


            AMap.plugin(["AMap.Geolocation"], () => {
                var geolocation = new AMap.Geolocation({
                    showButton: false, //是否显示定位按钮
                    buttonPosition: "RT", //定位按钮的位置
                    /* LT LB RT RB */
                    buttonOffset: new AMap.Pixel(10, 20), //定位按钮距离对应角落的距离
                    zoomToAccuracy: false, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                    showMarker: true, //是否显示定位点
                    markerOptions: {
                        //自定义定位点样式，同Marker的Options
                        offset: new AMap.Pixel(-18, -36),
                        content: '<img src="https://a.amap.com/jsapi_demos/static/resource/img/user.png" style="width:36px;height:36px"/>',
                    },
                    convert: true,
                    showCircle: true, //是否显示定位精度圈
                    circleOptions: {
                        //定位精度圈的样式
                        strokeColor: "#0093FF",
                        noSelect: true,
                        strokeOpacity: 0.5,
                        strokeWeight: 1,
                        fillColor: "#02B0FF",
                        fillOpacity: 0.25,
                    },
                });
                map.addControl(geolocation);
                // geolocation.getCurrentPosition();
            });

            mapPolList = mapData.map((el, ind) => {
                // console.log(val)

                let color = colorList[0];

                let polygon = new AMap.Polygon({
                    map: this.map,
                    zIndex: 2,
                    fillOpacity: 0.5,
                    path: el.value,
                    fillColor: color[0],
                    strokeColor: color[1],
                });

                //插入覆盖物自定义数据
                polygon.setExtData(el);

                //鼠标移入覆盖物事件
                polygon.on("mouseover", () => {
                    polygon.setOptions({
                        fillOpacity: 0.4,
                        fillColor: color[1],
                    });
                });

                //鼠标移出覆盖物事件
                polygon.on("mouseout", (val) => {
                    if (streetTown) {
                        if (streetTown == polygon.getExtData().name) {
                            polygon.setOptions({
                                fillOpacity: 0.4,
                                fillColor: color[1],
                            });
                        } else {
                            polygon.setOptions({
                                fillOpacity: 0.5,
                                fillColor: color[0],
                            });
                        }
                    } else {
                        polygon.setOptions({
                            fillOpacity: 0.5,
                            fillColor: color[0],
                        });
                    }
                });

                polygon.on("click", (handler, context) => {
                    if (polygon1) {
                        //修改上一次选中样式
                        polygon1.setOptions({
                            fillOpacity: 0.5,
                            fillColor: color[0],
                        });
                    }
                    //存储点击区域元素
                    polygon1 = polygon;

                    if (streetTown === polygon.getExtData().name) {
                        //修改全局街镇数据
                        streetTown = "";

                        //修改上一次选中样式
                        polygon1.setOptions({
                            fillOpacity: 0.5,
                            fillColor: color[0],
                        });
                        polygon1 = null;
                    } else {
                        //修改全局街镇数据
                        streetTown = polygon.getExtData().name;

                        //修改上一次选中样式
                        polygon1.setOptions({
                            fillOpacity: 0.4,
                            fillColor: color[1],
                        });
                    }

                    mapCluster()

                    //销毁点位信息弹窗
                    map.clearInfoWindow();
                });
            })

            mapText.map((val, ind) => {
                let text = new AMap.Text({
                    zIndex: 1,
                    style: {
                        color: "black",
                        backgroundColor: "transparent",
                        border: "none",
                    },
                    position: val.position,
                    text: val.name,
                    angle: val.angle,
                });

                text.setMap(map);

                textList.push(text);
            });

            map.setFitView();

            var logMapinfo = function() {
                var zoom = map.getZoom(); //获取当前地图级别

                var dom = document.getElementsByClassName("amap-overlay-text-container");
                for (let i = 0; i <= 13; i++) {
                    if (zoom > 12) {
                        dom[i].style.cssText = "display: block;font-size:13px !important;background: transparent;border: 0px;";
                    } else if (zoom > 10.5 || zoom > 11) {
                        dom[i].style.cssText = "display: block;font-size:11px !important;background: transparent;border: 0px;";
                    } else if (zoom < 10) {
                        dom[i].style.cssText = "display:none !important;font-size:11px;background: transparent;border: 0px;";
                    }
                }
            };

            map.on("zoomstart", logMapinfo);
        }


        /**
         * @聚合撒点
         * @param {数据list} data
         * @param {页面类型} pageType
         * @param {类型} type
         */
        function initMarkers(data, pageType, type) {
            var _this = this;

            var tag = 1; //1.自定义图标 2.完全自定义 3.默认
            var style = ""; //地图最大化小图标
            var points = []; //地图撒点处理数据存储

            if (pageType === "警情综合处置") {
                data.forEach((val) => {
                    points.push({
                        lnglat: [val.longitude, val.latitude],
                        array: val
                    });
                });

                if (type) {
                    if (type == 1) {
                        //消防站
                        style = `background: url('./img/map1.png') no-repeat; height: 53px; width: 47px; border: 0px !important; border-radius: 0px !important; box-shadow: 0 0 0 0 !important;`;
                    } else if (type == 2) {
                        //消防车
                        style = `background: url('./img/map2.png') no-repeat; height: 53px; width: 47px; border: 0px !important; border-radius: 0px !important; box-shadow: 0 0 0 0 !important;`;
                    } else if (type == 3) {
                        //监控
                        style = `background: url('./img/map3.png') no-repeat; height: 53px; width: 47px; border: 0px !important; border-radius: 0px !important; box-shadow: 0 0 0 0 !important;`;
                    } else if (type == 4) {
                        //重点单位
                        style = `background: url('./img/map4.png') no-repeat; height: 53px; width: 47px; border: 0px !important; border-radius: 0px !important; box-shadow: 0 0 0 0 !important;`;
                    } else if (type == 5) {
                        //消火栓/天然水源
                        style = `background: url('./img/map5.png') no-repeat; height: 53px; width: 47px; border: 0px !important; border-radius: 0px !important; box-shadow: 0 0 0 0 !important;`;
                    } else if (type == 6) {
                        //实时告警
                        style = `background: url('./img/map6.png') no-repeat; height: 53px; width: 47px; border: 0px !important; border-radius: 0px !important; box-shadow: 0 0 0 0 !important;`;
                    }
                } else {
                    style = `background-color: hsla(180, 100%, 50%, 0.5); height: 24px; width: 24px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 1px;`;
                }
            }

            var _renderMarker = function(context) {
                var content = `<div style="${style}"></div>`;
                var offset = new AMap.Pixel(-9, -9);
                context.marker.setContent(content);
                context.marker.setOffset(offset);

                // 给每个点坐标绑定鼠标经过事件，这里是实现点击功能的重点
                context.marker.on("mouseover", (e) => {
                    tankuangXY = {
                        x: e.pixel.x,
                        y: e.pixel.y
                    };

                    if (pageType === "警情综合处置") {
                        if (type !== 6) {
                            //   console.log(context.data[0].array);
                        }
                    }
                });

                context.marker.on("click", (e) => {
                    if (pageType === "警情综合处置") {
                        if (type == 1) {

                            $("#notification .content").append(
                                `
                                <div id="xxxx">
                                    <div class="title">${context.data[0].array.stationName}</div>
                                    <div class="borderBottom"></div>
                                    <div class="ctn">
                                        <div style="text-align: center;">经度：${context.data[0].array.longitude}</div>
                                        <div style="text-align: center;">纬度：${context.data[0].array.latitude}</div>
                                    </div>
                                </div>
                                `)

                            $('#notification').css('display', 'block')

                        } else if (type == 4) {
                            $("#notification .content").append(
                                `
                                <div id="xxxx">
                                    <div class="title">${context.data[0].array.companyName}</div>
                                    <div class="borderBottom"></div>
                                    <div class="ctn">
                                        <div style="width:100%">地址：${context.data[0].array.address}</div>
                                        <div style="width:100%">单位性质：${context.data[0].array.companyTypeName}</div>
                                    </div>
                                    <div class="ctn">
                                        <div >所属街镇：${context.data[0].array.streetTown}</div>
                                    </div>
                                </div>
                                `)

                            $('#notification').css('display', 'block')
                        } else if (type == 5) {
                            $("#notification .content").append(
                                `
                                <div id="xxxx">
                                    <div class="title">${context.data[0].array.waterName}</div>
                                    <div class="borderBottom"></div>
                                    <div class="ctn">
                                        <div style="width:100%">水源所在位置：${context.data[0].array.waterAddress}</div>
                                    </div>
                                </div>
                                `)

                            $('#notification').css('display', 'block')
                        } else if (type == 6) {
                            //实时告警
                            console.log(context.data[0].array);
                        }

                        console.log(context.data[0].array);
                    }
                });
            };

            if (cluster) {
                cluster.setMap(null);
            }
            if (tag == 2) {
                //完全自定义
                this.map.plugin(["AMap.MarkerClusterer"], function() {
                    cluster = new AMap.MarkerCluster(map, points, {
                        gridSize: 80, // 设置网格像素大小
                        renderClusterMarker: function(context) {
                            var factor = Math.pow(context.count / points.length, 1 / 18);
                            var div = document.createElement("div");
                            var Hue = 180 - factor * 180;
                            var bgColor = "hsla(" + Hue + ",100%,40%,0.7)";
                            var fontColor = "hsla(" + Hue + ",100%,90%,1)";
                            var borderColor = "hsla(" + Hue + ",100%,40%,1)";
                            var shadowColor = "hsla(" + Hue + ",100%,90%,1)";
                            div.style.backgroundColor = bgColor;
                            var size = Math.round(30 + Math.pow(context.count / points.length, 1 / 5) * 20);
                            div.style.width = div.style.height = size + "px";
                            div.style.border = "solid 1px " + borderColor;
                            div.style.borderRadius = size / 2 + "px";
                            div.style.boxShadow = "0 0 5px " + shadowColor;
                            div.innerHTML = context.count;
                            div.style.lineHeight = size + "px";
                            div.style.color = fontColor;
                            div.style.fontSize = "14px";
                            div.style.textAlign = "center";
                            context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
                            context.marker.setContent(div);
                        }, // 自定义聚合点样式
                        renderMarker: _renderMarker, // 自定义非聚合点样式
                    });
                });
            } else if (tag == 1) {
                //自定义图标
                var sts = [{
                    url: "https://a.amap.com/jsapi_demos/static/images/blue.png",
                    size: new AMap.Size(32, 32),
                    offset: new AMap.Pixel(-16, -16),
                }, {
                    url: "https://a.amap.com/jsapi_demos/static/images/green.png",
                    size: new AMap.Size(32, 32),
                    offset: new AMap.Pixel(-16, -16),
                }, {
                    url: "https://a.amap.com/jsapi_demos/static/images/orange.png",
                    size: new AMap.Size(36, 36),
                    offset: new AMap.Pixel(-18, -18),
                }, {
                    url: "https://a.amap.com/jsapi_demos/static/images/red.png",
                    size: new AMap.Size(48, 48),
                    offset: new AMap.Pixel(-24, -24),
                }, {
                    url: "https://a.amap.com/jsapi_demos/static/images/darkRed.png",
                    size: new AMap.Size(48, 48),
                    offset: new AMap.Pixel(-24, -24),
                }, ];

                map.plugin(["AMap.MarkerCluster"], function() {
                    cluster = new AMap.MarkerCluster(map, points, {
                        styles: sts,
                        gridSize: 80,
                        renderMarker: _renderMarker, // 自定义非聚合点样式
                    });
                });
            } else {
                //默认样式
                map.plugin(["AMap.MarkerCluster"], function() {
                    cluster = new AMap.MarkerCluster(map, points, {
                        gridSize: 80
                    });
                });
            }
        }


        /**
         * @高德地图聚合撒点
         */
        function mapCluster() {
            var label = "";
            checkedArray.checkedList.forEach((val) => {
                if (val.value == checkedArray.checkedData) {
                    label = val.label;
                }
            });


            $.get('http://xf.usky.cn:13203/prod-api/service-fire/demPoliceInfo/synthesizePoliceSituationScatterer', {
                    streetTown: streetTown,
                    scattererType: label
                }, function(res) {
                    console.log(res)

                    if (res.data.length > 0) {
                        initMarkers(res.data, "警情综合处置", checkedArray.checkedData);
                    } else {
                        initMarkers([], "警情综合处置", checkedArray.checkedData);
                    }
                })
                // 
        }

        initMap();
        mapCluster();
    </script>
    <style>
        .amap-logo,
        .amap-copyright {
            display: none !important;
        }
    </style>
</body>

</html>