如图,3D 地图是一个比较炫的组件,在这借官方示例「ECharts-GL Hello World」学习一下 3D 地图及飞线图的基本使用。 首先准备一个 3D 地球 代码语言:javascript 复制 option.globe={baseTexture:"./earth/world.topo.bathy.200401.jpg",heightTexture:"./earth/world.topo.bathy.200401.jpg",displacementScale:...
使用ECharts-GL绘制3D地图是一个相对复杂的任务,需要准备多个步骤和组件。以下是详细的步骤和示例代码,帮助你理解如何使用ECharts-GL绘制3D地图: 1. 准备ECharts-GL库和相关依赖 首先,你需要在项目中引入ECharts和ECharts-GL库。可以通过CDN引入,也可以通过npm安装。 html <!-- 通过CDN引入 --> <...
roam: false, // 禁用地图的缩放和平移功能 onMouseWheel: false, itemStyle: {}, label: { show: true, position: 'inside', color: '#fff', //地图初始化区域字体颜色 fontSize: 12, rich: { customDiv: { backgroundColor: 'rgba(50,50,50,0.7)', padding: [4, 5], width: 80, margin: 0,...
如果要绘制世界地图的话还需要引入上面「常用脚本」的世界地图文件。 做好准备工作后我们就可以开始画一个三维的世界地图了,GL 中画三维地图的配置项跟画普通的二维地图一样,只是系列名称从原来的map改成map3D。 我们先用下面的最基础配置项,基于引入的脚本,生成一个最基础的三维地图系列。 option = { series: [...
适应大屏风格的发光地图效果,用了两个图层实现叠加背景图片实现: 安装命令 首先在项目中安装echarts与echarts gl(echers gl用于3d) 安装命令 npm install echarts --save //echarts安装命令 npm install echarts-gl //echarts-gl安装命令 安装完成后在package.json中查看有没有安装成功 ...
{ type: 'map3D', // 3D地图 map: 'nh', // registerMap的key environment: '#020E24', // 背景色 groundPlane:{ // 显示地面 show:true, }, instancing:true, // 合并geometry,提高效率 itemStyle:{ // 图形的样式 color:'#0C3972', borderWidth:3, opacity:0.5, borderColor:'#3DB4DC' },...
问题 比如点击四川,进行下钻,需要获取点击区域的name属性,根据name进而异步获取四川的地图的json,如下图所示: echart和gl版本 Loaded claygl, version 1.2.1 echarts gl.min.js:1 Loaded echarts, version 4.6.
比如点击四川,进行下钻,需要获取点击区域的name属性,根据name进而异步获取四川的地图的json,如下图所示: echart和gl版本 Loaded claygl, version 1.2.1 echarts-gl.min.js:1 Loaded echarts, version 4.6.0 事件绑定写法 myChart.on('click', function (clickparams) { ...
echarts-gl 中使用的地图类型同 geo 组件相同 regionHeight: 2, shading: 'realistic', realisticMaterial: { // detailTexture: './1.png' }, itemStyle: { borderWidth: 1.5, borderColor: '#5FB9DA', color: '#6597D0', opacity: 1 }, label: { show: true, // 是否显示标签。 textStyle: {...
如果echarts-gl地图下钻,一些类似边框、颜色等属性,需要在下钻事件里面重新调整,否则下钻到新的地图属性不能匹配。 echarts-gl map3D组合图形 如果仅仅echarts-gl map3D效果没那么出众,一般都是配合其它图形,在地图上放柱形、雨滴等会更突出3D效果,所以可以进一步扩展。