【用车管理】监控车辆轨迹，宜搭x高德API_宜搭链接高德地图导航-CSDN博客

本文链接：https://blog.csdn.net/qq_43407325/article/details/134591473

背景：

安全监控：通过记录车辆轨迹，可以实时监控车辆的位置和行驶情况。一旦发生异常情况或者事故，可以通过轨迹数据进行回溯和分析，帮助确定责任和采取相应的应对措施，提高车辆安全性和驾驶员的安全意识。
预防盗窃和抢劫：车辆轨迹记录可以帮助预防车辆盗窃和抢劫事件的发生。通过实时监控和记录车辆的行驶轨迹，可以及时发现异常行为，并采取措施进行防范和报警，提高车辆安全性和防范能力。
调度管理：车辆轨迹可以提供车辆调度和管理的参考依据。通过分析车辆的行驶轨迹和行驶状态，可以优化车辆的调度计划，提高运输效率和减少成本。同时，还可以对驾驶员的驾驶行为进行监控和评估，提供培训和改进的指导。
客户服务：车辆轨迹记录可以提供客户服务的参考依据。通过记录车辆的行驶轨迹和到达时间，可以提供实时的位置信息和预计到达时间，提高客户的满意度和信任度。同时，还可以帮助处理客户的投诉和纠纷，提供有力的证据和解决方案。
数据分析和决策支持：通过对车辆轨迹数据的分析和挖掘，可以获取有关车辆运行状况、驾驶行为、路况状况等方面的信息。这些信息可以帮助优化车辆管理和调度计划，提高运输效率和减少成本。同时，还可以为决策者提供有效的数据支持，帮助做出正确的决策和规划

宜搭配置：

【驾驶信息记录表】

字段截图

数据源配置

数据源名称	类型	请求地址	请求参数
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	变量

数据源名称

类型

请求地址

请求参数

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秒轨迹获取一次

进行轨迹回放动画展示

【用车管理】监控车辆轨迹，宜搭x高德API

背景：

宜搭配置 ：

【驾驶信息记录表】

字段截图

数据源配置

HTML组件代码

JS面板代码

按钮组件绑定动作

参考文档

【车辆轨迹经纬度记录】

字段截图

【驾驶轨迹查看表】

字段截图

数据源配置

JS面板代码

JSX组件代码

按钮绑定动作

参考文档

效果展示

宜搭配置：