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

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析DNS,个人版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: 数据可视化大屏百度地图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.百度地图开发:地图覆盖物实现纵横交错的交通网络


前言


f4e5c9e07cba47b3a19a6e3db5d2a93a.gif


项目说明

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


默认全部GPS的位置状态,分为在线设备位置展示和所有设备位置展示(包含离线未运行的设备);

指定GPS设备时间内的轨迹状态,默认2小时内的经纬度轨迹坐标线覆盖物的展示;

指定GPS设备状态展示,包含运行状态和定位状态,由后台API传输数据确定;

上述功能全部在SPA实现;


一、功能布局


76c39e6d7a0d40b0b767d575134bf4a6.png


基于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>


二、状态灯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;
        }


三、后台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');
    });


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

异步加载数据封装函数

  //加载标注;
    /*
    * 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);
            }
        });
    }


百度地图封装

  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);
        }


标注展示



  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);
        }
   }


轨迹展示



 //起始路线图;
        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);
        }


总结

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

相关文章
|
7天前
|
存储 弹性计算 大数据
阿里云服务器怎么样?云服务器ECS功能、租用费用全解析
阿里云ECS是弹性计算服务,提供安全可靠的云服务器,包括多种实例规格如经济型、通用型、计算型等,适合不同场景。ECS支持VPC专有网络、快照与镜像、多种付费模式。用户可按需选择计算架构、存储类型,享受灵活的网络控制、自动化数据备份和低成本计算资源。适用于Web应用、在线游戏、大数据分析和深度学习等场景。阿里云提供免费试用和优惠价格,服务众多知名企业,如新浪微博。
|
7天前
|
存储 弹性计算 大数据
阿里云服务器怎么样?全访问解析云服务器ECS功能、租用、优缺点及使用说明
阿里云ECS是弹性计算服务,提供安全可靠的云服务器,包括多种实例规格如经济型、通用型、计算型等,适合不同场景。ECS支持VPC专有网络、快照与镜像、多种付费模式。用户可根据业务需求选择实例、存储类型和网络配置。阿里云服务器适用于Web应用、游戏、大数据和深度学习等场景,提供免费试用和不同优惠套餐。众多知名企业如新浪微博等信赖阿里云服务。更多信息可访问阿里云官方网站。
|
20天前
|
存储 算法 C++
【Qt应用开发】复刻经典:基于Qt实现Windows风格计算器(加减乘除、删除、归零功能全解析)
在Qt中,"栈"的概念主要体现在两个层面:一是程序设计中的数据结构——栈(Stack),二是用户界面管理中的QStackedWidget控件。下面我将分别简要介绍这两个方面:
|
1月前
|
Java API
深入探讨 Java 8 集合操作:全面解析 Stream API 的强大功能
深入探讨 Java 8 集合操作:全面解析 Stream API 的强大功能
25 2
|
2月前
|
开发框架 前端开发 开发者
【Uniapp 专栏】Uniapp 的状态管理功能深度解析
【5月更文挑战第13天】Uniapp 的状态管理对于构建复杂跨平台应用至关重要,它包括全局变量、Vuex 风格管理。核心概念有 State、Actions 和 Mutations。通过状态定义、动作设计和突变管理,提高开发效率和代码可维护性。实际案例和与其他框架比较显示了 Uniapp 的优势。理解并有效利用状态管理,能提升应用质量和开发效率。
【Uniapp 专栏】Uniapp 的状态管理功能深度解析
|
7天前
|
物联网 大数据 定位技术
基于RFID、室内定位技术的图书馆定位系统功能解析
维小帮图书馆定位导航系统解决了复杂布局与找书难题,采用RFID、室内定位技术,结合大数据与云计算,提供电子地图、VR云览、AR导航及图书位置指引。通过集成座位预约,优化资源分配,提升读者体验,促进图书馆与城市的智慧化建设。
43 3
基于RFID、室内定位技术的图书馆定位系统功能解析
|
24天前
|
开发框架 Java 开发者
Spring框架的最新功能与应用案例解析
Spring框架的最新功能与应用案例解析
|
27天前
|
JSON 安全 Java
深入解析Jackson的ObjectMapper:核心功能与方法指南
深入解析Jackson的ObjectMapper:核心功能与方法指南
17 1
|
12天前
|
存储 SQL Python
`urllib.parse`模块是Python标准库`urllib`中的一个子模块,它提供了处理URL(统一资源定位符)的实用功能。这些功能包括解析URL、组合URL、转义URL中的特殊字符等。
`urllib.parse`模块是Python标准库`urllib`中的一个子模块,它提供了处理URL(统一资源定位符)的实用功能。这些功能包括解析URL、组合URL、转义URL中的特殊字符等。
|
1月前
|
安全 Java API
深入解析 Java 8 新特性:LocalDate 的强大功能与实用技巧
深入解析 Java 8 新特性:LocalDate 的强大功能与实用技巧
26 1

推荐镜像

更多