- 综合排序
- 最热优先
- 最新优先
- 来自专栏Leaflet
基于Leaflet的leaflet-sidebar侧边栏组件集成
如果你需要在Leaflet地图中增加一个侧边栏，以此来做一个额外的数据处理，那么您可以使用现成的leaflet-sidebar组件来帮助您加快开发速度，同时，该组件基于leaflet进行了扩展，更加灵活 言归正传，本文开始重点阐述如何进行组件的引入和集成。第一步、在github上想在组件。 相应的github地址为：https://github.com/Turbo87/sidebar-v2.git，下载后得到的目录结构大致如下：第二步、打开其示例程序目录在examples，里面有演示例子。 第三步、使用本地影像服务进行开发复制position-right2.html文件，使用熟悉的方式将底图替换为本地。 的侧边栏控制组件sidebar，同时详细说明了如何将sidebar集成到leaflet中。
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 的仓库与物流轨迹可视化实战
）指挥大屏/高并发轨迹→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 returnnewL.DivIcon({html:`<divstyle="width:16px;height:16px;background:${color};border-radius:50%;border:<em>2</em>pxsolidwhite (w=>{cluster.addLayer(L.marker([w.lat,w.lng]));});map.addLayer(cluster);（1）降低DOM数量（<em>2</em>）提升缩放流畅度5.2<em>时间轴</em>联动轨迹 sequenceDiagramparticipantUIas<em>时间轴</em>participantMapas地图participantAPIasNode.jsUI->>Map:时间变化Map->>API:请求对应时段轨迹
2130编辑于 2026-05-09 - 来自专栏Leaflet
端午屈夫子祭-基于LeafLet的夫子一生时空轨迹纵览
以全新的一种视角去观察屈夫子的一生，基于LeafLet结合时间轴，完成时间与空间的时空纵览。最后祝所有的伙伴们端午安康，阖家幸福。 2、人物轨迹时间线 屈原其人的生平活动轨迹时间线可以从百度百科中直接获取转换。 2、可视化采用组件 Leaflet.js是一个轻量级的二维地图展示的组件，适合进行地图的展示及综合浏览。jquery.js是一个es5的原生开发组件，这里功能较简单，暂不采用vue等新前端框架。 leaflet-timeline-slider.js是一个用于生成时间轴空间的简单组件，可以在前端生成时间轴。 以全新的一种视角去观察屈夫子的一生，基于LeafLet结合时间轴，完成时间与空间的时空纵览。最后祝所有的伙伴们端午安康，阖家幸福。
8810编辑于 2026-05-05 - 来自专栏frytea
Vue项目使用Vue2Leaflet插件实现地图显示
简介 vue是一个渐进式javascript框架，用来快速构建网页项目，在vue框架之上结构化leaflet地图库的产物vue2leaflet可以在vue项目中很方便的加载地图，下面简单介绍一个vue2leaflet 第一个地图显示页面 第一步：新建vue项目 第二步：安装Vue2Leaflet 在项目目录下运行如下代码 npm i vue2-leaflet -S 实测项目还需安装leaflet npm install 标签，name之下增加如下内容 data () { return { } } 第三步：修改路由 修改index.js，将helloworld修改为vueleaflet 第四步：引入组件 在vueleaflet.vue的script标签下增加如下内容（注意合并部分） import { LMap, LTileLayer, LMarker, LPopup } from 'vue2-leaflet _getIconUrl L.Icon.Default.mergeOptions({ iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png
3.6K21发布于 2020-07-16 - 来自专栏acoolgiser_zhuanlan
leaflet 在地图popup弹框中添加按钮并点击响应（vue2leaflet），设置popup的content属性，添加button
效果如图，点击【进入】按钮，弹出alert提示框。当然这里可以把alert换成其他响应需求。
8K10发布于 2019-01-17 - 来自专栏大数据文摘
【干货】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 - 来自专栏一Li小麦
组件设计基础（2）
当组件被装载到DOM树上之后，用户在网页上可以看到组件的第一印象，但是要提供更好的交互体验，就要让该组件可以随着用户操作改变展现的内容，当props或者state被修改的时候，就会引发组件的更新过程。 决定是否更新）->componentWillUpdate（即将feiqis）->render->componentDidUpdate 2.自身状态变化：通常是state的变化 shouldComponentUpdate •确定每个组件是否依赖于状态？ •找到共同的父级组件(所有需要状态子组件的共同祖先)。 •常见的组件所有者或另一个更高层次结构的组件。 设想一下，在一个应用中，包含三级或者三级以上的组件结构，顶层的祖父级组件想要传递一个数据给最低层的子组件，用prop的方式，就只能通过父组件中转。 组件设计方法论 一些指导性原则： •组件尽可能通过props通信。不用context •组件属性需要有默认值，做好类型检查 •组件属性尽可能使用简单值。避免使用对象。
81550发布于 2019-12-04 - 来自专栏乱码李
ReactJS 学习——组件2
组件列表 使用循环的方式创建组件列表 const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) =>
- { number.toString()}> {number}
); return (- {listItems}
-
{listItems}
-
{listItems}
1K10发布于 2021-11-26 - 来自专栏CDA数据分析师
21款酷炫的数据可视化工具，拿走不谢！
Leaflet ? Leaflet是为移动端友好型交互地图所做的开源JavaScript库，其中包含了大部分在线地图开发人员都需要的所有特征。Leaflet被设计为简单易用、性能优良的工具。 D3对网页标准的强调足以满足在所有主流浏览器上使用的可能性，使你免于被其他类型架构所捆绑的苦恼，它可以将视觉效果很棒的组件和数据驱动方法结合在一起。 Timeline.js Timeline.js会让你爱上制作漂亮的时间轴，因为它的操作非常简单直观。 如果想看到由这款app创建的时间轴案例，请移步Timeline JS3 查看。 Dipity Dipity也是一款做时间轴的工具，用于管理网站上的时间和日期相关内容非常有效。用户可以创造并分享他们精彩的交互式时间轴，内容形式多种多样，包括音频、视频和图像甚至社交媒体频道。
2.3K100发布于 2018-02-24 - 来自专栏钱塘大数据
20个数据可视化工具汇总，终于知道人家为啥那么牛X了
2 Flot ? 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 - 来自专栏狮乐园
高级 Angular 组件模式 (2)
每一个组件的职能与它们的父组件保持一致，它们各自的职能如下： toggle-button: 代表开关，用来渲染父组件的开关状态 toggle-on: 根据父组件的开关状态，渲染当状态为开时的内容 toggle-off : 根据父组件的开关状态，渲染当状态为关时的内容 <toggle>组件可以实现@ContentChild装饰器获取这三个子组件的引用，从而可以根据开关状态的变化调整它们之间的关联逻辑。 可以尝试在在线代码库中调整子组件的顺序，你可以在它们中间嵌套任何的html字符串，只要这三个组件是作为<toggle>的子组件存在的，一切都将正常的运行。 /my.component.html' 译者注 这里组件架构方式是标准的Smart Component（智能组件）和Dump Component（木偶组件）组件架构方式。 Content代表内容，这些内容在组件渲染时已经存在于组件声明标签的内部，通常在组件内部以<ng-content>为占位符 View代表视图，视图代表组件本身的模板，代表组件本身的渲染逻辑 @ContentChildren
1.2K30发布于 2018-10-19 - 来自专栏狮乐园
高级 Vue 组件模式 (2)
02 编写复合组件 目标 我们需要实现的需求是能够使使用者通过 <toggle> 组件动态地改变包含在它内部的内容。 实现 在 vue 中，这里我们会分别实现三个组件，依次为： toggle-button: 代表开关，用来渲染父组件的开关状态 toggle-on: 根据父组件 toggle 的开关状态，渲染当状态为开时的内容 成果 通过复合组件的方式，我们将 toggle 组件划分为了三个更小的、职责更加单一的子组件。 同时由于 toggle-on 和 toggle-off 都使用 slot 来动态地注入组件调用者在其内部包含的自定义渲染逻辑，其灵活性得到了进一步的提升，只要这三个组件是作为 toggle 组件的子组件来调用 你可以通过下面的链接来看看这个组件的实现代码以及演示： sandbox: 在线演示 github: part-2 总结 通常情况下，在设计和实现职能分明的组件时，可以使用这种模式，比如 tabs 与 tab
90820发布于 2020-01-21 - 来自专栏gis
基于Leaflet的VideoOverlay视频图层叠加实战
in the DOM.基于这个组件，在Leaflet的基础之上，就可以实现视频图层的叠加展示。 2、源代码在浏览器中打开它的github地址Leaflet.DistortableVideo，在浏览器中可以看到如下信息：使用git工具将代码clone至本地工作目录，如下图所示，在这里将其工作目录简单介绍一下 二、如何使用 Leaflet.DistortableVideo1、新建Html5页面在目录中新建一个pointArray2.html页面，在页面中定义相关的网页代码。 rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6 2、地图定义如果之前看过Leaflet相关博客的朋友一定知道，在Leaflet中定义地图的相关语法，这里再复习一下。
8710编辑于 2026-04-18 - 来自专栏灯塔大数据
17款工具，让你的数据更美观
2 Fusion Tables 谷歌Fusion Tables是一款数据管理应用，通过Fusion Table，用户可以快速生成相惜的图表，图形或者地图。 5 Timeline Timeline是由Simile发明的，可以让用户通过简单的滚动和水平拖拽而生成简单的交互时间轴。 ? 6 Leaflet Leaflet也是个开源的javascript库，用户可以创建友好互动的地图。 ?
1.2K50发布于 2018-04-09 - 来自专栏钱塘大数据
17款可视化工具，让你的数据美如画
2. Fusion Tables 谷歌Fusion Tables是一款数据管理应用，通过Fusion Table，用户可以快速生成相惜的图表，图形或者地图。 Timeline Timeline是由Simile发明的，可以让用户通过简单的滚动和水平拖拽而生成简单的交互时间轴。 ? 6. Leaflet Leaflet也是个开源的javascript库，用户可以创建友好互动的地图。 动图 ? 7.
85360发布于 2018-07-30 - 来自专栏项目实战
生鲜溯源可视化系统：打造食品供应链透明化解决方案
三、前端可视化核心实现3.1 时间轴组件设计核心功能需求：按时间倒序展示养殖、加工、运输、销售各阶段。鼠标悬停显示该节点详细环境数据。关键异常事件（如温度超标）红色高亮。 gap-2 mt-2'> ️ 温度: {item.temperature}°C 湿度: {item.humidity} , Polyline, Marker } from 'react-leaflet';/** * 轨迹地图组件，用于显示位置轨迹和标记点 * @param {Object} props - 组件属性 * 建立到实时数据API的WebSocket连接 * 2. 监听来自服务器的消息 * 3. 根据产品ID过滤数据并更新状态 * 4. 我们从系统架构设计开始，深入剖析了核心组件的实现细节，包括产品溯源主组件、时间轴可视化组件和传感器数据图表组件。
97223编辑于 2025-08-22 - 来自专栏技术翻译
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
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号