首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >免费免注册,超灵活配置的 poi 地图标注可视化网页上线

免费免注册,超灵活配置的 poi 地图标注可视化网页上线

作者头像
月小水长
发布2025-09-02 11:48:02
发布2025-09-02 11:48:02
2730
举报
文章被收录于专栏:月小水长月小水长

开发背景

本人独立开发的数据可视化网站,

已经有中国地图、世界地图两个地图编辑器了,

全国-省-市三级地图及世界地图在线编辑可视化工具上线

支持级联下钻、在线导入数据、自定义区域 Value 大小、智能生成 VisualMap 等等功能,

全程在线导出结果,无需下载任何应用,免费使用,已经稳定运行快三年~

几个月前有读者后台私信,能不能做一个地图标注功能,当时记下,

刚好最近我自己有类似的需求,而且特别精细个性化,

我尝试了已有的一些应用或者网站,没有一个能完美符合我的需求的,

怎么办?那就自己开发一个呗,独立开发者就是这么任性,

于是我在周末花时间开发完成并上线了,依旧免费使用~

功能介绍

功能网页地址在:

https://tools.buyixiao.xyz/poi-marker-map

打开这个网页,可以看到界面分左中右三栏,可自由拖动宽度,

左栏是数据导入、新增、编辑以及地图样式、标注分级颜色等设置面板

中间是地图显示结果页,基于 LeafLet 地图 JS 库

右侧是数据统计以及结果导出处,可导出为图片或者 HTML 到本地

使用演示

数据操作

首先可以选择数据导入,只支持 CSV 文件,UTF-8 格式,必须包含列:lng, lat, value

后续的数据新增或者编辑都是基于这个数据表处理了,

当然了,也可以选择不导入,默认就是一个空表,后面的操作就是基于这个空表,

这里我演示选择导入一个符合要求的 points.csv

导入并且解析后,中间地图就会实时渲染,地图默认是定位到北京的,

无论是初始的数据导入,还是后续的新增数据点、编辑数据点,

每一次数据操作,地图会根据所有现存点自动计算中心点并自动定位,

同时根据数据点范围自动计算合适的缩放大小,如上图所示,

现在地图上有一大一下两个点,我们新增一个大数据点试试,

视角和缩放都自适应了,颜色根据图例渲染,非常 Nice,

如果对刚才新增了错误的数据点,我们也可以接着编辑数据表,不过不建议这样操作~

legend 设置

接下来是点击分级颜色及大小设置,也是就 legend 图例,

可以自定义级数,默认是分三级,可以增删,

也可以修改每一级的数据值大小范围

也可以点选颜色选择框,自由设置每一级的颜色,总之非常方便,

底图选择

预制了十种左右的地图样式,可选择下拉框自由选择更改,

高度、标题文字大小颜色边距等设置

这里的设置非常灵活,

支持设置地图高度,方便适配大屏,宽度可自由拉伸,

支持设置标题、副标题的字体大小、颜色、左边距、顶边距等等

也可以设置 legend 的标题、宽度(高度自适应)和边距

但是,为避免地图频繁刷新,以上修改,需要等到下次地图数据点和底图修改后才生效

数据统计和导出

右侧实时显示数据点数和经纬度范围,

同时可点击导出 PNG 图片,或者导出 HTML 文件到本地浏览地图

点击文末阅读原文,或者打开下方链接直达工具网页,

https://tools.buyixiao.xyz/poi-marker-map

社群交流

我是月小水长,多年互联网大厂&创业前后端全栈开发经验,

大数据大模型企业项目一线实战者,数据可视化数字人文爱好者,

全网粉丝近 10w,目前微信/小红书技术交流社群数千人。

欢迎后台私信,免费进群交流,不备注来意的一律不通过。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2025-08-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 月小水长 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 开发背景
  • 功能介绍
  • 使用演示
    • 数据操作
    • legend 设置
    • 数据统计和导出
  • 社群交流
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档