第一步:vue中安装echarts和echarts-gl npm install echarts npm install echarts-gl 或是 yarn add echarts yarn addecharts-gl package.json 也可以指定版本命令 加个@后面跟版本号即可 yarn addecharts-gl@2.0.9 成功之后可以在package.json中检查是否安装成功(如上图) 第二步:在vue文件中引入 引入位置:...
设置了texture属性后 GL 就会自动启用环境光贴图作为环境光源。 因为全景贴图的每个像素都会被计算到光照里,所以相比普通的环境光,使用环境光贴图会让整个光照会显得更真实和丰富。 为了得到更真实的环境光效果,注意此处建议使用.hdr格式的图片,因为HDR也就是高动态范围图像,它比其他格式的图像有更大亮度的数据存储。对...
light: { // 光照阴影 // ambient: { // intensity: 1 // } } } } option.geo3D.regions.forEach((region, index) => { region.itemStyle.color = mapColors[index % 11] // 白色虚线 region.itemStyle.borderColor = '#fff' // region.itemStyle.backgroundColor = '#fff' region.itemStyle.borde...
geo3D:配置地球的基本属性,如形状(sphere 表示球体)、半径等。 series:定义要展示的数据系列,如散点图、热力图等,用于在地球表面展示数据。 light:配置光照效果,以增强三维效果。 viewControl:配置视角控制,允许用户通过鼠标和键盘与三维场景进行交互。4. 提供一个简单的 echarts-gl 地球可视化的代码示例 ...
该案例展示了航班的飞行路径,并且可以通过调整颜色和光照来模拟不同的日出日落情景。 3. 线性导向图 该案例展示了一个带有一些节点的线性导向图,每个节点还附带了其自定义的文字和颜色。 4. 风险地图 该案例展示了地图上的风险地点,可以通过显示不同颜色的球体来表示不同等级的风险。 5. 3D 散点图 该案例展示...
intensity: 2, //光照强度 shadowQuality: 'high', //阴影亮度 shadow: true, //是否显示阴影 alpha: 50, beta: 10 }, ambient: { intensity: 0 } }, postEffect: { enable: true, bloom: { enable: true } }, groundPlane: { show: false ...
有光的地方就会有阴影。阴影为光照增添了层次，失去阴影的光照显得平淡乏味。在 GL 中，可以通过设置“shadow: true”为主光源添加阴影。同时，为了让三维地图有一种放在地面上的立体模型的感觉，再显示一个地面“groundPlane”。通过设置主光源的“alpha”、“beta”属性，可以设置不同的光照角度，查看...
intensity: 2, //光照强度 shadowQuality: 'high', //阴影亮度 shadow: true, //是否显示阴影 alpha: 50, beta: 10 }, ambient: { intensity: 0 } }, postEffect: { enable: true, bloom: { enable: true } }, groundPlane: { show: false ...
1)地球模型:echarts-gl 使用了 Three.js 中的 Globe 类来构建三维地球模型,可以对地球的材质、纹理、光照等进行自定义设置。 2)数据可视化:通过 echarts-gl 提供的 API,可以将地理信息数据,如地图、气候、人口等数据,映射到地球模型上,形成直观的可视化效果。 3)交互功能:echarts-gl 支持对三维地球进行缩放、...
shading三维图形的着色效果,值: 'color'只显示颜色,不受光照等因素影响。 'lambert'通过景点的lambert着色表现光照的明暗 'realistic'真是感渲染 */