学习目标掌握添加实时数据的实现方法理解相关API的使用能够独立完成类似功能开发 核心概念向地图添加实时数据流。 完 整 代 码代码示例constmapnewmaplibregl.Map({container:map,style:https://tiles.openfreemap.org/styles/bright,zoom:2});map.on(load,(){window.setInterval((){// 发送GET请求获取两个随机数0到1之间的数字用于表示经度和纬度fetch(https://www.random.org/decimal-fractions/?num2dec10col1formatplainrndnew).then(rr.text()).then(text{// 将两个随机数0到1之间的数字转换为度数constcoordinatestext.split(\n).map(l(Number(l)*180)-90);constjson{type:Feature,geometry:{type:Point,coordinates}};// 更新地图上的无人机符号位置为新坐标map.getSource(drone).setData(json);// 飞行到无人机当前位置速度为0.5秒map.flyTo({center:json.geometry.coordinates,speed:0.5});});},2000);// 设置初始位置为(0,0)map.addSource(drone,{type:geojson,data:{type:Feature,geometry:{type:Point,coordinates:[0,0]}}});map.addLayer({id:drone,type:symbol,source:drone,layout:{icon-image:airport}});});代码示例!DOCTYPEhtmlhtmllangenheadtitleAdd live realtime data/titlemetapropertyog:descriptioncontent使用实时 GeoJSON 数据流在地图上移动符号。/metapropertyog:createdcontent2025-06-25/metacharsetutf-8metanameviewportcontentwidthdevice-width, initial-scale1linkrelstylesheethrefhttps://unpkg.com/maplibre-gl5.24.0/dist/maplibre-gl.css/scriptsrchttps://unpkg.com/maplibre-gl5.24.0/dist/maplibre-gl.js/scriptstylebody{margin:0;padding:0;}html, body, #map{height:100%;}/style/headbodydividmap/divscriptconstmapnewmaplibregl.Map({container:map,style:https://tiles.openfreemap.org/styles/bright,zoom:2});map.on(load,(){window.setInterval((){// 发起GET请求获取两个随机数fetch(https://www.random.org/decimal-fractions/?num2dec10col1formatplainrndnew).then(rr.text()).then(text{// 将0到1之间的两个随机数转换为度数constcoordinatestext.split(\n).map(l(Number(l)*180)-90);constjson{type:Feature,geometry:{type:Point,coordinates}};// 更新地图上无人机符号的位置map.getSource(drone).setData(json);// 让地图飞行到无人机的当前位置map.flyTo({center:json.geometry.coordinates,speed:0.5});});},2000);// 设置初始位置为(0,0)。map.addSource(drone,{type:geojson,data:{type:Feature,geometry:{type:Point,coordinates:[0,0]}}});map.addLayer({id:drone,type:symbol,source:drone,layout:{icon-image:airport}});});/script/body/html 代码解析初始化地图使用new maplibregl.Map()创建地图实例配置基本参数。本示例的核心特色是实现实时数据更新通过setInterval定时获取数据并更新地图上的符号位置。constmapnewmaplibregl.Map({container:map,style:https://tiles.openfreemap.org/styles/bright,zoom:2});关键配置项container: 地图容器的 DOM 元素 IDstyle: 使用 OpenStreetMap 风格的样式https://tiles.openfreemap.org/styles/brightzoom: 初始缩放级别为 2显示较大地理范围适合全球视野setInterval: 每 2000ms2秒执行一次数据获取和更新fetch: 从https://www.random.orgAPI 获取随机坐标数据map.getSource(‘drone’).setData(): 更新 GeoJSON 数据源实现实时位置更新map.flyTo(): 平滑飞行动画到新位置提升用户体验实时数据更新流程定时触发: 使用setInterval每 2 秒触发一次数据获取数据请求: 通过fetch请求外部 API 获取两个 0-1 范围的随机数坐标转换: 将 0-1 范围的随机数转换为经纬度坐标经度: -180 到 180纬度: -90 到 90构造数据: 创建 GeoJSON Feature 对象包含点几何坐标更新数据源: 使用setData()更新地图数据源视图跟随: 使用flyTo()让地图平滑移动到无人机新位置数据源配置// 添加 GeoJSON 数据源初始位置为 [0, 0]map.addSource(drone,{type:geojson,data:{type:Feature,geometry:{type:Point,coordinates:[0,0]}}});// 添加符号图层使用机场图标标记无人机位置map.addLayer({id:drone,type:symbol,source:drone,layout:{icon-image:airport// 使用内置的机场图标}});⚙️ 参数说明地图初始化参数参数类型必填默认值说明containerstring是-地图容器元素的 IDstylestring/object是-地图样式 URL 或内联样式对象zoomnumber否0初始缩放级别范围 0-22setInterval 参数参数类型必填说明callbackfunction是定时执行的回调函数每次执行时获取数据并更新地图delaynumber是执行间隔毫秒本示例为 20002秒flyTo 配置项参数类型必填默认值说明center[number, number]是-目标中心点坐标格式为 [经度, 纬度]speednumber否1.2动画速度范围 0.1-10值越小越慢easingfunction否-缓动函数控制动画节奏durationnumber否-动画持续时间毫秒与 speed 互斥setData 方法参数类型必填说明dataobject是GeoJSON 数据对象用于更新数据源 效果说明运行代码后页面显示一个交互式地图地图上有一个表示无人机位置的动态符号实时更新: 每 2 秒自动获取新的随机坐标并更新无人机位置平滑动画: 使用flyTo()实现平滑的地图飞行动画视角跟随无人机移动符号标记: 使用内置的机场图标airport标记无人机位置图标清晰可见初始位置: 无人机从坐标原点[0, 0]非洲附近开始全球范围: 随机坐标覆盖全球经度 -180 到 180纬度 -90 到 90交互功能: 支持鼠标拖拽、滚轮缩放、右键旋转等标准地图交互无人机符号会在全球范围内随机移动地图会自动平滑跟随无人机位置呈现出追踪飞行目标的效果。 常 见 问 题Q1: 实时数据不更新怎么办A:按以下步骤排查打开浏览器开发者工具F12检查 Console 面板是否有报错信息在 Network 面板查看random.org的请求是否成功返回数据确认 API 地址可正常访问可直接在浏览器中打开测试检查setInterval的时间间隔是否合理设置验证 GeoJSON 数据格式是否正确确保coordinates数组有效Q2: 如何调整更新频率A:修改setInterval的第二个参数毫秒数// 每秒更新一次window.setInterval((){/* ... */},1000);// 每5秒更新一次window.setInterval((){/* ... */},5000);Q3: 如何处理数据加载失败A:添加完善的错误处理逻辑fetch(url).then(r{if(!r.ok)thrownewError(网络请求失败: r.status);returnr.text();}).then(text{/* 处理数据 */}).catch(error{console.error(加载失败:,error);// 可选显示用户友好的错误提示alert(数据更新失败请稍后重试);});Q4: 实时更新会影响性能吗A:频繁更新可能影响性能。建议根据实际需求设置合理的更新间隔一般不小于 1000ms使用requestAnimationFrame优化动画渲染在页面卸载或不需要更新时使用clearInterval清除定时器避免在回调中执行复杂计算Q5: 如何暂停和恢复实时更新A:保存定时器 ID通过clearInterval控制letintervalId;// 开始更新intervalIdwindow.setInterval((){/* ... */},2000);// 暂停更新clearInterval(intervalId); 练习任务基础练习修改setInterval的时间间隔为 5000ms5秒观察更新频率变化并记录每次更新的时间戳进阶挑战添加一个按钮点击后暂停/恢复实时更新并显示当前状态运行中/已暂停拓展练习修改代码让无人机沿固定路径移动如正方形、圆形而不是随机移动拓展思考如何实现基于真实 GPS 数据的实时追踪功能需要哪些技术WebSocket、GPS 设备、数据解析等 最佳实践更新频率: 根据数据特性和用户体验设置合理的更新间隔一般不小于 1000ms避免过于频繁的更新导致性能问题错误处理: 添加完善的错误处理机制处理网络异常、数据格式错误和 API 限流资源清理: 在页面卸载beforeunload或不需要更新时使用clearInterval清除定时器避免内存泄漏动画优化: 使用flyTo()或easeTo()实现平滑过渡设置合适的速度参数提升用户体验数据验证: 在更新地图前验证数据格式确保 GeoJSON 结构正确防抖节流: 对用户交互事件添加节流避免在用户操作期间触发更新降级方案: 网络不可用时提供离线数据或友好的提示信息性能监控: 使用performanceAPI 监控更新耗时及时发现性能瓶颈 延伸阅读Map API文档MapLibre GL JS 官方文档[下一课预告]将继续学习地图图层的基础知识本文是MapLibre GL JS实践课程系列的一部分欢迎关注收藏
MapLibre GL JS第31课：添加实时数据
学习目标掌握添加实时数据的实现方法理解相关API的使用能够独立完成类似功能开发 核心概念向地图添加实时数据流。 完 整 代 码代码示例constmapnewmaplibregl.Map({container:map,style:https://tiles.openfreemap.org/styles/bright,zoom:2});map.on(load,(){window.setInterval((){// 发送GET请求获取两个随机数0到1之间的数字用于表示经度和纬度fetch(https://www.random.org/decimal-fractions/?num2dec10col1formatplainrndnew).then(rr.text()).then(text{// 将两个随机数0到1之间的数字转换为度数constcoordinatestext.split(\n).map(l(Number(l)*180)-90);constjson{type:Feature,geometry:{type:Point,coordinates}};// 更新地图上的无人机符号位置为新坐标map.getSource(drone).setData(json);// 飞行到无人机当前位置速度为0.5秒map.flyTo({center:json.geometry.coordinates,speed:0.5});});},2000);// 设置初始位置为(0,0)map.addSource(drone,{type:geojson,data:{type:Feature,geometry:{type:Point,coordinates:[0,0]}}});map.addLayer({id:drone,type:symbol,source:drone,layout:{icon-image:airport}});});代码示例!DOCTYPEhtmlhtmllangenheadtitleAdd live realtime data/titlemetapropertyog:descriptioncontent使用实时 GeoJSON 数据流在地图上移动符号。/metapropertyog:createdcontent2025-06-25/metacharsetutf-8metanameviewportcontentwidthdevice-width, initial-scale1linkrelstylesheethrefhttps://unpkg.com/maplibre-gl5.24.0/dist/maplibre-gl.css/scriptsrchttps://unpkg.com/maplibre-gl5.24.0/dist/maplibre-gl.js/scriptstylebody{margin:0;padding:0;}html, body, #map{height:100%;}/style/headbodydividmap/divscriptconstmapnewmaplibregl.Map({container:map,style:https://tiles.openfreemap.org/styles/bright,zoom:2});map.on(load,(){window.setInterval((){// 发起GET请求获取两个随机数fetch(https://www.random.org/decimal-fractions/?num2dec10col1formatplainrndnew).then(rr.text()).then(text{// 将0到1之间的两个随机数转换为度数constcoordinatestext.split(\n).map(l(Number(l)*180)-90);constjson{type:Feature,geometry:{type:Point,coordinates}};// 更新地图上无人机符号的位置map.getSource(drone).setData(json);// 让地图飞行到无人机的当前位置map.flyTo({center:json.geometry.coordinates,speed:0.5});});},2000);// 设置初始位置为(0,0)。map.addSource(drone,{type:geojson,data:{type:Feature,geometry:{type:Point,coordinates:[0,0]}}});map.addLayer({id:drone,type:symbol,source:drone,layout:{icon-image:airport}});});/script/body/html 代码解析初始化地图使用new maplibregl.Map()创建地图实例配置基本参数。本示例的核心特色是实现实时数据更新通过setInterval定时获取数据并更新地图上的符号位置。constmapnewmaplibregl.Map({container:map,style:https://tiles.openfreemap.org/styles/bright,zoom:2});关键配置项container: 地图容器的 DOM 元素 IDstyle: 使用 OpenStreetMap 风格的样式https://tiles.openfreemap.org/styles/brightzoom: 初始缩放级别为 2显示较大地理范围适合全球视野setInterval: 每 2000ms2秒执行一次数据获取和更新fetch: 从https://www.random.orgAPI 获取随机坐标数据map.getSource(‘drone’).setData(): 更新 GeoJSON 数据源实现实时位置更新map.flyTo(): 平滑飞行动画到新位置提升用户体验实时数据更新流程定时触发: 使用setInterval每 2 秒触发一次数据获取数据请求: 通过fetch请求外部 API 获取两个 0-1 范围的随机数坐标转换: 将 0-1 范围的随机数转换为经纬度坐标经度: -180 到 180纬度: -90 到 90构造数据: 创建 GeoJSON Feature 对象包含点几何坐标更新数据源: 使用setData()更新地图数据源视图跟随: 使用flyTo()让地图平滑移动到无人机新位置数据源配置// 添加 GeoJSON 数据源初始位置为 [0, 0]map.addSource(drone,{type:geojson,data:{type:Feature,geometry:{type:Point,coordinates:[0,0]}}});// 添加符号图层使用机场图标标记无人机位置map.addLayer({id:drone,type:symbol,source:drone,layout:{icon-image:airport// 使用内置的机场图标}});⚙️ 参数说明地图初始化参数参数类型必填默认值说明containerstring是-地图容器元素的 IDstylestring/object是-地图样式 URL 或内联样式对象zoomnumber否0初始缩放级别范围 0-22setInterval 参数参数类型必填说明callbackfunction是定时执行的回调函数每次执行时获取数据并更新地图delaynumber是执行间隔毫秒本示例为 20002秒flyTo 配置项参数类型必填默认值说明center[number, number]是-目标中心点坐标格式为 [经度, 纬度]speednumber否1.2动画速度范围 0.1-10值越小越慢easingfunction否-缓动函数控制动画节奏durationnumber否-动画持续时间毫秒与 speed 互斥setData 方法参数类型必填说明dataobject是GeoJSON 数据对象用于更新数据源 效果说明运行代码后页面显示一个交互式地图地图上有一个表示无人机位置的动态符号实时更新: 每 2 秒自动获取新的随机坐标并更新无人机位置平滑动画: 使用flyTo()实现平滑的地图飞行动画视角跟随无人机移动符号标记: 使用内置的机场图标airport标记无人机位置图标清晰可见初始位置: 无人机从坐标原点[0, 0]非洲附近开始全球范围: 随机坐标覆盖全球经度 -180 到 180纬度 -90 到 90交互功能: 支持鼠标拖拽、滚轮缩放、右键旋转等标准地图交互无人机符号会在全球范围内随机移动地图会自动平滑跟随无人机位置呈现出追踪飞行目标的效果。 常 见 问 题Q1: 实时数据不更新怎么办A:按以下步骤排查打开浏览器开发者工具F12检查 Console 面板是否有报错信息在 Network 面板查看random.org的请求是否成功返回数据确认 API 地址可正常访问可直接在浏览器中打开测试检查setInterval的时间间隔是否合理设置验证 GeoJSON 数据格式是否正确确保coordinates数组有效Q2: 如何调整更新频率A:修改setInterval的第二个参数毫秒数// 每秒更新一次window.setInterval((){/* ... */},1000);// 每5秒更新一次window.setInterval((){/* ... */},5000);Q3: 如何处理数据加载失败A:添加完善的错误处理逻辑fetch(url).then(r{if(!r.ok)thrownewError(网络请求失败: r.status);returnr.text();}).then(text{/* 处理数据 */}).catch(error{console.error(加载失败:,error);// 可选显示用户友好的错误提示alert(数据更新失败请稍后重试);});Q4: 实时更新会影响性能吗A:频繁更新可能影响性能。建议根据实际需求设置合理的更新间隔一般不小于 1000ms使用requestAnimationFrame优化动画渲染在页面卸载或不需要更新时使用clearInterval清除定时器避免在回调中执行复杂计算Q5: 如何暂停和恢复实时更新A:保存定时器 ID通过clearInterval控制letintervalId;// 开始更新intervalIdwindow.setInterval((){/* ... */},2000);// 暂停更新clearInterval(intervalId); 练习任务基础练习修改setInterval的时间间隔为 5000ms5秒观察更新频率变化并记录每次更新的时间戳进阶挑战添加一个按钮点击后暂停/恢复实时更新并显示当前状态运行中/已暂停拓展练习修改代码让无人机沿固定路径移动如正方形、圆形而不是随机移动拓展思考如何实现基于真实 GPS 数据的实时追踪功能需要哪些技术WebSocket、GPS 设备、数据解析等 最佳实践更新频率: 根据数据特性和用户体验设置合理的更新间隔一般不小于 1000ms避免过于频繁的更新导致性能问题错误处理: 添加完善的错误处理机制处理网络异常、数据格式错误和 API 限流资源清理: 在页面卸载beforeunload或不需要更新时使用clearInterval清除定时器避免内存泄漏动画优化: 使用flyTo()或easeTo()实现平滑过渡设置合适的速度参数提升用户体验数据验证: 在更新地图前验证数据格式确保 GeoJSON 结构正确防抖节流: 对用户交互事件添加节流避免在用户操作期间触发更新降级方案: 网络不可用时提供离线数据或友好的提示信息性能监控: 使用performanceAPI 监控更新耗时及时发现性能瓶颈 延伸阅读Map API文档MapLibre GL JS 官方文档[下一课预告]将继续学习地图图层的基础知识本文是MapLibre GL JS实践课程系列的一部分欢迎关注收藏
