yf_zd
/
yfwlwCut


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209
							{% load staticfiles %}
<!doctype html>
<html>

<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">
    <link rel="stylesheet" href="{% static 'bigData/css/reset.css'%}" media="all">
    <!-- <link rel="stylesheet" href="{% static 'font-awesome/4.5.0/css/font-awesome.css'%}" media="all"> -->
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <title>大数据平台</title>
    <style>
        #map {
            width: 100%;
            height: 100%;
            background: #01052d;
        }
        html,body{
            height: 100%;
            background: transparent;
        }
        /* 地图弹出框 */

        .custom-input-card {
            width: 18rem;
        }

        .custom-input-card .btn:last-child {
            margin-left: 1rem;
        }

        .content-window-card {
            position: relative;
            width: 23rem;
            /* padding: 0.75rem 0 0 1.25rem; */
            box-shadow: none;
            bottom: 0;
            left: 0;
        }

        .content-window-card p {
            height: 2rem;
        }

        .input-card {
            background-color: #00000063;
        }

        .amap-info-content {
            background-color: #00000063;
            border: 1px solid #288bc0;
            box-shadow: 0px 0px 5px 0px #4bfafd;
            color: #fff;
        }

        .amap-info-contentContainer:hover .amap-info-outer {
            box-shadow: 0px 0px 5px 0px #4bfafd;
        }

        .bottom-center .amap-info-sharp {
            border-top: 8px solid #2d92c6;
        }

        /* layui弹出框式样覆盖 */

        div.layui-layer-title {
            /* background-color: #3495c7; */
            background-color: #1c658b;
            color: #fff;
            border-bottom: 1px solid #082d48;
        }

        .layui-layer-content {
            background: #082d48;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <input type="hidden" id="type" value="{{type}}">

    <!-- 加载地图JSAPI脚本 -->
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=3939967b919a8003377dd113fc445a3d&plugin=AMap.Geocoder"></script>
    <script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
    <!-- <script src="{% static '/lib/layui/layui.js'%}"></script> -->
    <script>
        var map = new AMap.Map('map', {
            resizeEnable: true, //是否监控地图容器尺寸变化
            zoom: 11, //初始化地图层级
            center: [113.647216,34.743024] //初始化地图中心点
        });
        map.setMapStyle('amap://styles/blue');
        $.ajax({
            url: 'display_map',
            type: 'post',
            data: {
                type:$('#type').val()
            },
            dataType: 'json',
            success: function (data) {
                console.log(data)
                if(data.dat.length){
                    reateMarke(data.dat, $('#type').val())
                }
            },
            error: function (type) {
                console.log(type)
            }
        })
        function reateMarke(capitals, all) {
            map.clearMap();  // 清除地图覆盖物
            var scd = 0, cbd = 0, bzy = 0, qxz = 0, jk = 0;
            for (var i = 0; i < capitals.length; i += 1) {
                if (capitals[i].equip_type == 2) {
                    scd++;
                    var bgColor = '#00e921';
                    var animationName = 'myfirst01';
                    var equipType = '杀虫灯';
                    var icon = '../static/bigData/imgs/icon1.svg';
                } else if (capitals[i].equip_type == 3) {
                    cbd++;
                    var bgColor = '#fffa02';
                    var animationName = 'myfirst02';
                    var equipType = '测报灯';
                    var icon = '../static/bigData/imgs/icon2.svg';
                } else if (capitals[i].equip_type == 5) {
                    qxz++;
                    var bgColor = '#4b1382';
                    var animationName = 'myfirst03';
                    var equipType = '环境监测';
                    var icon = '../static/bigData/imgs/icon3.svg';
                } else if (capitals[i].equip_type == 6) {
                    bzy++;
                    var bgColor = '#ff7d00';
                    var animationName = 'myfirst04';
                    var equipType = '孢子仪';
                    var icon = '../static/bigData/imgs/icon4.svg';
                } else if (capitals[i].equip_type == 7) {
                    jk++;
                    var bgColor = '#1b7ddd';
                    var animationName = 'myfirst05';
                    var equipType = '监控';
                    var icon = '../static/bigData/imgs/icon5.svg';
                }
                if (all == 'all') {
                    var currStatus = true;
                } else {
                    var currStatus = capitals[i].equip_type == all
                }
                if (capitals[i].lng && capitals[i].lat && currStatus　) {
                    var text = new AMap.Marker({
                        map: map,
                        position: [parseFloat(capitals[i].lng), parseFloat(capitals[i].lat)],
                        icon: icon, // 添加 Icon 图标 URL
                        title: "",
                        // extData:{type:12,id:'00000000-0000-0000-0000-000000000000'}  //用户自定义属性
                    });

                    //构建自定义信息窗体
                    var info = [];
                    info.push("<div class='input-card content-window-card'> ");
                    info.push("<div style=\"padding:7px 0px 0px 0px;\"><div>" + equipType + "设备</div>");
                    info.push("<p style=\"padding:7px 0px 0px 0px;\">设备IMEI :" + capitals[i].e_id + "</p>");
                    info.push("<p class='input-item'>经度 : " + parseFloat(capitals[i].lng).toFixed(5) + "　纬度 : " + parseFloat(capitals[i].lat).toFixed(5) + "</p>");
                    info.push("<p class='input-item' id='currAddress'>地址 :</p></div></div>");
                    var content = info.join("");
                    var place = [parseFloat(capitals[i].lng), parseFloat(capitals[i].lat)]
                    addClickHandler(text, place, content) //标注点击事件
                    text.setMap(this.map); //将标注添加到地图上
                }
                if (i == capitals.length - 1) {
                    // $('#scdNum').html(scd);
                    // $('#cbdNum').html(cbd);
                    // $('#bzyNum').html(bzy);
                    // $('#qxzNum').html(qxz);
                    // $('#jkNum').html(jk);
                    // $('#allNum').html(capitals.length);
                    map.setFitView(); //标注在可视范围
                }
            }

        }
        function addClickHandler(marker, place, content) {
            marker.on("mouseover", function (e) {
                // 根据经纬度查询地址
                var geocoder;
                geocoder = new AMap.Geocoder({});
                geocoder.getAddress(place, function (status, result) {
                    if (status === 'complete' && result.regeocode) {
                        var address = result.regeocode.formattedAddress;
                        $('#currAddress').html('地址 :' + address)
                    } else {
                        alert('根据经纬度查询地址失败')
                    }
                });
                //在指定位置打开信息窗体
                var infoWindow = new AMap.InfoWindow({
                    content: content, //使用默认信息窗体框样式，显示信息内容
                    offset: new AMap.Pixel(5, -15)
                });
                infoWindow.open(map, place)
            });
        }
    </script>
</body>

</html>