如何在IoT Central仪表板的Azure Maps上渲染设备目标行驶路线

IoT Central原生地图瓦片组件不支持直接自定义路线绘制，无需单独部署HTML页面，可通过以下两种原生扩展方案实现需求： #

方案1：使用仪表板自定义卡片扩展（无需托管独立HTML文件） #

• IoT Central内置的自定义卡片组件支持直接嵌入内联HTML/JS代码，不需要单独维护外部html文件
• 把Azure Maps路线绘制逻辑直接写在自定义卡片的内联代码块即可，核心实现逻辑如下：
  1. 调用IoT Central开放API拉取当前卡车的实时遥测位置、已下发的调度目标坐标
  2. 调用Azure Maps路线服务API获取两点之间的路径坐标集
  3. 调用Azure Maps Web SDK的图层渲染接口，把路线直接绘制在自定义卡片内嵌的地图实例上
• 参考内联代码结构，直接填入自定义卡片的代码配置框即可使用：

// 初始化内嵌Azure Maps实例，不需要外部HTML文件
const map = new atlas.Map('cardMapContainer', {
  authOptions: {
    authType: 'subscriptionKey',
    subscriptionKey: '<替换为你的Azure Maps订阅密钥>'
  }
});
// 拉取IoT Central存储的车辆实时位置
const truckTelemetry = await fetch('https://<你的IoT Central实例名>.azureiotcentral.com/api/preview/devices/<卡车设备ID>/telemetry', {
  headers: {Authorization: 'SharedAccessSignature <替换为你的IoT Central API访问令牌>'}
}).then(res => res.json());
const currentLoc = {lat: truckTelemetry.location.lat, lon: truckTelemetry.location.lon};
const targetLoc = <替换为调度指令下发的目标坐标对象>;
// 请求行驶路线并渲染
const routeRes = await fetch(`https://atlas.microsoft.com/route/directions/json?api-version=1.0&query=${currentLoc.lat},${currentLoc.lon}:${targetLoc.lat},${targetLoc.lon}`, {
  headers: {'subscription-key': '<替换为你的Azure Maps订阅密钥>'}
}).then(res => res.json());
const routePoints = routeRes.routes[0].legs[0].points.map(p => [p.longitude, p.latitude]);
const routeLine = new atlas.data.LineString(routePoints);
// 添加路线图层到地图
const dataSource = new atlas.source.DataSource();
dataSource.add(routeLine);
map.sources.add(dataSource);
map.layers.add(new atlas.layer.LineLayer(dataSource, null, {
  strokeColor: '#0078D4',
  strokeWidth: 5,
  strokeOpacity: 0.8
}));

方案2：适配原生地图的轨迹展示能力（完全无需写前端代码） #

• 每次下发调度指令后，云端触发Azure Function逻辑：根据卡车当前位置、目标坐标调用Azure Maps路线服务，拆分出路径上间隔100米的轨迹点序列
• 将轨迹点序列存储到IoT Central的设备孪生属性中，在设备模板的地图字段配置里打开显示历史轨迹开关，调整轨迹保留时长匹配调度需求，原生地图会自动按时间顺序渲染出完整行驶路径

内容的提问来源于stack exchange，提问作者JWP