- 综合排序
- 最热优先
- 最新优先
- 来自专栏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 - 来自专栏前端全栈开发者
小程序组件开发之时间轴组件及组件关系
本文是面向初学者的，大牛可以忽略，以时间轴组件为例简单聊一下小程序的组件开发。 先简单介绍一下公司业务和前端项目情况吧。公司是做金融行业财富管理的业务，涉及主要是做基金、保险这一块。 所以，本文要说的是我们组件库最近添加的一个新组件，时间轴组件，也是笔者开发的，笔者由于在公司主要负责小程序端的开发，基于业务的需要贡献了开发了不少组件，那么多组件之所以讲这个组件，是因为其他大部分组件的开发都很普通 时间轴组件（源代码）代码片段，点击链接可以直接通过小程序开发工具直接打开查看，可以边看源代码边看文章。 : #33cd5f"> {{item.content}} </pps-timeline-item> </pps-timeline> 为什么这里要使用父子组件模式呢，其实不这样也是可以很好的完整组件 原文链接：https://zhangbing.site/2019/09/28/小程序组件开发之时间轴组件及组件关系/。
1.6K20发布于 2019-12-27 - 来自专栏新零售项目实践
洞见供应链 | 基于 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 zoom={5}style={{height:'100vh',width:'100%'}}><TileLayerurl="https://{s}.tile.openstreetmap.org/{z}/{ (w=>{cluster.addLayer(L.marker([w.lat,w.lng]));});map.addLayer(cluster);（1）降低DOM数量（2）提升缩放流畅度5.2<em>时间轴</em>联动轨迹 sequenceDiagramparticipantUIas<em>时间轴</em>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 - 来自专栏小尘哥的专栏
移动端H5的简单时间轴效果
最近给移动端写接口，写完了才告诉我其中两个页面是H5的，需要我这边来做。本着“我是公司一块砖，哪里需要哪里搬”的原则，让做就做。结果一看原型，还有时间轴效果。 第一反应：找度娘，找github，找oschina~~~确实也有不少的时间轴插件，但是总觉得都太花哨了，大道至简，自己来一个吧。 Talk is cheap,show me the code. 时间轴部分主要代码 ? 开始撸代码(CSS部分) 气泡效果的小箭头 ? 其他样式定位（包括 时间轴的线和点） ?
2K20发布于 2018-08-15 - 来自专栏大数据文摘
【干货】21个数据可视化利器
Leaflet Leaflet是一个时髦的开源Javascript组件库，用来构建移动端的交互地图，具备了开发人员渴望的所有功能特点。Leaflet十分简单，性能和易用性也非常棒。 由于使用HTM5和CSS3技术，它的跨平台兼容性也很好，主流的桌面和移动平台都能支持。同时，Leaflet还提供了开放式的插件架构，如果需要扩展这些应用，你可以通过大量的插件来实现。 它在每个浏览器上运行都比较顺畅，Gliffy 运行在一个HTML5编辑器上，速度是Flash的两倍。它提供了一个只读的URL地址，你可以将它分享到社交媒体上。 Timeline.js Timeline.js会让你爱不释手，它能帮助用户便捷和直观地来创建美丽的时间轴。它本身是一个开源工具，支持40种语言，同时允许你来创建可视化效果极佳且交互性很强的时间轴图表。 Dipity Dipity是另一款时间轴制作工具，用来帮你基于日期和时间组织页面内容。用户可以使用视频、音频、图像或者甚至社交媒体频道来创建和分享时间轴。这简直是报业、记者和博客版主的必备利器！
1.8K110发布于 2018-05-21 - 来自专栏BI工具
十款常用的数据展示（可视化）软件介绍，操作便捷，功能强大
提供丰富的API接口，可以轻松构建HTML5图表。提供100多种图表。 数据展示（可视化）软件六：Dipity Dipity是创建时间轴相关界面的理想选择。 并提供各种可视组件：表格，常规统计图，html5统计图，地图等。 数据展示（可视化）软件九：Leaflet Leaflet是另一个支持HTML5和CSS3的地图工具，可以轻松使用OpenStreetMap的数据，并将这些完全集成交互式可视化数据。 Leaflet的内核库很小，但是有许多可以扩展功能的插件，例如：动态标签，蒙版和热图，它们非常适合需要显示地理位置的项目，小而完整。
5.1K10发布于 2020-06-19 - 来自专栏蚂蚁开源社区
HTML5+CSS3响应式垂直时间轴，高端，大气
HTML5+CSS3响应式垂直时间轴，使用了HTML5标签
，时间轴中所有的内容包括标题、简介、时间和图像都放在.cd-timeline-block的DIV中，多个DIV形成一个序列，并把这些 CSS3响应式垂直时间轴</title> <link rel="stylesheet" href="style.css" /> <style type="text/css"> h2.top_title CSS3响应式垂直时间轴
请使用IE9+或Chrome，Firefox高级浏览器或手机访问本页 <section id="cd-timeline" class CSS3响应式垂直时间轴网页时间轴一般用于展示以时间为主线的事件，如企业网站常见的公司发展历程等。 本文将给大家介绍一款基于HTML5和CSS3的漂亮的垂直时间轴，它可以响应页面布局，适用于HTML5开发的PC和移动手机WEB应用。
2.3K20发布于 2019-08-09 - 来自专栏CDA数据分析师
21款酷炫的数据可视化工具，拿走不谢！
Leaflet ? Leaflet是为移动端友好型交互地图所做的开源JavaScript库，其中包含了大部分在线地图开发人员都需要的所有特征。Leaflet被设计为简单易用、性能优良的工具。 Gliffy使用HTML5编辑器，速度是Flash的两倍。它提供一个可读的URL地址展示你的分析图，也可以将成果分享到社交媒体上。 HighCharts是建立在HTML5上的，在现代的浏览器包括移动、平板设备上运行，也支持过时的IE浏览器（IE6之后的都可以）。 D3对网页标准的强调足以满足在所有主流浏览器上使用的可能性，使你免于被其他类型架构所捆绑的苦恼，它可以将视觉效果很棒的组件和数据驱动方法结合在一起。 Dipity Dipity也是一款做时间轴的工具，用于管理网站上的时间和日期相关内容非常有效。用户可以创造并分享他们精彩的交互式时间轴，内容形式多种多样，包括音频、视频和图像甚至社交媒体频道。
2.3K100发布于 2018-02-24 - 来自专栏itclanCoder
React进阶(5)-分离容器组件,UI组件(无状态组件)
Redux实现了一个todolist,但是代码依旧不够完美,我们继续进行拆分的 在本节中,你将学习到,如何拆分容器组件,UI组件(无状态组件),让组件尽可能的保持功能的单一,减少组件的状态的 · 正 ,一个是获取store中的数据,另一个就是渲染组件 我们可以把这个组件进一步的拆分成两个组件,分别承担着不同的任务,然后把两个组件嵌套起来,完成一个大组件所有的功能 关于组件的嵌套问题,涉及到一个父子组件 (外部组件与内部组件),在组件当中调用的地方位置处,可以视它为子(内部)组件,父子组件只是一个相对的概念,把承担负责和redux中store打交道的组件称为父组件(外层),也叫做容器组件(聪明组件),它干的事情比较多 UI组件(傻瓜组件/无状态组件) UI组件:纯函数,没有任何副作用,给指定的输入,有指定的输出的函数,换句话说,只根据外部组件的props进行渲染组件的 好处:拆分成容器组件与UI组件,不仅仅是功能上的分离 { constructor(props) { super(props); // 5.
1.4K10发布于 2020-10-28 - 来自专栏itclanCoder
React进阶(5)-分离容器组件,UI组件(无状态组件)
Redux实现了一个todolist,但是代码依旧不够完美,我们继续进行拆分的 在本节中,你将学习到,如何拆分容器组件,UI组件(无状态组件),让组件尽可能的保持功能的单一,减少组件的状态的 容器组件 ,一个是获取store中的数据,另一个就是渲染组件 我们可以把这个组件进一步的拆分成两个组件,分别承担着不同的任务,然后把两个组件嵌套起来,完成一个大组件所有的功能 关于组件的嵌套问题,涉及到一个父子组件 (外部组件与内部组件),在组件当中调用的地方位置处,可以视它为子(内部)组件,父子组件只是一个相对的概念,把承担负责和redux中store打交道的组件称为父组件(外层),也叫做容器组件(聪明组件),它干的事情比较多 ,也叫做傻瓜组件,因为它不具备任何逻辑,功能比较单一，只负责页面填充渲染 UI组件(傻瓜组件/无状态组件) UI组件:纯函数,没有任何副作用,给指定的输入,有指定的输出的函数,换句话说,只根据外部组件的 { constructor(props) { super(props); // 5.
2K00发布于 2020-10-25 - 来自专栏智能大石头
5，ORM组件XCode（动手）
《速览》是为了以最简洁的语言最短小的篇幅去吸引开发者；《简介》则是对XCode组件和XCode开发模式的一个整体介绍，让开发者从宏观的角度去理解XCode；《共舞》把XCode提到了一个新的高度，让开发者感受到它的贵族血统
1.3K90发布于 2018-01-15 - 来自专栏iSharkFly
Hibernate 5 发行组件下载
Hibernate 项目小组提供了一系列发布组合（bundles），这些发布组合发布在 SourceForge 文件发布系统中。这些发布的包有 TGZ 和ZIP 格式。
62030发布于 2019-09-16 - 来自专栏钱塘大数据
20个数据可视化工具汇总，终于知道人家为啥那么牛X了
5 Leaflet ? Use OpenStreetMap data and integrate data visualisation in an HTML5/CSS3 wrapper 另外一个地图工具，支持 HTML5 和 CSS3 ，Leaflet 可以轻松使用 OpenStreetMap的数据，并且完全把交互可视化数据集成在一起。 Leaflet的内核库很小，但是有很多插件能扩展其功能，比如：动态标记、masks 和热图，非常适用于需要显示地理位置的项目。麻雀虽小，五脏俱全。 6 Timeline ? Timeline 是一个奇妙的小工具，坑绘制漂亮的交互式时间轴，用户滚动鼠标，时间轴会响应变化。点击时间轴上的元素，可显示更多信息。（MIT 开发） 7 Exhibit ?
2.9K60发布于 2018-02-28 - 来自专栏iSharkFly
Hibernate 5 发行组件下载
Hibernate 项目小组提供了一系列发布组合（bundles），这些发布组合发布在 SourceForge 文件发布系统中。这些发布的包有 TGZ 和ZIP 格式。
56320发布于 2019-09-16 - 来自专栏狮乐园
高级 Angular 组件模式 (5)
模板引用变量的解析顺序通常为： 一个指令或者组件通过它自身的exportAs属性，比如#myToggle="toggle" 声明于以自定义标签存在的组件，比如<toggle-on #toggleOn>< /toggle-on> 原生html元素，并且没有任何组件绑定与它，比如
之后我们来分别看3个例子。 对于每一个html元素，只会有一个组件与之对应。 当一个组件绑定于一个元素时，那么声明的模板引用变量将会被解析为当前元素上所绑定的组件，比如： // app.component.html <toggle-on #toggleOn></toggle-on > // toggleOn is the ToggleOnComponent HTML元素 如果没有组件与元素绑定，模板引用变量会指向当前这个html元素。94520发布于 2018-10-19 - 来自专栏狮乐园
高级 Vue 组件模式 (5)
05 使用 $refs 访问子组件引用 目标 在之前的文章中，详细阐述了子组件获取父组件所提供属性及方法的一些解决方案，如果我们想在父组件之中访问子组件的一些方法和属性怎么办呢？ 设想以下一个场景： 当前的 custom-button 组件中，有一个 input 元素 我们期望当 toggle 的开关状态为开时，显示 input 元素并自动获得焦点 这里要想完成目标，需要获取某个组件或者每个元素的引用 messages"> 注意这里的 ref="input"，这样在组件内部，可以通过 this. ="toggle"></custom-button> 之后修改 onToggle 方法中的逻辑以满足目标中的需求，当 toggle 组件状态为开时，调用 custom-button 组件的 focus 你可以通过下面的链接来看看这个组件的实现代码以及演示： sandbox: 在线演示 github: part-5 总结 文章中所举例子的交互，在实际场景中很常见，比如： 当通过一个 icon 触发搜索框时
73310发布于 2020-01-21 - 来自专栏踏浪的文章
Flutter lesson 5: Flutter组件之基础组件（一）
Container在使用的时候一般不会直接使用其作为容器组件，通常需要有一个父控件。例如：Center, Padding, Colunm, Row, Scaffold等等。 DiagnosticableTree -> Widget -> StatelessWidget Container 属性 color color这个属性在大多数的Widget中都是可以设置的，表示的就是颜色的意思，无论是组件的背景色还是文字的颜色 更多的属性以及关于矩阵的介绍可以查看[https://juejin.im/post/5be2fd9e6fb9a04a0e2cace0](https://juejin.im/post/5be2fd9e6fb9a04a0e2cace0
2.4K30发布于 2019-07-31 - 来自专栏gis
基于Leaflet的VideoOverlay视频图层叠加实战
in the DOM.基于这个组件，在Leaflet的基础之上，就可以实现视频图层的叠加展示。 二、如何使用 Leaflet.DistortableVideo1、新建Html5页面在目录中新建一个pointArray2.html页面，在页面中定义相关的网页代码。 rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6 @1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA Html5案例，同时使用debug方式对视频图层的加载进行了步骤分析，希望可以帮助您更深度的理解这个组件。
8710编辑于 2026-04-18
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号