三、环境贴图的使用 除了设置detailTexture属性外,我们还可以使用环境贴图(environment map)来增强3D地图的光照效果。环境贴图是一种模拟环境光照的纹理,它能够产生类似镜面反射的效果。在ECharts中,我们可以通过配置light.ambientCubemap.texture属性来使用环境贴图。例如: environment: new echarts.graphic.LinearGradient(0...
213)",),map3d_label=opts.Map3DLabelOpts(is_show=False,formatter=JsCode("function(data){return d...
{ type: "map3D", map: "map", top: "-12", left: "-2", itemStyle: { opacity: 0, //设置opacity透明度为0 borderWidth: 0 }, regionHeight: 8, viewControl: { distance: 150, // 地图视角 控制初始大小 // rotateSensitivity: 0, // 旋转 // zoomSensitivity: 0, // 缩放 // auto...
type:'map3D',//系列类型name: 'map3D',//系列名称map: 'tongren',//地图类型。echarts-gl 中使用的地图类型同 geo 组件相同(ECharts 中提供了两种格式的地图数据,一种是可以直接 script 标签引入的 js 文件,引入后会自动注册地图名字和数据。还有一种是 JSON 文件,需要通过 AJAX 异步加载后手动注册。)//...
name: 'map3D', // 系列名称 map: 'tongren', // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同(ECharts 中提供了两种格式的地图数据,一种是可以直接 script 标签引入的 js 文件,引入后会自动注册地图名字和数据。还有一种是 JSON 文件,需要通过 AJAX 异步加载后手动注册。) ...
type: 'map3D', map: '绍兴', //必须和上面注册的地图名称一致,详细可以看ECharts的GL配置说明 boxDepth: 100, //地图倾斜度 regionHeight: 2, //地图厚度 light: { main: { intensity: 1.5 } }, label: { show: true, //是否显示市 textStyle: { ...
{type:'map3D',map:'北京',name:'北京',boxDepth:100,//地图倾斜度regionHeight:5,//地图厚度// environment: 'imgs/19.jpeg',//环境贴图,这里用的是渐变色environment:newecharts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:'#09C7F7'// 天空颜色},{offset:0.7,color:'#fff'// 地面颜色}...
registerMap('china', chinaJson); // 配置 3D 地图选项 const option = { series: [ { type: 'map3D', map: 'china', itemStyle: { // 地图区域颜色等样式配置 }, label: { // 标签配置 }, emphasis: { // 鼠标 hover 高亮时样式配置 }, // 其他配置,如环境贴图、地面、光照、视角控制等 }...
在Echarts 中实现 map3D 地图的材质功能,需要按照以下步骤进行: 为地图数据添加高程信息 在geoJSON 数据中,地理信息数据只包含各个省市的边界信息,需要通过高程数据获取地图数据的 3D 笛卡尔坐标。可以使用 echarts.add3DLayer 函数为 geoJSON 数据添加高程信息。 例如,使用以下代码获取中国地图的高程数据: $.get(...
type: 'map3D', map: 'world' }] }; 是不是很简单,当然画出来的效果也是非常基础和简陋的。 接下来就我们需要做的就是一步一步的添加光照、阴影、后期的配置项把这个三维地图画得更漂亮。 添加更丰富的灯光 GL 中大部分组件都支持灯光的配置,这些灯光会影响到组件中的所有图形,灯光的配置项需要统一在组件li...