基于Leaflet实现车辆快速定位及车辆状态信息查看

1. 根据车辆实时经纬度信息，判断其方位角后选用对应的自定义图标标记（注：方位角度不同采用的图标不同）；
2. 点击左上角搜索按钮可展开输入车辆自编号，并完成相关定位操作；点击车辆图标可查看车辆速度、海拔高度、平均油耗、行驶里程、行驶时间、机油压力、车辆仪表盘实时数据以及定位地点（调用阿里云逆地理编码接口，将经纬度转换为详细结构化的地址）；

效果图：

    // 经纬度 | 地图视区_存放一次性加载的车辆location数据 | GPS终端号
    var longitudeAndLatitude, carLocationList, gpsTermina;

    /** 聚类 */
    var markers = L.markerClusterGroup({disableClusteringAtZoom: 17});

    /** 谷歌地图 */
    var normalMap = L.tileLayer.chinaProvider('Google.Normal.Map', {
            maxZoom: 18,
            minZoom: 5
        }),
        routeMap = L.tileLayer.chinaProvider('Google.Satellite.Annotion', {
            maxZoom: 18,
            minZoom: 3
        });

    /** 高德地图 */
    var Gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
            maxZoom: 18,
            minZoom: 5
        }),
        Gaodimgem = L.tileLayer.chinaProvider('GaoDe.Satellite.Map', {
            maxZoom: 18,
            minZoom: 5
        }),
        Gaodimga = L.tileLayer.chinaProvider('GaoDe.Satellite.Annotion', {
            maxZoom: 18,
            minZoom: 5
        }),
        Gaodimage = L.layerGroup([Gaodimgem, Gaodimga]);

    /** 地图类型 */
    var baseLayers = {
        "谷歌地图": normalMap,
        "谷歌影像": routeMap,
        "高德地图": Gaode,
        "高德影像": Gaodimage
    }

    /** 查询车辆位置集合 */
    $.post(prefix + "/queryTheVehicle", function (results) {
        if (JSON.parse(results.msg).length == 0) {
            $.modal.msgError("Hi，受天气影响，暂无车辆位置信息！");
            return false;
        }
        // 将location结果存放起来
        var data = $.parseJSON(results.msg);

        // 将location结果存放起来
        carLocationList = $.parseJSON(results.msg);

        // set center from first location
        var map = new L.Map('map', {
            zoom: 15,
            center: [data[1].y, data[1].x],
            layers: [routeMap],
        });

        L.control.layers(baseLayers).addTo(map);

        map.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: '&copy; <a href="http://www.sntonly.com/">OfficialWebsite</a> contributors, Points &copy 2020 Tonly'
        }));	// base layer

        // layer contain searched elements | 层包含搜索服务
        var markersLayer = new L.LayerGroup();
        map.addLayer(markersLayer);

        function customTip(text, val) {
            return '<a href="#">' + text + '<em style="background:' + text + '; width:14px;height:14px;float:right"></em></a>';
        }

        map.addControl(new L.Control.Search({
            layer: markersLayer,
            buildTip: customTip,
            autoType: true
        }));

        $.post(prefix + "/selectCanDataList", function (results) {
            var locationMap = new Map();
            for (var j in results) {
                if (results[j].tboxVin != null && results[j].plate != null) {
                    locationMap.set(results[j].tboxVin, results[j].plate)
                }
            }

            // populate map with markers from sample data | 使用来自示例数据的标记填充map
            for (i in data) {

                var title = locationMap.get(data[i].uid);	// value searched | 搜索值

                var loc = (data[i].y + "," + data[i].x).split(',');	// position found | 位置发现

                // 判断车辆状态（0在线 | 1离线）
                if (data[i].status == 0) {
                    // 自定义（在线）图标标记
                    var onlineIcon = L.icon({
                        iconUrl: "../img/online/" + data[i].angle + ".png",
                        iconSize: [48, 48], // size of the icon | 图标的大小
                        shadowSize: [50, 64], // size of the shadow | 阴影的大小
                        // iconAnchor: [22, 94], // point of the icon which will correspond to marker's location | 对应于标记位置的图标点
                        shadowAnchor: [4, 62],  // the same for the shadow | 影子也是一样
                        // popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor | 相对于图标描点，弹出窗口应该打开的点
                    });
                    var marker = new L.Marker(new L.latLng(loc), {icon: onlineIcon, title: title + "|" + data[i].uid});// se property searched
                    markers.addLayer(marker);

                } else {
                    // 自定义（离线）图标标记
                    var offlineIcon = L.icon({
                        iconUrl: "../img/offline/" + data[i].angle + ".png",
                        iconSize: [48, 48], // size of the icon | 图标的大小
                        shadowSize: [50, 64], // size of the shadow | 阴影的大小
                        // iconAnchor: [22, 94], // point of the icon which will correspond to marker's location | 对应于标记位置的图标点
                        shadowAnchor: [4, 62],  // the same for the shadow | 影子也是一样
                        // popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor | 相对于图标描点，弹出窗口应该打开的点
                    });
                    var marker = new L.Marker(new L.latLng(loc), {icon: offlineIcon, title: title + "|" + data[i].uid});// se property searched
                    markers.addLayer(marker);
                }

                // var marker = new L.Marker(new L.latLng(loc), {title: title + "|" + data[i].uid});// se property searched
                marker.bindPopup(contentStrings);
                markersLayer.addLayer(markers);

                // bind event on marker | 标记上的绑定事件
                marker.on('click', function (e) {
                    gpsTermina = e.sourceTarget.options.title;
                    gpsTermina = gpsTermina.substring(gpsTermina.indexOf("|") + 1, gpsTermina.length);

                    $.post(prefix + "/selectCanDataList", {
                        tboxVin: gpsTermina
                    }, function (results) {
                        // 从Redis结果中检索车辆所在位置海拔高度
                        var locationMaps = new Map();
                        for (var i in carLocationList) {
                            locationMaps.set(carLocationList[i].uid, carLocationList[i].altitude);
                            locationMaps.set(carLocationList[i].uid + "xy", carLocationList[i].x + "," + carLocationList[i].y);
                        }
                        if (locationMaps.get(gpsTermina)) {
                            // 海拔高度
                            var altitude = locationMaps.get(gpsTermina);
                            // 经纬度
                            longitudeAndLatitude = locationMaps.get(gpsTermina + "xy");
                        }
                       
                    })


                })
            }
            map.addLayer(markers);

        })

    });

    // 查看地址
    function getLocationDetails() {
        $.post(prefix + "/getLocationDetails", {
            longitudeAndLatitude: longitudeAndLatitude
        }, function (results) {
            $("#clickLocation").hide();
                        $("#detailedAddress").html(JSON.parse(results.msg).regeocode.formatted_address);
            $("#detailedAddress").show();
        });
    };