G2如何配合Leaflet一起使用？

[bigfacewo]

你好，我想问一下G2如何配合Leaflet一起使用。

主要需求是：

1. 使用G2绘制行政区划（geojson） ✔
2. 接入leaflet或者直接使用其他地图服务，如mapbox作为底图。❌

现在就是第二步不太明白应该怎么做，求教。

[xiaoiver]

目前 geojson 使用了 d3-geo 生成 path，完成行政区划的绘制。

如果要接入 leaflet / mapbox，难点在于处理可视化层和底图同步，我们得好好设计一下方案。

[pearmini]

• 目前还不支持接入 leaflet 和 mapbox，如果有相关需求可以先试试 L7
• 这个能力在今年上半年应该也不会支持，下半年可以考虑支持。

[bigfacewo]

感谢回复。 @xiaoiver @pearmini

我看了L7和L7-leaflet插件，我现在的想法就是，

1. 先使用leaflet来管理地图各个图层，尤其是拿来做自定义坐标系功能
2. 使用L7来绘制图形，但是L7似乎不支持自定义坐标系。
3. 对于L7不方便绘制的图形，使用G2来绘制

目前大概能满足我的使用场景。

[lvisei]

3. 对于 L7 不方便绘制的图形，使用G2来绘制

一般情况下，地图上要绘制的图形，leaflet 或 L7 是可以的满足的，如果要绘制图表 参考 复合图表地图

关于 Leaflet 配合 G2 使用建议也是通过自定义 DOM 的方式挂载图表；除此之外的方案应该是两个渲染的 canvas 进行同步，实现原理可以参考 L7 与 L7-leaflet

[hustcc]

@lvisei 相当于两个 DOM 叠在一起，一个是 L7 的，一个是 G2 的，然后开发者来控制两者之间的同步。在 L7 上有一些这样的 DEMO 吗？

[bigfacewo]

@hustcc 其实原理就是将G2的图表渲染后作为HTML添加到leaflet或L7图层里面，但是实际体验，感觉性能和效果并不太好但是也能用。主要体现两个方面：

1. 配合L7-leaflet的时候感觉移动地图时渲染有延迟
2. tooltip显示效果不好，我看示例都是没显示tooltip的。
   

[hustcc]

• 性能上的问题，可能需要提供一个 live demo，我们排查下
• tooltip 在这个情况下，因为图表比较小，所以内容需要显示的更加精简，或者不显示

[bigfacewo]

抱歉，这个应该不是性能问题，可能是个bug。

案例：https://codesandbox.io/s/pensive-ramanujan-ic0il4?file=/index.js

使用scene.addMarker在移动地图时，g2绘制的图形位置是错乱的。我改成leaflet.marker后正常。

还有个问题是在移动地图时，左下角的Antv | L7 图标位置没有随着移动实时更新，这个可能是L7-leaflet的问题。

[lzxue]

G2 现在支持一个 Canvas 画布绘制多个饼图吗，这样不需要地图上每个标准的都是一个chart 实例 @pearmini

[pearmini]

嗯嗯，5.0 可以在一个画布上绘制多个饼图，可以看这个例子：https://g2.antv.antgroup.com/examples/composition/space/#space-layer