echarts-gl 3D地图详解 1. echarts-gl是什么? echarts-gl 是基于 Apache ECharts 的一个扩展,它提供了三维可视化能力。通过 echarts-gl,用户可以在网页上轻松创建各种三维图表和地图,实现数据的立体展示和分析。 2. echarts-gl 3D地图的功能和用途 echarts-gl 的 3D 地图功能允许用户以三维视角展示地理数据,...
创建一个div用来挂载地图 在script中引入存放地图数据的json文件 import * as echarts from 'echarts';import geoJson from "../assets/mapJSon/rkz.json"import coordtransform from 'coordtransform'export default {name: 'MapDemo',data() {return {dataIndex: 0,mTime:null}},props: {msg: String},method...
{ 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' },...
echarts-gl 地图3d label或tooltip自动高亮切换 echarts还存在个gl-echarts,如果不显示tooltip。 https://www.cnblogs.com/zxr0/p/14819032.html 其实一种是通过label显示的,开始时默认一种展示,然后具体到单个时再显示另外一种。 注label和tooltip是两个不同的东西,这只是借用label实现。 image.png https://dat...
如图,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 可视化展示2020GDP 数据 效果: 3d地图和二维比起来可以随心所欲的旋转自然更受欢迎,echarts 各类文档齐全,虽然配置略显繁琐,但这也说明人家功能丰富啊,精研一下不亏 import { gdp } from './data.js' const xhr = new XMLHttpRequest() ...
{ type: "lines3D", coordinateSystem: "geo3D", effect: { show: true, trailWidth: 2, trailOpacity: 0.6, trailLength: 0.5, constantSpeed: 8, }, blendMode: "lighter", lineStyle: { width: 0.2, opacity: 0.05, }, data: alirl, }, ], }; this.myChart.setOption(option); } else { ...
echarts-gl 是一个基于 WebGL 的数据可视化库,提供了丰富的 3D 可视化效果。其中,三维地球的例子是 echarts-gl 中的一个重要示例,它展示了如何使用 echarts-gl 创建一个具有交互功能的三维地球可视化。 2. echarts-gl 三维地球的基本构成 echarts-gl 三维地球的基本构成主要由如下几个部分组成: 1)地球模型:...
echarts gl 3d地图,click事件失效,解决办法,问题比如点击四川,进行下钻,需要获取点击区域的name属性,根据name进而异步获取四川的地图的json,如下图所示:echart和gl版本Loadedclaygl,version1.2.1echarts-gl.min.js:
ECharts 提供了两种格式的地图数据,一种是可以直接通过 script 标签引入的 js 文件,引入后会自动注册地图名字和数据。还有一种是 JSON 文件,需要通过 AJAX 异步加载后手动注册。 用json文件会在谷歌浏览器上会出现跨域的问题,在这里用的是直接引入beijing.js(需要下载数据文件)文件。