- 综合排序
- 最热优先
- 最新优先
- 来自专栏Leaflet
基于Leaflet的leaflet-sidebar侧边栏组件集成
如果你需要在Leaflet地图中增加一个侧边栏，以此来做一个额外的数据处理，那么您可以使用现成的leaflet-sidebar组件来帮助您加快开发速度，同时，该组件基于leaflet进行了扩展，更加灵活 言归正传，本文开始重点阐述如何进行组件的引入和集成。第一步、在github上想在组件。 可以看到，这个控件不仅支持leaflet，同时支持openlayers。所以非常好用。第三步、可以打开position-right.html，这个是官方提供的示例，用于演示侧边栏摆放在右边。 /css/leaflet-sidebar.css" /> <script src=".. 的侧边栏控制<em>组件</em>sidebar，同时详细说明了如何将sidebar集成到<em>leaflet</em>中。
8800编辑于 2026-04-10 - 来自专栏司想君
时间轴组件 by Vue.js
在公司的项目开发中，涉及到了移动端H5页面的时间轴展示效果。现有的轮子比如ElementUI、iView中，都没有专门的时间轴组件，于是就萌生了自己封装一个的想法。 说干就干，杜绝拖延症，正好今天周末，就封装了一个时间轴的组件上传到了npm，大家有需求可以安装试一下。 npm install uni-time-line -S 效果如下图： ? 实现思路 开发一个vue组件，首先要确定好三要素props、slot和event。因为第一版功能比较简单，所以只使用了props。 下一步就是如何实现时间轴的效果，在这里我想到的一个简单的思路是使用div的左边框。 其实大家看到的每条时间轴的竖线，都是一个box的左边框。 至此，时间轴的组件基本上就开发完了。 还可以根据自己的需求，添加标题行内容溢出显示省略号等各种效果。
9.3K20发布于 2019-03-08 - 来自专栏前端全栈开发者
小程序组件开发之时间轴组件及组件关系
本文是面向初学者的，大牛可以忽略，以时间轴组件为例简单聊一下小程序的组件开发。 先简单介绍一下公司业务和前端项目情况吧。公司是做金融行业财富管理的业务，涉及主要是做基金、保险这一块。 所以，本文要说的是我们组件库最近添加的一个新组件，时间轴组件，也是笔者开发的，笔者由于在公司主要负责小程序端的开发，基于业务的需要贡献了开发了不少组件，那么多组件之所以讲这个组件，是因为其他大部分组件的开发都很普通 ，体现不了小程序特有的东西，要么是组件太复杂代码太多不适合用文字表达，而时间轴（Timeline）组件我觉得刚刚好，不肥不瘦不偏不倚20不足18有余，比较好拿来作为素材聊聊。 时间轴组件（源代码）代码片段，点击链接可以直接通过小程序开发工具直接打开查看，可以边看源代码边看文章。 原文链接：https://zhangbing.site/2019/09/28/小程序组件开发之时间轴组件及组件关系/。
1.6K20发布于 2019-12-27 - 来自专栏Android机动车
Kotlin超简单实现StepView
TimeLineStepView 支持时间轴和StepView，三种布局，支持水平布局，垂直布局和自定义布局，截图如下 ? app:layoutType="right" /> 在代码中调用 //OrientationShowType对应三种布局方式 //OrientationShowType.TIMELINE(时间轴方式 = "订单提交成功描述", timeLineState = TimeLineState.ACTIVE)) listContent.add(BaseBean(leftTitle = "11 = "订单付款成功描述", timeLineState = TimeLineState.ACTIVE)) listContent.add(BaseBean(leftTitle = "11 = "仓库已经接单描述", timeLineState = TimeLineState.ACTIVE)) listContent.add(BaseBean(leftTitle = "11
91020发布于 2018-12-13 - 来自专栏新零售项目实践
洞见供应链 | 基于 React + Leaflet 的仓库与物流轨迹可视化实战
）指挥大屏/高并发轨迹→MapLibre（GPU加速）1.2系统架构二、React中集成Leaflet的基础实现2.1安装依赖npminstallleafletreact-leaflet⚠️别忘了引入CSS ：import'leaflet/dist/leaflet.css';2.2基础地图组件import{MapContainer,TileLayer}from'react-leaflet';import'leaflet ';importLfrom'leaflet';constcreateWarehouseIcon=(status)=>{constcolor=status==='warning'?' (w=>{cluster.addLayer(L.marker([w.lat,w.lng]));});map.addLayer(cluster);（1）降低DOM数量（2）提升缩放流畅度5.2时间轴联动轨迹 sequenceDiagramparticipantUIas时间轴participantMapas地图participantAPIasNode.jsUI->>Map:时间变化Map->>API:请求对应时段轨迹
2130编辑于 2026-05-09 - 来自专栏Leaflet
端午屈夫子祭-基于LeafLet的夫子一生时空轨迹纵览
以全新的一种视角去观察屈夫子的一生，基于LeafLet结合时间轴，完成时间与空间的时空纵览。最后祝所有的伙伴们端午安康，阖家幸福。 2、可视化采用组件 Leaflet.js是一个轻量级的二维地图展示的组件，适合进行地图的展示及综合浏览。jquery.js是一个es5的原生开发组件，这里功能较简单，暂不采用vue等新前端框架。 leaflet-timeline-slider.js是一个用于生成时间轴空间的简单组件，可以在前端生成时间轴。 /leaflet.css" /><link rel="stylesheet" href="css/screen.css" /><script src="<em>leaflet</em>/<em>leaflet</em>.js? 以全新的一种视角去观察屈夫子的一生，基于<em>LeafLet</em>结合<em>时间轴</em>，完成时间与空间的时空纵览。最后祝所有的伙伴们端午安康，阖家幸福。
8810编辑于 2026-05-05 - 来自专栏大数据文摘
【干货】21个数据可视化利器
Leaflet Leaflet是一个时髦的开源Javascript组件库，用来构建移动端的交互地图，具备了开发人员渴望的所有功能特点。Leaflet十分简单，性能和易用性也非常棒。 同时，Leaflet还提供了开放式的插件架构，如果需要扩展这些应用，你可以通过大量的插件来实现。 D3.js D3.js是数据驱动文件的缩写，它将强大的可视化组件与数据驱动决策方法相结合。它使用HTML，CSS和SVG来渲染出惊人的图表效果。 Timeline.js Timeline.js会让你爱不释手，它能帮助用户便捷和直观地来创建美丽的时间轴。它本身是一个开源工具，支持40种语言，同时允许你来创建可视化效果极佳且交互性很强的时间轴图表。 Dipity Dipity是另一款时间轴制作工具，用来帮你基于日期和时间组织页面内容。用户可以使用视频、音频、图像或者甚至社交媒体频道来创建和分享时间轴。这简直是报业、记者和博客版主的必备利器！
1.8K110发布于 2018-05-21 - 来自专栏BI工具
十款常用的数据展示（可视化）软件介绍，操作便捷，功能强大
数据展示（可视化）软件六：Dipity Dipity是创建时间轴相关界面的理想选择。 并提供各种可视组件：表格，常规统计图，html5统计图，地图等。 数据展示（可视化）软件九：Leaflet Leaflet是另一个支持HTML5和CSS3的地图工具，可以轻松使用OpenStreetMap的数据，并将这些完全集成交互式可视化数据。 Leaflet的内核库很小，但是有许多可以扩展功能的插件，例如：动态标签，蒙版和热图，它们非常适合需要显示地理位置的项目，小而完整。
5.1K10发布于 2020-06-19 - 来自专栏CDA数据分析师
21款酷炫的数据可视化工具，拿走不谢！
Leaflet ? Leaflet是为移动端友好型交互地图所做的开源JavaScript库，其中包含了大部分在线地图开发人员都需要的所有特征。Leaflet被设计为简单易用、性能优良的工具。 D3对网页标准的强调足以满足在所有主流浏览器上使用的可能性，使你免于被其他类型架构所捆绑的苦恼，它可以将视觉效果很棒的组件和数据驱动方法结合在一起。 Timeline.js Timeline.js会让你爱上制作漂亮的时间轴，因为它的操作非常简单直观。 如果想看到由这款app创建的时间轴案例，请移步Timeline JS3 查看。 Dipity Dipity也是一款做时间轴的工具，用于管理网站上的时间和日期相关内容非常有效。用户可以创造并分享他们精彩的交互式时间轴，内容形式多种多样，包括音频、视频和图像甚至社交媒体频道。
2.3K100发布于 2018-02-24 - 来自专栏钱塘大数据
20个数据可视化工具汇总，终于知道人家为啥那么牛X了
5 Leaflet ? OpenStreetMap data and integrate data visualisation in an HTML5/CSS3 wrapper 另外一个地图工具，支持 HTML5 和 CSS3 ，Leaflet Leaflet的内核库很小，但是有很多插件能扩展其功能，比如：动态标记、masks 和热图，非常适用于需要显示地理位置的项目。麻雀虽小，五脏俱全。 6 Timeline ? Timeline 是一个奇妙的小工具，坑绘制漂亮的交互式时间轴，用户滚动鼠标，时间轴会响应变化。点击时间轴上的元素，可显示更多信息。（MIT 开发） 7 Exhibit ?
2.9K60发布于 2018-02-28 - 来自专栏灯塔大数据
17款工具，让你的数据更美观
5 Timeline Timeline是由Simile发明的，可以让用户通过简单的滚动和水平拖拽而生成简单的交互时间轴。 ? 6 Leaflet Leaflet也是个开源的javascript库，用户可以创建友好互动的地图。 ?
1.2K50发布于 2018-04-09 - 来自专栏钱塘大数据
17款可视化工具，让你的数据美如画
Timeline Timeline是由Simile发明的，可以让用户通过简单的滚动和水平拖拽而生成简单的交互时间轴。 ? 6. Leaflet Leaflet也是个开源的javascript库，用户可以创建友好互动的地图。 动图 ? 7.
85360发布于 2018-07-30 - 来自专栏gis
基于Leaflet的VideoOverlay视频图层叠加实战
in the DOM.基于这个组件，在Leaflet的基础之上，就可以实现视频图层的叠加展示。 4、src目录是组件的源代码包，通常情况下不会修改这个目录下代码。3、相关限制这里指的必备条件，没有限定只能使用JQuery，开发者可以基于自己项目的实际情况，进行引用即可。 对于浏览器的要求则需要支持video元素和支持matrix3d()这个方法，否则将会影响组件的展示效果。博文编者采用的Chrome浏览器，具体版本是Chrome 102 64bit。 三、总结以上就是本文的主要内容，本文首先介绍了DistortableVideo组件的相关知识，它的github仓库信息，相关源代码的目录说明，使用依赖信息。 Html5案例，同时使用debug方式对视频图层的加载进行了步骤分析，希望可以帮助您更深度的理解这个组件。
8710编辑于 2026-04-18 - 来自专栏技术翻译
20个免费和开源数据可视化工具
Candela是一个可互操作的Web可视化组件的开源套件。 2. Charted Charted是一款免费的数据可视化工具，可让您从CSV文件和Google电子表格中创建折线图或条形图。 该收费包含集成组件，包括LineUp组件，UpSet组件和OnSet组件，Vega可视化和GeoJS地理空间可视化。该工具不存储数据或操纵它。 Leaflet Leaflet是一个开源JavaScript库，允许您制作适合移动设备的交互式地图。该工具有许多用于添加功能的插件，适用于各种桌面和移动平台。 7. 您可以使用工具中提供的模板连接您的Google云端硬盘帐户，以使用Google电子表格创建时间轴。使用JSON，您可以创建自定义安装。 13.
15.8K1214发布于 2018-11-19 - 来自专栏项目实战
生鲜溯源可视化系统：打造食品供应链透明化解决方案
三、前端可视化核心实现3.1 时间轴组件设计核心功能需求：按时间倒序展示养殖、加工、运输、销售各阶段。鼠标悬停显示该节点详细环境数据。关键异常事件（如温度超标）红色高亮。 ：支持通过鼠标滚轮进行时间范围缩放警戒线标注：当温度超过25°C时显示红色警示线3.3 地图轨迹可视化基于Leaflet实现运输路径动态展示：import { MapContainer, TileLayer , Polyline, Marker } from 'react-leaflet';/** * 轨迹地图组件，用于显示位置轨迹和标记点 * @param {Object} props - 组件属性 * 我们从系统架构设计开始，深入剖析了核心组件的实现细节，包括产品溯源主组件、时间轴可视化组件和传感器数据图表组件。 多维度可视化展示：整合时间轴、地理轨迹、环境数据图表三种视图，提供360°产品生命周期透视，直观展示生鲜产品流转全貌。
97223编辑于 2025-08-22 - 来自专栏国标视频云平台
SkeyeVSS综合安防视频云服监控录像回放控制之自定义可拖动时间轴组件
SkeyeVSS综合安防视频云服务通过接入SkeyeRMS录像服务器实现对系统里的摄像机等设备录像，通过自定义的时间轴组件对录像记录进行加载渲染,播放器回调时间与下面时间轴相互联动，集拖动、点击、缩放、 无限加载等于一体的时间轴组件。 （三角形）返回当前时间戳，再配合拉流进行播放，通过滚轮缩放最小精确到秒，最终效果如图所示：图片时间轴组件基本功能 时间轴初始化代码及录像时间段的数据格式，如下：<div class="timeline-group $emit('changeTime', data) }})1、<em>时间轴</em><em>组件</em>是使用canvas技术绘制，<em>组件</em>的宽高是自动根据外层div的宽高来自适应，通过设置外层div的宽高来控制即可。 'rgba(172,17,189,0.5)'} }]cellStyle: { background: 'rgba(24,208,217,0.5)'},bg: '#000',图片3、左右拖动，拖动<em>时间轴</em>时<em>组件</em>会自动监听日期的变化
1.6K51编辑于 2023-04-06 - 来自专栏Vue中文社区
动图展示 60+ 个前端常用插件库合集
Moment.js 官网：Moment.js 轻量级专门解析、验证、操作、格式化日期的JavaScript函数库，Moment.js是为浏览器和Node.js而设计，所有组件都可以在这两个环境下运行。 Timeline.js 官网：Timeline.js jQuery时间轴插件，使用简单是它的优点。 lightgallery.js 官网：lightgallery.js Github：lightGallery 一个弹性高、组件化且响应式的灯箱jQuery插件。 Leaflet.js 官网：Leaflet Github：Leaflet Leaflet是一个对移动设备友善的互动地图并且开源的JavaScript函数库，总大小只有38KB，却有着大多数开发人员想要的需要 同时Swiper也是Framework7和Ionic Framework的组件的一部分。
8.2K40发布于 2021-07-05 - 来自专栏PPV课数据科学社区
工具 ｜ 17款工具，让你的数据更美观
NO.5 Timeline Timeline是由Simile发明的，可以让用户通过简单的滚动和水平拖拽而生成简单的交互时间轴。 NO.6 Leaflet Leaflet也是个开源的javascript库，用户可以创建友好互动的地图。 ?
1.3K80发布于 2018-04-23 - 来自专栏Leaflet
玩转Leaflet-带你吃透Control知识
那么如何扩展Leaflet的control功能，满足大家的实际需要呢？ 本文将介绍一种基于Leaflet的插件# Leaflet-IconLayers，通过# Leaflet-IconLayers来实现自动切换图层的功能，文中重点介绍Control组件以及如何扩展这些组件， 二、Leaflet-IconLayers是什么？ 1、定义Leaflet-IconLayers是一个基于Leaflet的带图标的切换控制器，它需要在Leaflet0.7.3以上的版本上使用，浏览器需要在IE9+以上才可以正常访问。 /fJISVA1r/zQ==" crossorigin=""/> <script src="https://unpkg.com/<em>leaflet</em>@1.2.0/dist/<em>leaflet</em>.js" integrity
13210编辑于 2026-04-18 - 来自专栏wayn的程序开发
组合模式详解
Composite（复合组件）：包含多个子组件对象（可以是复合组件或叶端组件）的复合型组件，并实现组件接口中定义的操作方法。对应本章例程中作为“根节点/枝节点”的文件夹类。 Leaf（叶端组件）：不包含子组件的终端组件，同样实现组件接口中定义的操作方法。对应本章例程中作为“叶节点”的文件类 。 Client（客户端）：按所需的层级关系部署相关对象并操作组件接口所定义的接口，即可遍历树结构上的所有组件。 struct type Leaflet struct { name string } // Leaflet class method perform func (leaf *Leaflet) perform () { fmt.Println("Leaflet " + leaf.name) } // Branch struct type Branch struct { leafs []Leaflet
64820编辑于 2023-06-26
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号