- 综合排序
- 最热优先
- 最新优先
- 来自专栏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 - 来自专栏前端全栈开发者
小程序组件开发之时间轴组件及组件关系
本文是面向初学者的，大牛可以忽略，以时间轴组件为例简单聊一下小程序的组件开发。 先简单介绍一下公司业务和前端项目情况吧。公司是做金融行业财富管理的业务，涉及主要是做基金、保险这一块。 所以，本文要说的是我们组件库最近添加的一个新组件，时间轴组件，也是笔者开发的，笔者由于在公司主要负责小程序端的开发，基于业务的需要贡献了开发了不少组件，那么多组件之所以讲这个组件，是因为其他大部分组件的开发都很普通 时间轴组件（源代码）代码片段，点击链接可以直接通过小程序开发工具直接打开查看，可以边看源代码边看文章。 原文链接：https://zhangbing.site/2019/09/28/小程序组件开发之时间轴组件及组件关系/。 作者简介：做工程不做码农(微信公众号同名)，Web前端工程师，7年开发经验，坐标杭州，聚焦大前端技术和程序员成长的公众号，欢迎关注。我的个人微信(dunizb)，欢迎添加好友进一步交流。
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 ';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个数据可视化利器
Macs, iPads, iPhones 以及 Android上都有非常出色的表现，同时在所有Web和手机应用上FusionCharts的兼容性做得也比较到位，尤其是其它图表目前都无法兼容的IE6、IE7和 Leaflet Leaflet是一个时髦的开源Javascript组件库，用来构建移动端的交互地图，具备了开发人员渴望的所有功能特点。Leaflet十分简单，性能和易用性也非常棒。 同时，Leaflet还提供了开放式的插件架构，如果需要扩展这些应用，你可以通过大量的插件来实现。 Timeline.js Timeline.js会让你爱不释手，它能帮助用户便捷和直观地来创建美丽的时间轴。它本身是一个开源工具，支持40种语言，同时允许你来创建可视化效果极佳且交互性很强的时间轴图表。 Dipity Dipity是另一款时间轴制作工具，用来帮你基于日期和时间组织页面内容。用户可以使用视频、音频、图像或者甚至社交媒体频道来创建和分享时间轴。这简直是报业、记者和博客版主的必备利器！
1.8K110发布于 2018-05-21 - 来自专栏Android点滴积累
IOS小组件（7）：小组件点击交互
引言 前面我们似乎掌握了实现一个小组件所需要的一切技能，默认情况下桌面点击小组件，也正常跳转到了App中。接下来我们一起来看看，小组件是怎么做到点击跳转到App的。 中号组件点击交互1 VStack { Link(destination: URL(string: "medium/link_text1")!) 中号组件点击交互3 Link(destination: URL(string: "medium/widgeturl_root")!) 结语 本文介绍了小组件点击交互的两种方式，widgetURL和Link，通过测试代码了解了具体的使用和组合情况。至此，小组件整个流程上的技术点都讲解完了。 后续还有2个部分：App与小组件数据共享，N个小组件怎么支持。
2.7K30发布于 2021-06-09 - 来自专栏狮乐园
高级 Vue 组件模式 (7)
但我们会发现一个问题，就是当前 toggle 组件的状态对于调用者来说，完全是黑盒状态，即调用者无法初始化，也无法更改组件的开关状态，这在一些场景无法满足需求。 对于无法初始化开关状态的问题，倒是很好解决，我们可以在 toggle 组件声明一个 prop 属性 on 来代表组件的默认开关状态，同时在 mounted 生命周期函数中将这个默认值同步到组件 data 因此这篇文章着重来解决这两个问题： toggle 组件能够支持开关状态的初始化功能 toggle 组件能够提供一个 reset 方法以供重置开关状态 重置开关状态可以以异步的方式进行 实现 初始化开关状态 这样就将提供重置状态的逻辑暴露给了组件调用者，当然，如果调用者没有提供相关重置逻辑，组件内部会自动降级为使用 on 属性来作为重置的状态值。 成果 你可以通过下面的链接来看看这个组件的实现代码以及演示： sandbox: 在线演示 github: part-7 总结 Function 类型的 prop 属性在一些情况下非常有用，比如文章中提及的状态初始化
88910发布于 2020-01-21 - 来自专栏狮乐园
高级 Angular 组件模式 (7)
07 使用 Content Directives 原文: Use Content Directives 因为父组件会提供所有相关的 UI 元素（比如这里的 button），所以 toggle 组件的开发者可能无法满足组件使用者的一些附加需求 如果 toggle 组件能够提供一些 hooks 方法或指令给组件使用者，这些 hooks 方法或指令能够在自定义的开关元素上设置一些合理的默认值，那将是极好的。 目标 提供一些 hooks 方法或指令给组件使用者，使其可以与所提供的 UI 元素交互并修改它们。 Directive，而将部分其他工作交付组件使用者来完成。 比如文章中所提及的，作为组件开发者，无法预先得知组件使用者会怎样管理开关元素以及它的样式，因此提供一些 hooks 是很有必要的，而 hooks 这个概念，一般情况下，都会是相对简单的，比如生命周期 hook
1.1K20发布于 2018-10-19 - 来自专栏CDA数据分析师
21款酷炫的数据可视化工具，拿走不谢！
它在PC端、Mac、iPad、iPhone和Android平台都可兼容，具有很好的用户体验一致性，同时也适用于所有的网页和移动应用，甚至包括IE6、7、8这些绝大部分插件都不支持的主儿。 Leaflet ? Leaflet是为移动端友好型交互地图所做的开源JavaScript库，其中包含了大部分在线地图开发人员都需要的所有特征。Leaflet被设计为简单易用、性能优良的工具。 D3对网页标准的强调足以满足在所有主流浏览器上使用的可能性，使你免于被其他类型架构所捆绑的苦恼，它可以将视觉效果很棒的组件和数据驱动方法结合在一起。 如果想看到由这款app创建的时间轴案例，请移步Timeline JS3 查看。 Dipity Dipity也是一款做时间轴的工具，用于管理网站上的时间和日期相关内容非常有效。用户可以创造并分享他们精彩的交互式时间轴，内容形式多种多样，包括音频、视频和图像甚至社交媒体频道。
2.3K100发布于 2018-02-24 - 来自专栏踏浪的文章
Flutter lesson 7: Flutter组件之基础组件（三）
上一节我们介绍了Row, Column, Image, Text四个基础组件，这一节我们来看看下面几个组件。 Icon Icon就是图标，字体图标，矢量图。 bottomNavigationBar 在底部设置一个导航组件 bottomNavigationBar: BottomAppBar( shape: CircularNotchedRectangle( bottomSheet 底部划出组件，一般很少直接使用，而是使用showModalBottomSheet弹出，比如从底部弹出分享框。 总结 Flutter的基础的组件就讲到这里，涉及到的大都是常用的组件，部分东西没有涉及到或者说没有详细说明，可能是因为我认为不用过多说明，可能是因为没有太多时间，也可能是因为我自己也不看明白，如果你不懂
2K50发布于 2019-07-31 - 来自专栏BI工具
十款常用的数据展示（可视化）软件介绍，操作便捷，功能强大
数据展示（可视化）软件六：Dipity Dipity是创建时间轴相关界面的理想选择。 并提供各种可视组件：表格，常规统计图，html5统计图，地图等。 数据展示（可视化）软件九：Leaflet Leaflet是另一个支持HTML5和CSS3的地图工具，可以轻松使用OpenStreetMap的数据，并将这些完全集成交互式可视化数据。 Leaflet的内核库很小，但是有许多可以扩展功能的插件，例如：动态标签，蒙版和热图，它们非常适合需要显示地理位置的项目，小而完整。
5.1K10发布于 2020-06-19 - <template id="comp1">来自专栏盛开在夏天的太阳
7.vue组件(二)--双向绑定,父子组件访问
先实现子组件的双向绑定 3. 子组件将数据传给父组件 实现步骤: 第一步: 子组件接收父组件的data <! comp1>
<div style=" width: 600px; background-color: #085e<em>7</em>d1.3K10发布于 2021-03-04来自专栏钱塘大数据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来自专栏全栈程序员必看angular7 父组件向子组件传值
1.新建子组件 app-child 2.在父组件中引用子组件 <app-child [value1]=”fatherValue”></app-child> 2.在子组件中使用@Input接受父组件传的值 @Input() value1: string; value1就是父组件传到子组件的值了,可以在子组件中去使用 发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/134965
75920编辑于 2022-09-06来自专栏Oracle数据库技术浅谈Oracle RAC(7) -CRS组件
浅谈Oracle RAC(5)– CSS组件 浅谈Oracle RAC(6) 之实战：节点reboot问题的调查方法 我们之前的几期重点介绍了RAC集群软件里面的两个重要组件----OHASD和CSSD 我们可以看到CRSD组件主要管理Database，ASM，监听，服务等等应用程序。而各个应用程序又根据所属user不同而被CRSD下面的不同Agent所管理。 6.Policy Engine 这个概念其实在外界对RAC的认知中是基本上没有人知道的组件。 Oracle官方并不认为PE是一个客户需要去操作或者重点关注的组件，所以官方没有提供查看PE主节点的命令。不过我们可以通过CRSD的日志文件查看。 如果非要找到所谓的主节点，则更靠谱的也只是CRSD的PE主节点，然而CRSD只是集群软件层面的一个组件，它还决定不了哪个节点是主节点。
1K10编辑于 2022-08-19来自专栏灯塔大数据17款工具，让你的数据更美观
5 Timeline Timeline是由Simile发明的，可以让用户通过简单的滚动和水平拖拽而生成简单的交互时间轴。 ? 6 Leaflet Leaflet也是个开源的javascript库，用户可以创建友好互动的地图。 ? 7 D3.JS D3.JS 是主要为基于HTML，SVG和CSS的操纵型文档设计的JavaScript库。 ? 8 Tagxedo Tagxedo 是一款简单的词云生成器。
1.2K50发布于 2018-04-09来自专栏钱塘大数据17款可视化工具，让你的数据美如画
Timeline Timeline是由Simile发明的，可以让用户通过简单的滚动和水平拖拽而生成简单的交互时间轴。 ? 6. Leaflet Leaflet也是个开源的javascript库，用户可以创建友好互动的地图。 动图 ? 7.
85360发布于 2018-07-30来自专栏技术翻译20个免费和开源数据可视化工具
Candela是一个可互操作的Web可视化组件的开源套件。 2. Charted Charted是一款免费的数据可视化工具，可让您从CSV文件和Google电子表格中创建折线图或条形图。 该收费包含集成组件，包括LineUp组件，UpSet组件和OnSet组件，Vega可视化和GeoJS地理空间可视化。该工具不存储数据或操纵它。 Leaflet Leaflet是一个开源JavaScript库，允许您制作适合移动设备的交互式地图。该工具有许多用于添加功能的插件，适用于各种桌面和移动平台。 7. 您可以将其连接到数据源，如Google表格，Microsoft Excel，文本文件，JSON文件，空间文件，Web数据连接器，OData和统计文件，如SAS（* .sas7bdat），SPSS（* . 您可以使用工具中提供的模板连接您的Google云端硬盘帐户，以使用Google电子表格创建时间轴。使用JSON，您可以创建自定义安装。 13.
15.8K1214发布于 2018-11-19来自专栏gis基于Leaflet的VideoOverlay视频图层叠加实战
in the DOM.基于这个组件，在Leaflet的基础之上，就可以实现视频图层的叠加展示。 4、src目录是组件的源代码包，通常情况下不会修改这个目录下代码。3、相关限制这里指的必备条件，没有限定只能使用JQuery，开发者可以基于自己项目的实际情况，进行引用即可。 /keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/> <link rel="stylesheet" type="text/css" href= 三、总结以上就是本文的主要内容，本文首先介绍了DistortableVideo组件的相关知识，它的github仓库信息，相关源代码的目录说明，使用依赖信息。 Html5案例，同时使用debug方式对视频图层的加载进行了步骤分析，希望可以帮助您更深度的理解这个组件。
8710编辑于 2026-04-18
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号