Kepler.gl 地图交互配置完全指南：Tooltip、Brushing 与坐标显示的实操与源码解析

数据可视化数据分析【免费下载链接】kepler.glKepler.gl is a powerful open source geospatial analysis tool for large-scale data sets.项目地址https://gitcode.com/gh_mirrors/ke/kepler.gl点击查看免费下载Kepler.gl 是一款开源的浏览器端大规模地理空间分析工具其侧边栏中的Interactions交互面板用于统一管理地图上的悬停提示、笔刷高亮与坐标跟随显示。本文以官方用户指南 g-interactions.md 为主线结合 交互面板组件、交互状态默认配置 等源码实现系统讲解三类交互的开启方式、配置项、字段格式化与适用场景。读完本文你将掌握如何配置多字段 Tooltip含图片、超链接、数值格式化、如何用 Brushing 聚焦弧线等图层局部数据、如何开启跟随鼠标的经纬度坐标面板以及这些交互在状态层visState.interactionConfig中是如何被定义与持久化的。一、Interactions 面板入口与整体工作机制在 Kepler.gl 界面左侧的图层/滤镜面板区点击Interactions图标即可展开交互面板。面板中每类交互对应一行配置条目行尾的开关Switch控制启用/停用点击行头可展开该交互的详细配置子面板。// src/components/src/side-panel/interaction-manager.tsx节选 {Object.keys(interactionConfig).map(key ( InteractionPanel datasets{datasets} config{interactionConfig[key]} key{key} onConfigChange{onConfigChange} setColumnDisplayFormat{setColumnDisplayFormat} / ))}从源码结构看interaction-manager.tsx 遍历状态中的interactionConfig对象为每一类交互渲染一个 InteractionPanel面板内部根据config.id分发到不同的配置子组件config.id配置子组件说明tooltipTooltipConfig选择悬停提示要显示的字段、格式、比较模式brushBrushConfig调整笔刷半径单位kmgeocoderGeocoderConfig地理编码搜索范围限制开关coordinate无子配置仅开关开启后跟随鼠标显示经纬度注交互面板中还有geocoder地理编码这一项其 UI 由 geocoder-config.tsx 实现提供limitSearch限制搜索范围开关。官方用户指南将其归入地图搜索功能本文聚焦指南重点讲解的 Tooltip、Brushing 与坐标显示三项。每类交互的默认状态定义在 vis-state-updaters.ts 的defaultInteractionConfig中它是理解整个交互系统的关键export const defaultInteractionConfig: InteractionConfig { tooltip: { id: tooltip, label: interactions.tooltip, enabled: true, // 默认开启 config: { fieldsToShow: {}, // 各数据集要显示的字段按 dataId 分组 compareMode: false, // 是否开启悬停对比模式 compareType: COMPARE_TYPES.ABSOLUTE // absolute 绝对差值 } }, geocoder: { id: geocoder, label: interactions.geocoder, enabled: false, position: null, config: { limitSearch: false } }, brush: { id: brush, label: interactions.brush, enabled: false, // 默认关闭 config: { size: 0.5 // 笔刷半径单位 km } }, coordinate: { id: coordinate, label: interactions.coordinate, enabled: false, // 默认关闭 position: null } };1.1 开关与配置的交互流程从 interaction-panel.tsx 的实现可以看到点击行头的开关会触发toggleEnableConfig通过onConfigChange即visStateActions.interactionConfigChange把enabled写回状态只有开启后面板才会渲染对应的配置子组件{config.enabled template ( PanelContent classNameinteraction-panel__content{template}/PanelContent )}这也解释了官方指南中“点击开关即可启用/停用”的操作逻辑配置子面板仅在对应交互开启时显示。1.2 Tooltip 与 Brushing 二选一的约束指南明确指出Tooltip 和 Brushing 同一时刻只能开启一个。原因在于两者都依赖“鼠标悬停/移动”这一交互通道同时开启会造成事件冲突。从默认配置可以看出两者默认状态互补tooltip 开启、brush 关闭切换时由状态更新逻辑保证互斥。二、Tooltip悬停数据点显示指标开启 Tooltip 后鼠标悬停在地图数据点或其他要素上时会弹出一个信息卡片展示该要素各字段的取值。它用于快速探查单点属性而不必打开图层数据表。2.1 选择要显示的字段在 Tooltip 配置面板中地图上已有的每个数据集Dataset各有一个字段选择区通过多选下拉FieldSelector挑选要在悬停提示中显示的字段并可通过拖拽调整字段的显示顺序// src/components/src/side-panel/interaction-panel/tooltip-config.tsx节选 FieldSelector fields{dataset.fields} value{config.fieldsToShow[dataId]} onSelect{handleSelect} reorderItems{handleReorderItems} closeOnSelect{false} multiSelect inputThemesecondary CustomChickletComponent{TooltipChickletFactory(...)} /每个已选字段显示为一个“chicklet”小标签带删除按钮顶部还有Clear All清除全部按钮选择结果按dataId存入fieldsToShow[dataId]因此不同数据集可以拥有各自独立的 Tooltip 字段集合默认情况下系统会通过 interaction-utils.ts 中的findFieldsToShow自动挑选字段优先使用DEFAULT_TOOLTIP_FIELDS中与数据集字段匹配的项否则调用autoFindTooltipFields自动挑选非经纬度、非几何字段并受maxDefaultTooltips上限约束。2.2 字段显示格式Format每个 Tooltip 字段都可以单独指定格式化方式这正是指南未展开、但源码中非常实用的一环。字段 chicklet 右侧的“#”图标弹出格式选择菜单实现见 tooltip-chicklet.tsx可选的格式定义在 src/constants/src/tooltip.ts 的TOOLTIP_FORMATS中全部基于 d3-format 与 dayjs 的格式化语法常见选项如下格式 ID展示效果示例底层 formatDECIMAL_SHORT12345 → 10k.1sDECIMAL_COMMA12345 → 12,345,DECIMAL_SHORT_COMMA12345 → 12.3k.3~sDECIMAL_PERCENT_FULL_0.01 → 1%.0%DECIMAL_CURRENCY12345.4321 → $12,345.43$,.2fDECIMAL_DELTA12345.4321 → 12,345.432,.3fDECIMAL_INT12345 → 12350.4~rDATE_L09/05/2016日期LDATE_TIME_L_LTS09/05/2016 12:00:00 AML LTSBOOLEAN_NUM0 | 101BOOLEAN_Y_Nyes | noyn格式字符串format以null表示不格式化TOOLTIP_FORMATS.NONE。在setColumnDisplayFormat动作的支持下字段显示格式还可作为数据集字段的通用展示格式被复用见 interaction-panel.tsx。2.3 悬停对比模式Compare ModeTooltip 配置底部提供Compare Mode悬停对比开关与比较类型选择开启后悬停点会与地图上的基准点/上一次点击点进行数值对比比较类型来自COMPARE_TYPESsrc/constants/src/tooltip.ts#L223-L226absolute绝对差值显示两点的数值差relative相对差值显示相对变化比例。这一功能适合对比两地点之间的指标差异如两个站点的客流量差。2.4 在 Tooltip 中嵌入图片指南特别说明当字段名包含img且字段内容为http开头的图片 URL 时Tooltip 会直接渲染为图片。示例数据结构idimg-tooltip1http://my-image.com/my-image-0.png2http://my-image.com/my-image-1.png即新建一个列名形如img-tooltip的字段每行填入图片 URL将该字段加入 Tooltip 显示列表后悬停数据点时即可看到对应图片常用于 POI 缩略图、街景快照等场景。实现上Tooltip 渲染逻辑会检测字段名中的img标记并据此将值渲染为img元素而非纯文本。2.5 在 Tooltip 中添加可点击的 Web 链接同理字段内容为http://开头的 URL 时Tooltip 会将该值渲染为可点击的超链接。只需在数据集中添加 URL 字段并纳入 Tooltip 显示列表即可适合在悬停卡片中直接跳转查看原始数据页面。2.6 固定PinTooltip 信息指南给出一个高频率操作技巧点击地图上的数据点可把该点的 Tooltip 信息“钉”在地图上内容保持常显再次点击蓝色图钉图标即可取消固定。这便于同时对照多个点的属性或在对某点进行持续观察时避免鼠标离开导致提示消失。三、Brushing笔刷高亮聚焦局部数据Brushing笔刷是另一种与鼠标位置绑定的交互开启后所有图层整体变暗只有鼠标划过的圆形区域被照亮显示其余部分被淡化。指南特别提示Brushing 与 Arc弧线图层配合效果最佳——例如在 OD起终点连线图上笔刷可以让你快速定位某一区域相关的所有连线而不会被其他连线干扰。3.1 笔刷半径配置展开 Brush 配置子面板可拖动滑块调整笔刷半径。从源码看// src/components/src/side-panel/interaction-panel/brush-config.tsx节选 RangeSlider range{BRUSH_CONFIG.range} // [0, 50] value0{0} value1{config.size || 10 / 2} step{0.1} isRanged{false} onChange{value onChange({...config, size: value[1]})} /半径范围[0, 50]定义于 src/reducers/src/interaction-utils.ts#L26-L30 的BRUSH_CONFIG.range步长0.1size字段单位为公里km默认值0.5见defaultInteractionConfig滑块上的默认展示值为config.size || 10 / 2当size缺失时兜底为 5。笔刷半径越大被照亮的范围越广。在联动分析场景如查看某枢纽周边的流向中可通过缩小半径进一步聚焦。3.2 Brushing 与图层可视化的联动从渲染层面看Brushing 状态通过 reducer 的interactionConfigChange更新后会驱动图层渲染管线对非笔刷区域的几何要素做淡化dim处理。指南建议在 Arc 图层上使用是因为弧线天然具有“跨区域连接”的语义笔刷能直观呈现“哪些弧线穿过当前关注区域”而点、线等图层同样适用多图层并存时所有图层会统一变暗。四、Display Coordinates跟随鼠标的经纬度面板开启Coordinate坐标交互后地图上会出现一个跟随鼠标移动的小面板实时显示鼠标所在位置的经度longitude与纬度latitude。该面板在鼠标移出地图区域时自动隐藏。从源码实现看坐标跟随的定位逻辑依赖地图事件回调中的lngLat// src/reducers/src/vis-state-updaters.ts节选 ...(Array.isArray(evt.lngLat) ? {coordinate: [...evt.lngLat]} : {})每次鼠标在地图上移动事件携带的[lng, lat]都会写入interactionConfig.coordinate.position默认值为[0, 0]见 vis-state-updaters.ts驱动面板跟随渲染。该功能常用于快速读取某一点的精确经纬度用于后续数据采集或校验辅助对比不同地图底图下的坐标偏移结合导出功能记录关键位置的坐标值。与 Tooltip 类似coordinate 面板也可在界面上固定/取消固定便于持续读取某位置坐标。五、交互配置的状态管理与持久化所有交互开关与配置都存放在visState.interactionConfig中并通过 vis-state-actions.ts 中的interactionConfigChange、setColumnDisplayFormat等 action 更新。这意味着可编程控制开发者可以通过 Kepler.gl 的 action 系统在运行时以代码方式开关 Tooltip、调整笔刷半径等而不必手动操作 UI随配置保存/加载interactionConfig是地图配置mapConfig的一部分会随 保存与导出 的配置一并序列化相关 schema 定义见 src/schemas/src/vis-state-schema.ts下次加载配置即可恢复相同的交互设置开发扩展点交互面板基于工厂模式InteractionPanelFactory.deps [TooltipConfigFactory, BrushConfigFactory, GeocoderConfigFactory]与可替换组件机制构建开发者可通过 替换 UI 组件 自定义交互面板的展示与行为。六、总结与速查表交互默认状态关键配置典型用途Tooltip开启字段选择、字段格式、Compare Mode、图片/链接字段悬停查看单点属性、嵌入图片与超链接Brushing关闭笔刷半径0–50 km默认 0.5 km聚焦局部数据尤其适合 Arc 图层Coordinate关闭无仅开关显示鼠标所在位置经纬度三条核心操作备忘点击 Interactions 图标进入面板用行尾开关启用/停用对应交互Tooltip 与 Brushing 只能二选一开启点击数据点可 Pin 住 Tooltip / 坐标信息点蓝色图钉取消固定。实用字段技巧字段名含img且值为http://图片 URL → Tooltip 渲染为图片字段值为http://开头的 URL → Tooltip 渲染为可点击链接。进阶阅读交互是 Kepler.gl 分析流程的一环可与 图层、滤镜、地图样式 组合使用若要在应用中通过代码控制交互状态可参考 Actions API 与 visState 文档。赞分享数据可视化数据分析【免费下载链接】kepler.glKepler.gl is a powerful open source geospatial analysis tool for large-scale data sets.项目地址https://gitcode.com/gh_mirrors/ke/kepler.gl点击查看免费下载相关推荐G6 Tooltip 插件从配置到源码交互式提示框的完整实现指南G6 Tooltip 插件从配置到源码交互式提示框的完整实现指南 本文以 G6 官方 API 演示文档 packages/site/common/api/p数据可视化前端图表库kepler.gl Arc 弧线图层完全指南数据要求、配置属性与源码实现解析kepler.gl Arc 弧线图层完全指南数据要求、配置属性与源码实现解析 导读 Arc弧线图层是 kepler.gl 中用于 在两点之间绘制弧线 的核数据可视化数据分析kepler.gl 地图设置指南分屏对比、3D 视角、Globe 地球视图与图例显示kepler.gl 地图设置指南分屏对比、3D 视角、Globe 地球视图与图例显示 kepler.gl 是一款开源的地理空间可视化分析工具其地图右上角的数据可视化数据分析上一篇【亲测免费】 企业级后台管理系统开源项目推荐Vue-CMS下一篇Input Leap终极开源KVM软件一套键鼠控制多台电脑创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考