echart3D地球上贴2D组件
2019-12-20 本文已影响0人
你好赵大宝
globe与geo完美结合
globe
- globe用于绘制3D地球,属于echart-gl.js,本身可以进行坐标和连线的显示,但是要使用lines3D和scatter3D,此时就会有属性的限制。
- 平面上使用的lines和scatter与3D版的在坐标使用上一致,但是有些特效和属性是3D没有的,比如想在3D时绘制在线上也可出现的自定义symbol,lines3D不支持这样的效果。
- 二者的结合就非常重要了。注意:globe的baseTexture允许放置canvas和echart实例,那么可以将2d的geo或map与3d的globe结合起来,实现地球上各种特效的骚操作。
// 使用 echarts 绘制世界地图的实例作为纹理
var canvas = document.createElement('canvas');
var mapChart = echarts.init(canvas, null, {
width: 4096, height: 2048
});
mapChart.setOption({
series : [
{
type: 'map',
map: 'world',
// 绘制完整尺寸的 echarts 实例
top: 0, left: 0,
right: 0, bottom: 0,
boundingCoords: [[-180, 90], [180, -90]]
}
]
});
...
baseTexture: mapChart
自定义的地图可以使用geoJSON,也可以放在地球上,实现将地球区域性遮盖的效果
echart文档详实全面,可以仔细研究https://www.echartsjs.com/zh/option-gl.html#globe.baseTexture