数据可视化大屏百度地图GPS轨迹位置感知状态开发实战案例解析（百度地图jsAPI，包含缩放控件、点线覆盖物、弹窗、标注图标分类功能）_百度地图数据可视化大屏

系列文章目录

1.数据可视化大屏应急管理综合指挥调度系统完整案例详解（PHP-API、Echarts、百度地图）
2.数据可视化大屏百度地图API开发：停车场分布标注和检索静态版
3.百度地图高级开发：map.getDistance计算多点之间的距离并输入矩阵
4.百度地图高级开发：获取某范围半径圆形区域检索覆盖物内的所有标注的解决方案
5.百度地图高级开发：LBS服务实时定位覆盖范围内关键词标注的解决方案
6.百度地图：监听地图缩放自动显示和隐藏的富文本标签
7.百度地图POI多信息点标注开发说明文档（php+layui+mysql+百度javascript API2.0+echarts4.8）
8.百度地图开发:地图调起API（Web端）使用终点经纬度直接调用百度地图导航信息的解决方案
9.百度地图开发自定义信息窗口openInfoWindow样式的解决方案
10.百度地图开发mapStyle个性化地图styleJson的配色解决方案
11.百度地图标注maker图标按照分类显示不同的样式
12.百度地图开发:地图覆盖物实现纵横交错的交通网络

---

前言

项目说明

成品为数据可视化大屏的一组百度地图GPS轨迹位置感知状态的插件，主要实现的功能包括：

• 默认全部GPS的位置状态，分为在线设备位置展示和所有设备位置展示（包含离线未运行的设备）；
• 指定GPS设备时间内的轨迹状态，默认2小时内的经纬度轨迹坐标线覆盖物的展示；
• 指定GPS设备状态展示，包含运行状态和定位状态，由后台API传输数据确定；
• 上述功能全部在SPA实现；

---

一、功能布局

基于layui开发，实现页面的容器构造，筛选查询功能。

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-row">
            <form class="layui-form layui-form-pane" style="margin: 10px;">
                <div class="demoTable">
                    <div class="layui-form-item">
                        <div style="width: 100%;background:#fff;height: 15px;"></div>
                        <label class="layui-form-label">设备名称</label>
                        <div class="layui-input-inline"><select name="group_id" lay-filter="group_id" id="group_id"></select></div>
                        <div class="layui-input-inline"><input type="text" id="start_time" name="start_time" class="layui-input" placeholder="起始时间"></div>
                        <div class="layui-input-inline"><input type="text" id="end_time" name="end_time" class="layui-input" placeholder="截至时间"></div>
                        <div class="layui-inline"><a class="layui-btn layui-btn-normal" id="reload"><i class="layui-icon layui-icon-search"></i> 查询</a></div>
                        <div class="layui-inline"><a class="layui-btn layui-bg-cyan" id="all"><i class="layui-icon layui-icon-engine"></i> 所有设备</a></div>
                        <div class="layui-inline"><button class="layui-btn layui-btn-primary layui-bg-red" type="button" id="refresh"><i class="layui-icon layui-icon-refresh"></i> 重置</button></div>
                        <label class="layui-form-label status" style="width: 8%;">运行状态(<span id="temp1" class="alert1"></span>)</label>
                        <label class="layui-form-label status" style="width: 8%;">定位状态(<span id="temp2" class="alert1"></span>)</label>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!--Baidu map-->
    <div class="layui-card">
        <div id="map" style="width: 100%;height: 820px;"></div>
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

二、状态灯CSS层叠样式表代码

        .alert1 {
            display: inline-block;
            width: 15px;
            height: 15px;
            line-height: 15px;
            border-radius: 50%;
            background: #e60000; /*FF0087*/
            margin: auto 5px;
        }

        .alert2 {
            display: inline-block;
            width: 15px;
            height: 15px;
            line-height: 15px;
            border-radius: 50%;
            background: #18a45b;
            margin: auto 5px;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

三、后台API通过ajax返回设备列表

加载layui组件，实现日期选择和下拉筛选功能。

    layui.use(['form', 'layer', 'laydate'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var laydate = layui.laydate;

        //时间选择器
        laydate.render({
            elem: '#start_time'
            , type: 'datetime'
            , value: from_time
        });

        laydate.render({
            elem: '#end_time'
            , type: 'datetime'
            , value: to_time
        });

        //获取设备列表;
        $.get('./api/api.php?act=getIotGPS&token=3cab7ce4142***', {}, function (res) {
            var memberHtml = '<option value="">在线GPS设备</option>'
            for (var i = 0; i < res.data.length; i++) {
                memberHtml += '<option value="' + res.data[i].group_id + '">' + res.data[i].device + '</option>'
            }
            $('#group_id').append(memberHtml);
            form.render();
        }, 'json');
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

四、百度地图核心功能开发

异步加载数据封装函数

  //加载标注;
    /*
    * group_id，组Id
    * fromType,0过滤离线数据，1全部数据
    * */
    function getLockMap(group_id, start_time, end_time, fromType) {
        $.getJSON('./api/api.php?act=getIotGPS&token=3cab7ce41**', {
            group_id: group_id,
            start_time: start_time,
            end_time: end_time
        }, function (res) {
            //console.log(res.data);
            var points = [];
            var data = res.data;
            if (data) {
                for (var i = 0; i < data.length; i++) {
                    var lnglat = data[i].str_sdata.split(",");
                    points.push({
                        item_name: data[i].device,
                        item_mtime: data[i].mtime,
                        item_data: data[i].historyData,
                        poi_lng: lnglat[0],
                        poi_lat: lnglat[1],
                        propertyType: data[i].data.propertyType,
                        sensorStatus: data[i].data.sensorStatus,
                        sdata: data[i].sdata,
                        group_seq: data[i].group_seq,
                    })
                }
            }
        
            //加载地图;
            if (group_id == "") {
                //运行状态;
                $(".status").css("display", "none");
                //未指定设备时，加载全部设备标注;
                if (fromType == 1) {
                    intMap(points, 0);//全部数据
                } else {
                    intMap(filterGps(points), 0);//在线数据
                }
            } else {
                //判断运行状态和定位状态;
                var itemStatus = [], sdata2 = [];
                var propertyData = points[0].propertyType.split(",");
                var statusData = points[0].sensorStatus.split(",");
                var sdataData = points[0].sdata.split(",");
                for (var n = 0; n < propertyData.length; n++) {
                    //运行状态
                    if (propertyData[n] == "GPS定位") {
                        itemStatus[0] = statusData[n];
                    }
                    //定位状态；
                    if (propertyData[n] == "GPS状态") {
                        sdata2[0] = sdataData[n];
                    }
                }
                //console.log(itemStatus.toString());
                //console.log(sdata2.toString());
                //显示状态;
                $(".status").css("display", "block");
                if (itemStatus.toString() == "正常运行") {
                    $("#temp1").removeClass("alert1").addClass("alert2");
                }
                if (sdata2.toString() == "1") {
                    $("#temp2").removeClass("alert1").addClass("alert2");
                }
                //指定设备时，加载路线图;
                intMap(points, 1);
            }
        });
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

百度地图封装

  var map;

    function intMap(markerArr, types) {
        map = new BMap.Map("map", {enableMapClick: false});
        map.centerAndZoom(new window.BMap.Point(markerArr[0].poi_lng, markerArr[0].poi_lat), 11);
        map.enableScrollWheelZoom();

        //添加缩放控件
        var ctrlNav = new window.BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            type: BMAP_NAVIGATION_CONTROL_LARGE
        });
        map.addControl(ctrlNav);

        //移除全部覆盖物
        map.clearOverlays();

        //加载标注;
        if (types == 0) {
            getMaker(markerArr);
        }

        //加载路线;
        if (types == 1) {
            makePolyLine(markerArr);
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

标注展示

  var map;
    function intMap(markerArr, types) {
        map = new BMap.Map("map", {enableMapClick: false});
        map.centerAndZoom(new window.BMap.Point(markerArr[0].poi_lng, markerArr[0].poi_lat), 11);
        map.enableScrollWheelZoom();

        //添加缩放控件
        var ctrlNav = new window.BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            type: BMAP_NAVIGATION_CONTROL_LARGE
        });
        map.addControl(ctrlNav);

        //移除全部覆盖物
        map.clearOverlays();

        //加载标注;
        if (types == 0) {
            getMaker(markerArr);
        }

        //加载路线;
        if (types == 1) {
            makePolyLine(markerArr);
        }
   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

轨迹展示

 //起始路线图;
        function makePolyLine(points) {
            var sy = new BMap.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
                scale: 0.5,//图标缩放大小
                strokeColor: '#fff',//设置矢量图标的线填充颜色
                strokeWeight: '1.5',//设置线宽
            });
            //var icons = new BMap.IconSequence(sy, '10', '20');

            //数据处理,创建polyline对象;
            var pois = [];
            var lineData = points[0].item_data;
            //var lng1 = lineData[0].sdata.split(",");
            //var lng2 = lineData[lineData.length - 1].sdata.split(",");
            //var point1 = new BMap.Point(lng1[0], lng1[1]);
            //var point2 = new BMap.Point(lng2[0], lng2[1]);

            //最后为准标注弹窗
            getMaker(markerArr);

            //起点标注;
            /* var marker1 = new BMap.Marker(point1);
             map.addOverlay(marker1);

             //终点标注;
             var marker2 = new BMap.Marker(point2);
             map.addOverlay(marker2);*/

            for (var n = 0; n < lineData.length; n++) {
                var d1 = lineData[n].sdata.split(",");
                pois.push(new BMap.Point(d1[0], d1[1]))
            }

            //console.log(pois);

            var polyline = new BMap.Polyline(pois, {
                enableEditing: false,//是否启用线编辑，默认为false
                enableClicking: true,//是否响应点击事件，默认为true
                //icons: [icons],
                strokeWeight: '8',//折线的宽度，以像素为单位
                strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
                strokeColor: "#18a45b" //折线颜色
            });
            map.addOverlay(polyline);

            //设置最佳视野POI;
            map.setViewport(pois);
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

---

总结

百度地图开发平台提供的jsAPI功能比较详尽，同时对应版本的类库说明也比较具体。在实际开发的过程中，根据项目需求，需要对jsAPI进行多次的封装和调用。@漏刻有时