物流轨迹展示是物流类产品的标配功能。本文以丰图地图JS SDK为例演示如何从零搭建一个可交互的物流车辆轨迹展示页面涵盖地图初始化、轨迹绘制、标记点添加和轨迹回放等核心功能。一、环境准备1.1 获取AppKey前往丰图开放平台lbs.sfmap.com.cn注册开发者账号创建应用后获取ApiKey。1.2 引入SDK在HTML页面中通过script标签引入SDK!DOCTYPE html html head meta charsetutf-8 title物流轨迹展示/title style #map-container { width: 100%; height: 600px; } /style /head body div idmap-container/div script srchttps://lbs.sfmap.com.cn/sfmapsdk/map?akYOUR_APP_KEY/script script // SDK加载完成后执行 /script /body /html对比其他平台丰图https://lbs.sfmap.com.cn/sfmapsdk/map?akYOUR_KEYv3.1高德https://webapi.amap.com/maps?v2.0keyYOUR_KEY百度https://api.map.baidu.com/api?typewebglv3.0akYOUR_AK腾讯https://map.qq.com/api/gljs?v1.expkeyYOUR_KEY引入方式基本一致都是script标签ApiKey参数。二、初始化地图// 丰图地图初始化 const map new SFMap.Map(map-container, { center: [116.397428, 39.90923], // [经度, 纬度] zoom: 12, ak: YOUR_APP_KEY // 支持 2D 和 3D });各平台初始化对比功能丰图高德百度腾讯初始化类SFMap.MapAMap.MapBMapGL.MapTMap.Map中心点格式[lng, lat][lng, lat]new Point(lng, lat){lat, lng}2D/3D切换2D模式viewMode初始化时选择自动坐标系GCJ-02GCJ-02BD-09GCJ-02注意坐标系差异百度使用BD-09其他三家使用GCJ-02。跨平台迁移时坐标转换是常见坑点。三、绘制物流轨迹假设从后端获取了一组GPS坐标点// 物流轨迹数据[经度, 纬度]数组 const trackPoints [ [116.397428, 39.90923], [116.407428, 39.91923], [116.417428, 39.92923], [116.427428, 39.93923], [116.437428, 39.94923] ]; // 创建线图层数据源 const lineSource new SFMap.GeoJSONSource({ type: FeatureCollection, features: [{ type: Feature, geometry: { type: LineString, coordinates: trackPoints } }] }); // 添加线图层 const lineLayer new SFMap.FtLine({ source: lineSource, layout: { line-cap: round, line-join: round }, paint: { line-color: #0066ff, line-width: 4, line-opacity: 0.8 } }); map.addLayer(lineLayer); // 自动调整视野以完整显示轨迹 map.fitBounds(lineSource.getBounds());各平台折线绘制API平台折线类添加到地图丰图SFMap.FtLinemap.addLayer()高德AMap.Polylinemap.add()百度BMapGL.Polylinemap.addOverlay()腾讯TMap.MultiPolyline初始化时设置丰图采用图层化架构类似Mapbox需要先创建数据源再添加图层高德百度腾讯采用覆盖物模式直接创建折线对象添加到地图。四、添加起止点标记// 起点标记绿色 const startMarker new SFMap.Marker({ position: trackPoints[0], content: div stylebackground:#00cc66;color:white;padding:4px 8px;border-radius:4px;font-size:12px;起点/div, offset: new SFMap.Pixel(-20, -40) }); // 终点标记红色 const endMarker new SFMap.Marker({ position: trackPoints[trackPoints.length - 1], content: div stylebackground:#ff3333;color:white;padding:4px 8px;border-radius:4px;font-size:12px;终点/div, offset: new SFMap.Pixel(-20, -40) }); map.add([startMarker, endMarker]);Marker的content属性支持自定义HTML可以灵活定制标记样式。也可以使用icon属性指定图标URL。五、轨迹回放功能实现动态的轨迹回放效果// 创建车辆标记 const truckMarker new SFMap.Marker({ position: trackPoints[0], content: div stylefont-size:20px;/div, offset: new SFMap.Pixel(-15, -30) }); map.add(truckMarker); // 回放控制 let currentIndex 0; let isPlaying false; let timer null; function startReplay() { if (isPlaying) return; isPlaying true; currentIndex 0; timer setInterval(() { if (currentIndex trackPoints.length) { stopReplay(); return; } truckMarker.setPosition(trackPoints[currentIndex]); currentIndex; }, 500); // 每500ms移动一步 } function stopReplay() { isPlaying false; clearInterval(timer); } // 播放/暂停按钮 document.getElementById(play-btn).onclick () { if (isPlaying) { stopReplay(); document.getElementById(play-btn).textContent 播放; } else { startReplay(); document.getElementById(play-btn).textContent 暂停; } };六、完整代码将以上代码组合一个完整的物流轨迹展示页面!DOCTYPE html html head meta charsetutf-8 title物流轨迹展示Demo/title style body { margin: 0; padding: 20px; font-family: sans-serif; } #map-container { width: 100%; height: 600px; border: 1px solid #ddd; } .controls { margin: 10px 0; } button { padding: 8px 16px; cursor: pointer; } /style /head body h2物流轨迹展示/h2 div classcontrols button idplay-btn播放/button button idreset-btn重置/button /div div idmap-container/div script srchttps://lbs.sfmap.com.cn/sfmapsdk/map?akYOUR_APP_KEY/script script // 轨迹数据 const trackPoints [ [116.397428, 39.90923], [116.407428, 39.91923], [116.417428, 39.92923], [116.427428, 39.93923], [116.437428, 39.94923] ]; // 初始化地图 const map new SFMap.Map(map-container, { center: [116.397428, 39.90923], zoom: 12, ak: YOUR_APP_KEY }); // 绘制轨迹图层化方式 const lineSource new SFMap.GeoJSONSource({ type: FeatureCollection, features: [{ type: Feature, geometry: { type: LineString, coordinates: trackPoints } }] }); const lineLayer new SFMap.FtLine({ source: lineSource, paint: { line-color: #0066ff, line-width: 4 } }); map.addLayer(lineLayer); // 起点终点标记 const startMarker new SFMap.Marker({ position: trackPoints[0], content: div stylebackground:#00cc66;color:white;padding:4px 8px;border-radius:4px;起点/div }); const endMarker new SFMap.Marker({ position: trackPoints[trackPoints.length - 1], content: div stylebackground:#ff3333;color:white;padding:4px 8px;border-radius:4px;终点/div }); map.add([startMarker, endMarker]); // 车辆标记 const truckMarker new SFMap.Marker({ position: trackPoints[0], content: div stylefont-size:20px;/div }); map.add(truckMarker); map.setFitView([polyline]); // 回放控制逻辑同上 let currentIndex 0; let isPlaying false; let timer null; document.getElementById(play-btn).onclick function() { if (isPlaying) { isPlaying false; clearInterval(timer); this.textContent 播放; } else { isPlaying true; this.textContent 暂停; timer setInterval(() { if (currentIndex trackPoints.length) { isPlaying false; clearInterval(timer); document.getElementById(play-btn).textContent 播放; return; } truckMarker.setPosition(trackPoints[currentIndex]); currentIndex; }, 500); } }; document.getElementById(reset-btn).onclick function() { stopReplay(); currentIndex 0; truckMarker.setPosition(trackPoints[0]); document.getElementById(play-btn).textContent 播放; }; /script /body /html这个Demo展示的是基础能力但丰图在物流场景的几个差异化能力值得留意100个途经点的路径规划。高德支持16个百度支持18个丰图支持100个。对于配送路线优化、多站点调度这类场景这个数字差异直接影响功能能不能做。地址服务能力。智能地址填写、四级地址解析——物流场景里地址解析的准确率直接影响配送效率丰图在这方面有比较深的积累。价格。对于中小团队丰图2万/年的项目版纯授权证书按需搭配接口的模式比5万/年的全家桶更容易接受。从初始化地图到绘制轨迹、添加标记、实现回放整个流程大概50行代码。如果你的产品核心场景是物流轨迹展示、地址管理这类需求值得一试。
丰图地图JS SDK实战：从零搭建一个物流轨迹展示页面
物流轨迹展示是物流类产品的标配功能。本文以丰图地图JS SDK为例演示如何从零搭建一个可交互的物流车辆轨迹展示页面涵盖地图初始化、轨迹绘制、标记点添加和轨迹回放等核心功能。一、环境准备1.1 获取AppKey前往丰图开放平台lbs.sfmap.com.cn注册开发者账号创建应用后获取ApiKey。1.2 引入SDK在HTML页面中通过script标签引入SDK!DOCTYPE html html head meta charsetutf-8 title物流轨迹展示/title style #map-container { width: 100%; height: 600px; } /style /head body div idmap-container/div script srchttps://lbs.sfmap.com.cn/sfmapsdk/map?akYOUR_APP_KEY/script script // SDK加载完成后执行 /script /body /html对比其他平台丰图https://lbs.sfmap.com.cn/sfmapsdk/map?akYOUR_KEYv3.1高德https://webapi.amap.com/maps?v2.0keyYOUR_KEY百度https://api.map.baidu.com/api?typewebglv3.0akYOUR_AK腾讯https://map.qq.com/api/gljs?v1.expkeyYOUR_KEY引入方式基本一致都是script标签ApiKey参数。二、初始化地图// 丰图地图初始化 const map new SFMap.Map(map-container, { center: [116.397428, 39.90923], // [经度, 纬度] zoom: 12, ak: YOUR_APP_KEY // 支持 2D 和 3D });各平台初始化对比功能丰图高德百度腾讯初始化类SFMap.MapAMap.MapBMapGL.MapTMap.Map中心点格式[lng, lat][lng, lat]new Point(lng, lat){lat, lng}2D/3D切换2D模式viewMode初始化时选择自动坐标系GCJ-02GCJ-02BD-09GCJ-02注意坐标系差异百度使用BD-09其他三家使用GCJ-02。跨平台迁移时坐标转换是常见坑点。三、绘制物流轨迹假设从后端获取了一组GPS坐标点// 物流轨迹数据[经度, 纬度]数组 const trackPoints [ [116.397428, 39.90923], [116.407428, 39.91923], [116.417428, 39.92923], [116.427428, 39.93923], [116.437428, 39.94923] ]; // 创建线图层数据源 const lineSource new SFMap.GeoJSONSource({ type: FeatureCollection, features: [{ type: Feature, geometry: { type: LineString, coordinates: trackPoints } }] }); // 添加线图层 const lineLayer new SFMap.FtLine({ source: lineSource, layout: { line-cap: round, line-join: round }, paint: { line-color: #0066ff, line-width: 4, line-opacity: 0.8 } }); map.addLayer(lineLayer); // 自动调整视野以完整显示轨迹 map.fitBounds(lineSource.getBounds());各平台折线绘制API平台折线类添加到地图丰图SFMap.FtLinemap.addLayer()高德AMap.Polylinemap.add()百度BMapGL.Polylinemap.addOverlay()腾讯TMap.MultiPolyline初始化时设置丰图采用图层化架构类似Mapbox需要先创建数据源再添加图层高德百度腾讯采用覆盖物模式直接创建折线对象添加到地图。四、添加起止点标记// 起点标记绿色 const startMarker new SFMap.Marker({ position: trackPoints[0], content: div stylebackground:#00cc66;color:white;padding:4px 8px;border-radius:4px;font-size:12px;起点/div, offset: new SFMap.Pixel(-20, -40) }); // 终点标记红色 const endMarker new SFMap.Marker({ position: trackPoints[trackPoints.length - 1], content: div stylebackground:#ff3333;color:white;padding:4px 8px;border-radius:4px;font-size:12px;终点/div, offset: new SFMap.Pixel(-20, -40) }); map.add([startMarker, endMarker]);Marker的content属性支持自定义HTML可以灵活定制标记样式。也可以使用icon属性指定图标URL。五、轨迹回放功能实现动态的轨迹回放效果// 创建车辆标记 const truckMarker new SFMap.Marker({ position: trackPoints[0], content: div stylefont-size:20px;/div, offset: new SFMap.Pixel(-15, -30) }); map.add(truckMarker); // 回放控制 let currentIndex 0; let isPlaying false; let timer null; function startReplay() { if (isPlaying) return; isPlaying true; currentIndex 0; timer setInterval(() { if (currentIndex trackPoints.length) { stopReplay(); return; } truckMarker.setPosition(trackPoints[currentIndex]); currentIndex; }, 500); // 每500ms移动一步 } function stopReplay() { isPlaying false; clearInterval(timer); } // 播放/暂停按钮 document.getElementById(play-btn).onclick () { if (isPlaying) { stopReplay(); document.getElementById(play-btn).textContent 播放; } else { startReplay(); document.getElementById(play-btn).textContent 暂停; } };六、完整代码将以上代码组合一个完整的物流轨迹展示页面!DOCTYPE html html head meta charsetutf-8 title物流轨迹展示Demo/title style body { margin: 0; padding: 20px; font-family: sans-serif; } #map-container { width: 100%; height: 600px; border: 1px solid #ddd; } .controls { margin: 10px 0; } button { padding: 8px 16px; cursor: pointer; } /style /head body h2物流轨迹展示/h2 div classcontrols button idplay-btn播放/button button idreset-btn重置/button /div div idmap-container/div script srchttps://lbs.sfmap.com.cn/sfmapsdk/map?akYOUR_APP_KEY/script script // 轨迹数据 const trackPoints [ [116.397428, 39.90923], [116.407428, 39.91923], [116.417428, 39.92923], [116.427428, 39.93923], [116.437428, 39.94923] ]; // 初始化地图 const map new SFMap.Map(map-container, { center: [116.397428, 39.90923], zoom: 12, ak: YOUR_APP_KEY }); // 绘制轨迹图层化方式 const lineSource new SFMap.GeoJSONSource({ type: FeatureCollection, features: [{ type: Feature, geometry: { type: LineString, coordinates: trackPoints } }] }); const lineLayer new SFMap.FtLine({ source: lineSource, paint: { line-color: #0066ff, line-width: 4 } }); map.addLayer(lineLayer); // 起点终点标记 const startMarker new SFMap.Marker({ position: trackPoints[0], content: div stylebackground:#00cc66;color:white;padding:4px 8px;border-radius:4px;起点/div }); const endMarker new SFMap.Marker({ position: trackPoints[trackPoints.length - 1], content: div stylebackground:#ff3333;color:white;padding:4px 8px;border-radius:4px;终点/div }); map.add([startMarker, endMarker]); // 车辆标记 const truckMarker new SFMap.Marker({ position: trackPoints[0], content: div stylefont-size:20px;/div }); map.add(truckMarker); map.setFitView([polyline]); // 回放控制逻辑同上 let currentIndex 0; let isPlaying false; let timer null; document.getElementById(play-btn).onclick function() { if (isPlaying) { isPlaying false; clearInterval(timer); this.textContent 播放; } else { isPlaying true; this.textContent 暂停; timer setInterval(() { if (currentIndex trackPoints.length) { isPlaying false; clearInterval(timer); document.getElementById(play-btn).textContent 播放; return; } truckMarker.setPosition(trackPoints[currentIndex]); currentIndex; }, 500); } }; document.getElementById(reset-btn).onclick function() { stopReplay(); currentIndex 0; truckMarker.setPosition(trackPoints[0]); document.getElementById(play-btn).textContent 播放; }; /script /body /html这个Demo展示的是基础能力但丰图在物流场景的几个差异化能力值得留意100个途经点的路径规划。高德支持16个百度支持18个丰图支持100个。对于配送路线优化、多站点调度这类场景这个数字差异直接影响功能能不能做。地址服务能力。智能地址填写、四级地址解析——物流场景里地址解析的准确率直接影响配送效率丰图在这方面有比较深的积累。价格。对于中小团队丰图2万/年的项目版纯授权证书按需搭配接口的模式比5万/年的全家桶更容易接受。从初始化地图到绘制轨迹、添加标记、实现回放整个流程大概50行代码。如果你的产品核心场景是物流轨迹展示、地址管理这类需求值得一试。
