网页上矢量地图怎么个画法?

类似下面这种图怎么画的?鼠标悬浮时,会给当前州加个边框,并且显示一个信息框:

CleanShot 2021-12-18 at 20.51.12@2x

截图来源: https://www.nytimes.com/interactive/2021/12/18/us/vaccine-mandate-states.html

我也想弄个类似的,比如,用了标注中国各个省份的人口。

网上搜索可能相关到 Mapbox、D3、Leaflet 这样的 JS 库,不晓得行不行的。

我印象中 NYT 这些新闻网站用来展示大选结果、疫情等等的交互地图都是 Mapbox。它原先是基于 BSD 协议开源的,但是后来改了 https://news.ycombinator.com/item?id=25347310

Leaflet 看起来是个不错的选择,这里有个交互式分区统计的例子 https://leafletjs.com/examples/choropleth/

如果自己画矢量地图,有很多绘制库,但是自己灌坐标数据比较麻烦。

可以尝试用一些图层标注库:

首先要有要绘制的图形如美国各州的数据(GeoJSON,shapefile等)。

再就是地图绘制标注库。

这里有个maptalks的例子,maptalks - 图形信息框

我印象中无需任何js库,使用html的图片热点区域 area,map标签 在一张图片上标注热点范围区域就可以实现这样的功能,而鼠标移入弹出提示窗口这个需要其它js库(如tippyjs)。

但这样的实现应该是做不了一些炫酷的效果,如果要效果还是要找其它js图表库

昨晚用 ECharts 结合 GeoJSON 取得一点进展,上面绘制散点图表示省份的信息。

这里有一些地图数据:

在国内画国内地图要小心,记得报请国家测绘局