- 综合排序
- 最热优先
- 最新优先
- 来自专栏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 - 来自专栏新零售项目实践
洞见供应链 | 基于 React + Leaflet 的仓库与物流轨迹可视化实战
：import'leaflet/dist/leaflet.css';2.2基础地图组件import{MapContainer,TileLayer}from'react-leaflet';import'leaflet 地图容器，相当于一张画布center：初始中心点（经纬度）zoom：缩放级别（供应链常用4～6看全国）TileLayer：底图图层，这里使用OpenStreetMap三、仓库网点可视化3.1数据结构示例 functionTrackLayer({path}){return(<Polylinepositions={path}pathOptions={{color:'#1890ff',weight:4,dashArray:'6' (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还提供了开放式的插件架构，如果需要扩展这些应用，你可以通过大量的插件来实现。 HighCharts基于HTML5技术，可以在主流浏览器上工作，包括手机、平板以及老版本的IE，甚至IE6也可以。它是动态的，你可以自由添加、移除和修改各种线和点。 Timeline.js Timeline.js会让你爱不释手，它能帮助用户便捷和直观地来创建美丽的时间轴。它本身是一个开源工具，支持40种语言，同时允许你来创建可视化效果极佳且交互性很强的时间轴图表。 Dipity Dipity是另一款时间轴制作工具，用来帮你基于日期和时间组织页面内容。用户可以使用视频、音频、图像或者甚至社交媒体频道来创建和分享时间轴。这简直是报业、记者和博客版主的必备利器！
1.8K110发布于 2018-05-21 - 来自专栏狮乐园
高级 Angular 组件模式 (6)
当组件作者提前了解使用该toggle组件的父组件所需要的状态时，那么它将会正常的运作。但是如果父组件所需要的状态并不在我们的设想之内，我们该怎么办？ 目标 将toggle组件的状态直接提供给父组件，同时允许父组件提供相应的渲染视图(view)。 实现 <ng-template>组件可以完美地解决问题。 1. 父组件 从toggle组件中传入的状态是通过let关键字在父组件的<ng-template>标签上显示声明的。 toggle>组件的模板作用域中的变量名。 除了上面的解决方法，就是使用正文中所提及的模式了，这种模式将子组件视图的渲染逻辑倒置为子组件仅仅声明模板中所会使用的状态变量，对于这些变量和模板的注入工作，全权赋予父组件，因此会使子组件的复用性和可测试性大大提高
1.6K20发布于 2020-01-21 - 来自专栏狮乐园
高级 Angular 组件模式 (6)
当组件作者提前了解使用该toggle组件的父组件所需要的状态时，那么它将会正常的运作。但是如果父组件所需要的状态并不在我们的设想之内，我们该怎么办？ 目标 将toggle组件的状态直接提供给父组件，同时允许父组件提供相应的渲染视图(view)。 实现 <ng-template>组件可以完美地解决问题。 1. 父组件 从toggle组件中传入的状态是通过let关键字在父组件的<ng-template>标签上显示声明的。 toggle>组件的模板作用域中的变量名。 除了上面的解决方法，就是使用正文中所提及的模式了，这种模式将子组件视图的渲染逻辑倒置为子组件仅仅声明模板中所会使用的状态变量，对于这些变量和模板的注入工作，全权赋予父组件，因此会使子组件的复用性和可测试性大大提高
1.2K10发布于 2018-10-19 - 来自专栏狮乐园
高级 Vue 组件模式 (6)
06 通过 Directive 增强组件内容 目标 之前的五篇文章中，switch 组件一直是被视为内部组件存在的，细心的读者应该会发现，这个组件除了帮我们提供开关的交互以外，还会根据当前 toggle 我们期望能够显示地声明当前的元素是一个 toggler 职能的组件或者元素，这个组件或者元素，可以根据当前 toggle 组件的开关状态，动态地更新它本身的 aria-expanded 属性，以便针对无障碍访问提供适配 ，能否直接在指令中获取当前所绑定的组件实例呢？ 成果 你可以通过下面的链接来看看这个组件的实现代码以及演示： sandbox: 在线演示 github: part-6 总结 关于指令的概念，我自身还是在 angularjs 中第一次见到，当时其实不兴组件化开发这个概念 但仔细想想的话，web 开发流程中，并不是所有的场景都可以拿组件来抽象和描述的，比如说，你想提供一个类似高亮边框的公用功能，到底如何来按组件化的思想抽象它呢？这时候使用指令往往是一个很好的切入点。
76120发布于 2020-01-21 - 来自专栏学习/读书笔记
《Flutter》-- 6.高级组件
参阅书籍： 《Flutter跨平台开发入门与实践》-- 向治洪（著） 6. 高级组件 6.1 可滚动组件 对于列表和长布局的显示溢出问题，可以使用Flutter提供的可滚动组件来处理。 6.1.1 Scrollable组件 在Flutter中，一个可滚动的组件直接或间接包含一个Scrollable组件，它是可滚动组件的基础组件。 只需将Scrollbar组件作为可滚动组件的父组件使用即可。 ，组件树的子组件可以通过发送通知来与父组件进行通信，父组件则可以通过NotificationListener组件来监听自己关注的通知，这种跨组件的通信方式通常被称为事件冒泡。 Canvas canvas, Size size) { double wheelSize = min(size.width, size.height) / 2; double nbElem = 6;
12.6K20编辑于 2022-04-07 - 来自专栏踏浪的文章
Flutter lesson 6: Flutter组件之基础组件（二）
Row Row这个Widget其实就是一个布局组件，类似于前端中flex-direction: row;。作用就是可以使Row中的子元素在水平方向上面排列，可以用来做走马灯轮播等效果。 FadeInImage.assetNetwork( placeholder: 'images/logo.png', image: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy Text Text Widget用的是非常多的一个组件，要显示文字就需要用到这个组件。使用也是很简单的。
2.5K20发布于 2019-07-31 - 来自专栏CDA数据分析师
21款酷炫的数据可视化工具，拿走不谢！
它在PC端、Mac、iPad、iPhone和Android平台都可兼容，具有很好的用户体验一致性，同时也适用于所有的网页和移动应用，甚至包括IE6、7、8这些绝大部分插件都不支持的主儿。 Leaflet ? Leaflet是为移动端友好型交互地图所做的开源JavaScript库，其中包含了大部分在线地图开发人员都需要的所有特征。Leaflet被设计为简单易用、性能优良的工具。 HighCharts是建立在HTML5上的，在现代的浏览器包括移动、平板设备上运行，也支持过时的IE浏览器（IE6之后的都可以）。 D3对网页标准的强调足以满足在所有主流浏览器上使用的可能性，使你免于被其他类型架构所捆绑的苦恼，它可以将视觉效果很棒的组件和数据驱动方法结合在一起。 Dipity Dipity也是一款做时间轴的工具，用于管理网站上的时间和日期相关内容非常有效。用户可以创造并分享他们精彩的交互式时间轴，内容形式多种多样，包括音频、视频和图像甚至社交媒体频道。
2.3K100发布于 2018-02-24 - 来自专栏BI工具
十款常用的数据展示（可视化）软件介绍，操作便捷，功能强大
数据展示（可视化）软件六：Dipity Dipity是创建时间轴相关界面的理想选择。 并提供各种可视组件：表格，常规统计图，html5统计图，地图等。 数据展示（可视化）软件九：Leaflet Leaflet是另一个支持HTML5和CSS3的地图工具，可以轻松使用OpenStreetMap的数据，并将这些完全集成交互式可视化数据。 Leaflet的内核库很小，但是有许多可以扩展功能的插件，例如：动态标签，蒙版和热图，它们非常适合需要显示地理位置的项目，小而完整。
5.1K10发布于 2020-06-19 - 来自专栏技术人生
flutter组件6【AppBar的使用】
1.图示 2.解释 AppBar 有以下常用属性： leading → Widget - 在标题前面显示的一个控件，在首页通常显示应用的 logo；在其他界面通常显示为返回按钮。 title → Wi
1.5K20发布于 2020-11-13 - 来自专栏盛开在夏天的太阳
6. vue组件详解(一)
组件的基本使用 2. 全局组件和局部组件 3. 父组件和子组件 4. 组件语法糖的写法 5. 组件data关联的写法 6. 我们可以将每一个部分设计为一个组件. 然后将三个组件组成一个页面. 每一个组件又是由多个小组件构成的. 组件可以让模块可复用性提高. 是一种提倡的用法 一. 组件的基本使用 构建一个组件分为三个部分: 定义组件 注册组件 使用组件 下面, 我们就从这三个部分来定义一个组件 1. 全局组件 组件有全局组件和局部组件的概念, 如果将一个组件定义在外部就是全局组件 // 定义一个组件 const myComp = Vue.extend({ template 局部组件, 哪里注册, 哪里调用 三. 父组件和子组件 ? 像这种有嵌套关系的组件, 就是父子组件. 那么父组件和子组件如何定义呢?
1.8K20发布于 2021-03-04 - 来自专栏hbbliyong
ES6+ 开发 React 组件
类 迄今为止，最能体现我们使用 ES6+ 来编写 React 组件的就是我们选择使用类定义语法。 替代了使用 React.createClass 方法来定义一个组件，我们可以定义一个 bonafide ES6 类来扩展 React.Component： 1 2 3 4 5 class Photo extends 这些，在组件的初始化状态也是一样的，可以使用 ES7 property initializers 定义： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Arrow 函数 React.createClass 方法用来在你的组件实例方法中执行一些额外的绑定工作，为了确保 this 关键字会指向组件实例： 1 2 3 4 5 6 7 // Autobinding ，我们可能想把大部分父组件的 props 传递给子组件，但不是所有。
87980发布于 2018-03-06 - 来自专栏钱塘大数据
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款工具，让你的数据更美观
1 Infogr.am 在Infogr.am网站中，你可以使用30多种图形和6种主题创建互动和可嵌入的图表。 ? 5 Timeline Timeline是由Simile发明的，可以让用户通过简单的滚动和水平拖拽而生成简单的交互时间轴。 ? 6 Leaflet Leaflet也是个开源的javascript库，用户可以创建友好互动的地图。 ?
1.2K50发布于 2018-04-09 - 来自专栏钱塘大数据
17款可视化工具，让你的数据美如画
Infogr.am 在Infogr.am网站中，你可以使用30多种图形和6种主题创建互动和可嵌入的图表。 动图 ? 2. Timeline Timeline是由Simile发明的，可以让用户通过简单的滚动和水平拖拽而生成简单的交互时间轴。 ? 6. Leaflet Leaflet也是个开源的javascript库，用户可以创建友好互动的地图。 动图 ? 7.
85360发布于 2018-07-30 - 来自专栏gis
基于Leaflet的VideoOverlay视频图层叠加实战
in the DOM.基于这个组件，在Leaflet的基础之上，就可以实现视频图层的叠加展示。 rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6 access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw 三、总结以上就是本文的主要内容，本文首先介绍了DistortableVideo组件的相关知识，它的github仓库信息，相关源代码的目录说明，使用依赖信息。 Html5案例，同时使用debug方式对视频图层的加载进行了步骤分析，希望可以帮助您更深度的理解这个组件。
8710编辑于 2026-04-18
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号