开发了一个超灵活配置的 poi-marker 地图标注网站

开发背景

本人独立开发的数据可视化网站，已经有中国地图、世界地图两个地图编辑器了，支持级联下钻、在线导入数据、自定义区域 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，目前微信/小红书技术交流社群数千人。

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