背景:
-
安全监控:通过记录车辆轨迹,可以实时监控车辆的位置和行驶情况。一旦发生异常情况或者事故,可以通过轨迹数据进行回溯和分析,帮助确定责任和采取相应的应对措施,提高车辆安全性和驾驶员的安全意识。
-
预防盗窃和抢劫:车辆轨迹记录可以帮助预防车辆盗窃和抢劫事件的发生。通过实时监控和记录车辆的行驶轨迹,可以及时发现异常行为,并采取措施进行防范和报警,提高车辆安全性和防范能力。
-
调度管理:车辆轨迹可以提供车辆调度和管理的参考依据。通过分析车辆的行驶轨迹和行驶状态,可以优化车辆的调度计划,提高运输效率和减少成本。同时,还可以对驾驶员的驾驶行为进行监控和评估,提供培训和改进的指导。
-
客户服务:车辆轨迹记录可以提供客户服务的参考依据。通过记录车辆的行驶轨迹和到达时间,可以提供实时的位置信息和预计到达时间,提高客户的满意度和信任度。同时,还可以帮助处理客户的投诉和纠纷,提供有力的证据和解决方案。
-
数据分析和决策支持:通过对车辆轨迹数据的分析和挖掘,可以获取有关车辆运行状况、驾驶行为、路况状况等方面的信息。这些信息可以帮助优化车辆管理和调度计划,提高运输效率和减少成本。同时,还可以为决策者提供有效的数据支持,帮助做出正确的决策和规划
宜搭配置 :
【驾驶信息记录表】
字段截图
数据源配置
数据源名称 | 类型 | 请求地址 | 请求参数 | |
---|---|---|---|---|
postMap | GET | /dingtalk/web/宜搭应用的APP_ID/v1/form/saveFormData.json | { formUuid:"记录经纬度的表单ID", appType:"应用ID", formDataJson:state.formDataJson } | |
formDataJson | 变量 | |||
formInstId | 变量 | |||
postXY | GET | /dingtalk/web/APP_YCZ44DZWK5RY0M VICFYU/v1/form/updateFormData.json | { formInstId:state.formInstId, updateFormDataJson:state.updateFormDataJson } | |
updateFormDataJson | 变量 |
HTML组件代码
<!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">
<title>浏览器精确定位</title>
<style>
html,
body,
#container {
height: 100%;
}
.info {
width: 26rem;
}
</style>
<body>
<div id='container'></div>
<div class="info">
<h4 id='status'></h4>
<hr>
<p id='result'></p>
<hr>
<p>由于众多浏览器已不再支持非安全域的定位请求,为保位成功率和精度,请升级您的站点到HTTPS。</p>
</div>
</script>
<script type="text/javascript">
</script>
</body>
</html>
JS面板代码
// 加载样式表和地图脚本
export function loadMapDependencies() {
this.utils.loadStyleSheet("https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css");
this.utils.loadScript("https://webapi.amap.com/maps?v=1.4.15&key="高德开放平台申请的KEY"");
}
// 获取地图位置信息
export function getMapPosition() {
return new Promise((resolve, reject) => {
var map = new AMap.Map('container', {
resizeEnable: true
});
AMap.plugin('AMap.Geolocation', function () {
var geolocation = new AMap.Geolocation({
enableHighAccuracy: true,
timeout: 10000,
buttonPosition: 'RB',
buttonOffset: new AMap.Pixel(10, 20),
zoomToAccuracy: true,
});
map.addControl(geolocation);
geolocation.getCurrentPosition(function (status, result) {
if (status == 'complete') {
var data = {
"底表经度组件唯一标识": result.position.lng,
"底表维度组件唯一标识": result.position.lat,
"底表时间组件唯一标识": new Date().getTime()
};
onComplete(result, data);
resolve(data);
} else {
onError(result);
reject(result);
}
});
});
// 定位成功的回调函数
function onComplete(data, formattedData) {
document.getElementById('status').innerHTML = '定位成功';
var str = [];
str.push('定位结果:' + data.position);
str.push('定位类别:' + data.location_type);
if (data.accuracy) {
str.push('精度:' + data.accuracy + ' 米');
}
str.push('是否经过偏移:' + (data.isConverted ? '是' : '否'));
document.getElementById('result').innerHTML = str.join('<br>');
console.log(data.position.lng, data.position.lat);
}
// 定位失败的回调函数
function onError(data) {
document.getElementById('status').innerHTML = '定位失败';
document.getElementById('result').innerHTML = '失败原因排查信息:' + data.message;
}
});
}
/**
* 点击按钮事件处理函数
*/
export async function handleButtonClick() {
const carId = this.$('本表单车牌号组件唯一标识').get("value")
const formDataJson = JSON.stringify({
底表车牌号组件唯一标识: carId,
底表使用人员唯一标识: window.loginUser.userName
})
this.setState({ formDataJson })
// 加载地图依赖
this.loadMapDependencies();
await this.dataSourceMap.postMap.load().then((result) => {
var mapArr = [];
setInterval(async () => {
const map = await this.getMapPosition();
mapArr.push(map);
this.setState({ formInstId: result, updateFormDataJson: JSON.stringify({ 底表行驶记录表子表单唯一标识: mapArr }) });
this.dataSourceMap.postXY.load().then(() => {
this.utils.toast({
title: '更新轨迹成功',
type: 'success',
size: 'large',
})
})
}, 10000)
})
}
按钮组件绑定动作
参考文档
浏览器精确定位-定位-示例中心-JS API 2.0 示例 | 高德地图API
跨应用数据源API | 钉钉宜搭·帮助中心【新增表单数据】
跨应用数据源API | 钉钉宜搭·帮助中心【更新表单数据】
【车辆轨迹经纬度记录】
字段截图
【驾驶轨迹查看表】
字段截图
数据源配置
数据源名称 | 类型 | 请求地址 | 请求参数 | |
---|---|---|---|---|
getXY | GET | /dingtalk/web/APP_YCZ44DZWK5RY0MVICFYU/v1 /form/searchFormDatas.json | { formUuid:"轨迹记录表表单ID", searchFieldJson:state.searchFieldJson } | |
searchFieldJson | 变量 |
JS面板代码
let marker, lineArr = [];
export function onClick() {
this.utils.loadStyleSheet("https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css");
this.utils.loadScript("https://webapi.amap.com/maps?v=1.4.15&key='替换为高德开放平台申请的KEY'").then(async () => {
const carId = this.$('当前表车牌号组件唯一标识').getValue()
this.setState({ searchFieldJson: JSON.stringify({ '轨迹记录表车牌号组件唯一标识': carId }) })
await this.dataSourceMap.getXY.load().then((res) => {
const arr = res.data[0].formData.轨迹记录表子表单唯一标识
arr.map((item) => {
lineArr.push([item.轨迹记录表子表单经度唯一标识, item.轨迹记录表子表单纬度唯一标识])
})
var map = new AMap.Map("container", {
resizeEnable: true,
center: lineArr[lineArr.length/2],
zoom: 17
});
marker = new AMap.Marker({
map: map,
position: lineArr[0],
icon: "https://webapi.amap.com/images/car.png",
offset: new AMap.Pixel(-26, -13),
autoRotation: true,
angle: -90,
});
// 绘制轨迹
var polyline = new AMap.Polyline({
map: map,
path: lineArr,
showDir: true,
strokeColor: "#28F", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 6, //线宽
// strokeStyle: "solid" //线样式
});
var passedPolyline = new AMap.Polyline({
map: map,
// path: lineArr,
strokeColor: "#AF5", //线颜色
// strokeOpacity: 1, //线透明度
strokeWeight: 6, //线宽
// strokeStyle: "solid" //线样式
});
marker.on('moving', function (e) {
passedPolyline.setPath(e.passedPath);
});
map.setFitView();
})
})
}
export function startAnimation() {
marker.moveAlong(lineArr, 200);
}
export function pauseAnimation() {
marker.pauseMove();
}
export function resumeAnimation() {
marker.resumeMove();
}
export function stopAnimation() {
marker.stopMove();
}
/**
* button onClick
*/
export function loadMpa() {
return (
<body>
<div id="container"></div>
<div class="input-card">
<h4>轨迹回放控制</h4>
<div class="input-item">
<input type="button" className="btn" value="开始动画" id="start" onClick={() => this.startAnimation()} />
<input type="button" class="btn" value="暂停动画" id="pause" onClick={() => this.pauseAnimation()} />
</div>
<div class="input-item">
<input type="button" class="btn" value="继续动画" id="resume" onClick={() => this.resumeAnimation()} />
<input type="button" class="btn" value="停止动画" id="stop" onClick={() => this.stopAnimation()} />
</div>
</div>
</body>
);
}
JSX组件代码
function render(){
return this.loadMpa()
}
按钮绑定动作
参考文档
轨迹回放-点标记-示例中心-JS API 2.0 示例 | 高德地图API
跨应用数据源API | 钉钉宜搭·帮助中心【根据条件搜索表单实例详情列表】
效果展示
每隔10秒轨迹获取一次
进行轨迹回放动画展示