Leaflet.js+d3

最新推荐文章于 2024-08-15 17:17:10 发布

Shirley_RL

最新推荐文章于 2024-08-15 17:17:10 发布

阅读量4.2k

点赞数 1

分类专栏：数据可视化 d3可视化总结文章标签： d3 leaflet

本文链接：https://blog.csdn.net/yfdhn/article/details/50976302

版权

本文介绍了如何结合Leaflet.js——一个强大的开源地图库，与d3.js——一个数据可视化库，来创建能够随着地图缩放而调整的SVG元素。通过Mike Bostock提供的方法，你可以实现d3.svg的覆盖层与Leaflet地图的交互，并通过layer control控制d3的SVG覆盖。参考资源包括《D3 Tips and Tricks》中关于在地图上叠加d3.js元素的章节。

摘要由CSDN通过智能技术生成

leaflet.js 是一个集成的openstreemap开源库，提供很多地图的API，由于封装化，svg的绘制需要调用leaflet获得pane ,d3的开发者mike Bostock 提供了一种方式：https://bost.ocks.org/mike/leaflet/
leaflet.js Overview：
Leaflet map with d3.js objects that scale with the map

// 地图中心center 放大倍数 zoom 
// map.getZoom()获得放大倍数 
// TileLayer 地图图层，可以通过L.Control控制多个图层的叠加问题
// leaflet 内置了index排序这些layer
var map = new L.Map("map", {center: [37.8, -96.9], zoom: 4})
    .addLayer(new L.TileLaye