- 综合排序
- 最热优先
- 最新优先
- 来自专栏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 (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是一个用于生成时间轴空间的简单组件，可以在前端生成时间轴。 ,location: {desc: "汨罗江",geometry: [{type: "Point",coordinates: [112.95,29.001111]}]}}];4、时间轴初始化 以全新的一种视角去观察屈夫子的一生，基于LeafLet结合时间轴，完成时间与空间的时空纵览。最后祝所有的伙伴们端午安康，阖家幸福。
8810编辑于 2026-05-05 - 来自专栏前端知识分享
Angular 4 组件通信
组件通讯，意在不同的指令和组件之间共享信息。如何在两个多个组件之间共享信息呢。 最近在项目上，组件跟组件之间可能是父子关系，兄弟关系，爷孙关系都有。。。。。 我也找找了很多关于组件之间通讯的方法，不同的方法应用在不同的场景，根据功能需求选择组件之间最适合的通讯方式。下面我就总结一下关于组件通讯的N多种方法。
1.3K00发布于 2020-06-10 - 来自专栏大数据文摘
【干货】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 - 来自专栏狮乐园
高级 Vue 组件模式 (4)
我们可以在 toggle 组件模板中的 slot 标签上将所有与其上下文相关的方法及属性传递给它，如下：
<slot :status="status" : status.on"></custom-status-indicator> </template> 当然，相比上一篇文章，我们需要对 custom-button 和 custom-status-indicator 组件做一些简单的更改 成果 通过作用域插槽，我们有效地避免了第三方组件由于混入 toggleMixin 而可能造成的命名冲突以及隐式依赖等问题。 你可以通过下面的链接来看看这个组件的实现代码以及演示： sandbox: 在线演示 github: part-4 总结 mixin 虽好，但是一定不要滥用，作为组件开发者，可以享受它带来的便利性，但是它对于组件调用者来说66610发布于 2020-01-21来自专栏BI工具十款常用的数据展示（可视化）软件介绍，操作便捷，功能强大
数据展示（可视化）软件六：Dipity Dipity是创建时间轴相关界面的理想选择。 并提供各种可视组件：表格，常规统计图，html5统计图，地图等。 数据展示（可视化）软件九：Leaflet Leaflet是另一个支持HTML5和CSS3的地图工具，可以轻松使用OpenStreetMap的数据，并将这些完全集成交互式可视化数据。 Leaflet的内核库很小，但是有许多可以扩展功能的插件，例如：动态标签，蒙版和热图，它们非常适合需要显示地理位置的项目，小而完整。
5.1K10发布于 2020-06-19来自专栏ArcGIS JS API开发【React基础-4】组件 & Props
组件定义 在react中定义一个组件的话有以下两种方式： 通过编写JavaScript函数来定义一个组件，这种方式定义的组件被称之为函数组件 通过ES6的class来定义一个组件，这种方式定义的组件被称之为类组件 我们上述通过两段代码定义的函数组件和类组件最终渲染到页面的效果如下所示： 渲染组件 在组件定义部分我们仅仅介绍了props在函数组件和类组件中的使用，并没有介绍它是从哪传到函数组件或类组件中的，在这里我们就介绍下 组合组件与提取组件 组合组件的含义其实很简单，就是在我们平常的开发中，一个web页面是通过不同的组件组合起来的，最简单的就是上中下结构的页面，包含顶部组件、中间内容区域组件、底部组件组合而成，大致意思就是这样 ，提取组件就是将一个组件拆分成更小的几个组件。 Comment组件代码，这对后期维护组件的人员来说有点恼火了，那我们就需要对Comment组件进行组件提取，其实也就是组件拆分工作。
77310编辑于 2022-02-21来自专栏踏浪的文章Flutter Lesson 4: Flutter组件之App布局组件
首先来看一下我怎么来学习Flutter，我要了解每一个组件，同时，这又是一个App，所以，我的目标是直接生产一个App，里面就是对Flutter组件的介绍，同时写上一些demo以及源代码，这一个点子源于 如果要构建这样的一款App，我需要先构建一个App首页，包含了一个可以滚动的列表，如果可以，还可以添加一些其他的组件。以及基础的布局组件。 ，Flutter中还包含了其余的多种列表组件，这些以后再介绍。 第二个参数需要使用到new MaterialPageRoute调用一个组件，传递一个builder，这是一个函数，返回需要显示的组件即可。关于传值，就在返回的组件中传值即可。 补充说明（very important） 前文们提到了MaterialApp组件，这个组件其实一般就在main.dart中使用一次就可以了，因为如果在一个项目中使用了多次MaterialApp，同时你使用了固定路由配置
2.2K50发布于 2019-07-31来自专栏技术人生flutter组件4【视频播放】
VideoDetail extends StatefulWidget { //https://nico-android-apk.oss-cn-beijing.aliyuncs.com/landscape.mp4 videoPlayerController = VideoPlayerController.network('https://nico-android-apk.oss-cn-beijing.aliyuncs.com/landscape.mp4'
60920发布于 2020-11-13来自专栏狮乐园高级 Angular 组件模式 (4)
命名冲突不仅存在于指令的选择器之间，同时也会存在于指令的Inputs和Outputs属性，当这些属性名一样时，Angular并不会进行提示，它会按原本的逻辑正常工作。这种情况有时候是我们希望看到的，有些时候却不是。
1.1K10发布于 2018-10-19来自专栏CDA数据分析师21款酷炫的数据可视化工具，拿走不谢！
Datawrapper让你只需4步就可以创建出图表和地图。这款工具帮你将数据可视化的时间从几小时减少到了几分钟。它的操作非常简单，你只需上传数据，选择一个图表或地图，然后点击发布就可以了。 Leaflet ? Leaflet是为移动端友好型交互地图所做的开源JavaScript库，其中包含了大部分在线地图开发人员都需要的所有特征。Leaflet被设计为简单易用、性能优良的工具。 D3对网页标准的强调足以满足在所有主流浏览器上使用的可能性，使你免于被其他类型架构所捆绑的苦恼，它可以将视觉效果很棒的组件和数据驱动方法结合在一起。 如果想看到由这款app创建的时间轴案例，请移步Timeline JS3 查看。 Dipity Dipity也是一款做时间轴的工具，用于管理网站上的时间和日期相关内容非常有效。用户可以创造并分享他们精彩的交互式时间轴，内容形式多种多样，包括音频、视频和图像甚至社交媒体频道。
2.3K100发布于 2018-02-24来自专栏钱塘大数据20个数据可视化工具汇总，终于知道人家为啥那么牛X了
4 Modest Maps ? 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来自专栏keyWords4、React组件之性能优化
对多个React组件的性能优化 当一个React组件被装载、更新和卸载时，组件的一序列生命周期函数会被调用。 同样一个组件的渲染过程也要考虑三个过程：装载阶段、更新阶段、卸载阶段 对于装载阶段，组件无论如何都要彻底渲染一次，从这个React组件往下的所有子组件，都要经历一遍React组件的装载生命 周期，所以并没有多少优化的事情可做 对于卸载阶段，只有一个生命周期函数componentWillUnmount,这个函数只是清理componentDidMount添加的事件处理监听等收尾工作， 所以，也没有什么可优化的空间； 4. ，React做得是根据新节点的props去更新节点的组件实例，引发组件的更新过程； 在处理完根节点对比后，React的算法会对根节点的每一个子节点重复一样的操作 多个相同子组件的情况 如果最初组件状态为 ，即挨个比较每个子组件； React首先认为把text为First的组件的text改为Zero,Second的改为First，最后创建一个text为Second的组件，这样便会破原有的两个组件完成一个更新过程
76710发布于 2018-09-19来自专栏码客Ant Design Vue 4常用组件
https://www.antdv.com/docs/vue/getting-started-cn
48710编辑于 2024-08-06来自专栏学习/读书笔记《Flutter》-- 4.Flutter组件基础
参阅书籍： 《Flutter跨平台开发入门与实践》-- 向治洪（著） 4. Flutter组件基础 4.1 Widget组件基础 Flutter开发中有一个非常重要的理念，即一切皆为组件。 4）theme：定义应用主题。 5）theme.primarySwatch：应用的主题色。 6）theme.primaryColor：单独设置导航栏的背景色。 3）actions：右边的动作区域中可放置多个组件，可以是图标或者文字。 4）flexibleSpace：位于标题下面的空白空间。 5）bottom：位于导航栏底部的自定义组件。 4）drawer：设置抽屉效果。 5）floatingActionButton：设置位于右下角的按钮。 ) ] ), transform: Matrix4.rotationZ(.2), alignment
14.5K30编辑于 2022-04-07来自专栏gis基于Leaflet的VideoOverlay视频图层叠加实战
in the DOM.基于这个组件，在Leaflet的基础之上，就可以实现视频图层的叠加展示。 4、src目录是组件的源代码包，通常情况下不会修改这个目录下代码。3、相关限制这里指的必备条件，没有限定只能使用JQuery，开发者可以基于自己项目的实际情况，进行引用即可。 = [[32, -130], [13, -100]];map.fitBounds(mapBounds);3、视频资源叠加演示的视频资源，我们使用官方提供的mp4，如果您本地有mp4视频信息，也可以采用本地的资源 三、总结以上就是本文的主要内容，本文首先介绍了DistortableVideo组件的相关知识，它的github仓库信息，相关源代码的目录说明，使用依赖信息。 Html5案例，同时使用debug方式对视频图层的加载进行了步骤分析，希望可以帮助您更深度的理解这个组件。
8710编辑于 2026-04-18来自专栏灯塔大数据17款工具，让你的数据更美观
4 dygraphs dygraphs是个开源的Javascript图表库，通过调用接口，用户可以直接把大型数据集制作成任何想要的形式。 ? 5 Timeline Timeline是由Simile发明的，可以让用户通过简单的滚动和水平拖拽而生成简单的交互时间轴。 ? 6 Leaflet Leaflet也是个开源的javascript库，用户可以创建友好互动的地图。 ?
1.2K50发布于 2018-04-09
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号