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

基于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 locationvar 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('{s}.tile.openstreetmap/{z}/{x}/{y}.png', {maxZoom: 18,attribution: '&copy; <a href="/">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 | 使用来自示例数据的标记填充mapfor (i in data) {var title = (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 searchedmarkers.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 searchedmarkers.addLayer(marker);}// var marker = new L.Marker(new L.latLng(loc), {title: title + "|" + data[i].uid});// se property searchedmarker.bindPopup(contentStrings);markersLayer.addLayer(markers);// bind event on marker | 标记上的绑定事件('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 ((gpsTermina)) {// 海拔高度var altitude = (gpsTermina);// 经纬度longitudeAndLatitude = (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();});};