在ECharts GL 中绘制三维地图
发布网友
发布时间：2024-09-25 18:14
共1个回答
热心网友
时间：2024-10-04 09:08
通过在 Gallery 中创建一个具有丰富光效和阴影的写实风格三维地图示例，本文简单介绍了 ECharts GL 中与画质相关的配置项。具体效果请参考：gallery.echartsjs.com/e...
首先，在 Gallery 中使用 ECharts GL 绘制一个基础三维地图。由于 GL 是 ECharts 的扩展，需要在 Gallery 中额外引入 GL 的脚本文件。只需在 Gallery 中新建作品，然后在“脚本”配置中添加相应地址即可。
echarts.baidu.com/resou...
若要绘制世界地图，还需引入上述“常用脚本”的世界地图文件。
准备工作完成后，就可以开始绘制一个三维世界地图了。GL 中绘制三维地图的配置项与二维地图类似，只需将系列名称从“map”改为“map3D”。
以下是最基本的配置项，用于生成最基础的三维地图系列。
当然，画出的效果也会相对基础和简陋。
接下来，通过添加光照、阴影等后期配置项，逐步提升三维地图的视觉效果。
在 GL 中，大部分组件都支持灯光配置，这些灯光会影响组件中的所有图形。灯光配置项需要在组件的“light”属性下设置。
通常情况下，组件中会默认包含一个主光源“main”和一个全局环境光“ambient”。主光源负责主要的照明作用，使三维地图产生基础的明暗对比，从而产生立体感。全局环境光为整个场景提供全局照亮和统一材质的效果。
通过设置“intensity”属性，可以调整不同光源的强度。例如，在上面的代码中，将主光源强度设为2，环境光源强度设为0，可以得到更强烈的明暗对比。
默认环境光只是对所有图形添加固定亮度，显得很平淡。如果去掉主光源（强度设为0），整个地图场景将变成灰色。因此，为了更丰富的光照效果，可以使用 GL 提供的“ambientCubemap”作为环境光源。
“ambientCubemap”是指使用一张全景贴图作为环境光源。一般全景环境光贴图如下所示。
大家可以使用手机的全景模式拍摄类似的全景照片。不过，建议寻找专业的 HDR 格式的全景图资源。这里推荐一个提供不少免费 HDR 全景图资源的网站：hdrlabs.com/sibl/archiv...
找到合适的全景图片后，可以在 Gallery 的导入数据中上传该图片。
得到 Gallery 上的图片地址链接后，将其插入到“ambientCubemap”的“texture”属性中。
设置了“texture”属性后，GL 会自动启用环境光贴图作为环境光源。
由于全景贴图的每个像素都会被计算到光照中，因此相比普通环境光，使用环境光贴图会使整个光照更真实和丰富。
为了得到更真实的环境光效果，建议使用 HDR 格式的图片，因为 HDR（高动态范围图像）比其他格式的图像具有更大亮度的数据存储。对比一下同一张图片 HDR 和 PNG 格式照亮的不同效果。
有光的地方就会有阴影。阴影为光照增添了层次，失去阴影的光照显得平淡乏味。
在 GL 中，可以通过设置“shadow: true”为主光源添加阴影。同时，为了让三维地图有一种放在地面上的立体模型的感觉，再显示一个地面“groundPlane”。
通过设置主光源的“alpha”、“beta”属性，可以设置不同的光照角度，查看阴影的变化。
这样就可以实现之前设计圈非常流行的一种长阴影风格。
到这里，得到的效果与最初那个简陋的画面已是天差地别。作为一个设计师，我很喜欢白模效果，但如果你有一份数据，那就更完美了。数据上传和转换可以通过 echarts 提供的表格数据转换工具实现，echarts.baidu.com/sprea...
将这份数据导入并写入配置项中。
接下来，我们可以使用 ECharts 中的视觉映射“visualMap”组件，将地图中的每个区域赋予不同的颜色。
在 ECharts GL 中使用 visualMap 与 ECharts 中并无差异：
这样，每个国家根据不同数据就呈现出不同的颜色。
看到后期处理，大家可能首先想到的是使用 PS 调色。但我这次主要用到的确实是调色。但其实 GL 中除了调色之外，还有许多后期效果，如景深、描边等，可以让整个画面呈现出你需要的效果，大家可以大胆尝试。
不知道大家是否能感受到，此时得到的图片整体明度偏暗，色相偏蓝。就像我们在拍完照片后发现色调和曝光不理想，需要再次调整图片一样，我们也需要对这张画面进行后期处理和调色。
后期处理的配置项都在组件的“postEffect”下。首先，可以通过“enable”属性开启。
开启后，GL 会自动对整个画面进行调整，使其曝光到合适的颜色。
当然，如果这个画面并不能让我们满意，我们还可以通过“postEffect”下的“colorCorrection”配置项手动调整颜色。
“colorCorrection”下有常见的曝光“exposure”、亮度“brightness”、对比度“contrast”和饱和度“saturation”选项。
但是这次我要教大家使用这里更强大的颜色查找表功能“lookupTexture”。这个功能可以让我们在 PS 等自己用着顺手的图像处理软件里处理好图片后，再在 GL 中复现我们在 PS 中调整的颜色曲线。
我给大家提供了一张初始的颜色查找表。大家把下面这张查找表的图片下载下来后，与你的作品截图一起放入 Photoshop 中（可以把作品截图拖入查找表图层的上方，注意需要保持查找表大小不变，作品截图是为了让我们直观预览调整的效果。调整满意后，删除作品图层，只保存查找表，之后在 GL 中载入查找表，查找表的颜色映射会直接在 GL 中复现）。
点击左下角创建新的填充或调整工具来选择自己需要调整的配置项。此时，两个图层可以同时调整，这里可以自由调整各项参数来实现想要的效果。我在此使用的是颜色查找下自带的“Candlelight.cube”，将图片调整成了一种蜡烛光照的复古风格，并调整了亮度和对比度，使其更清晰。
调整完成后，隐藏作品截图的图层，只需保存颜色查找表（如下图）。
将该图在 Gallery 内上传数据，得到 Gallery 上该图片地址链接后，插入到“colorCorrection”的“lookupTexture”中即可。
至此，在 ECharts GL 中配置一个三维地图的步骤就完成啦。如果还想解锁更多 GL 技能，可以直接去 ECharts Gallery 查看 GL 超多酷炫的实例，或者查看 GL 的配置项手册 ECharts Documentation，尽情尝试吧～
本文介绍了如何在 ECharts GL 中配置出一张好看的写实风格三维地图。ECharts GL 生成的效果图还可以直接用作图片素材。如果你还在为 PPT 或自己的设计作品找不到合适的配图素材而发愁，快试试直接在 Gallery 里用 ECharts GL 生成一张吧。
热心网友
时间：2024-10-04 09:07
通过在 Gallery 中创建一个具有丰富光效和阴影的写实风格三维地图示例，本文简单介绍了 ECharts GL 中与画质相关的配置项。具体效果请参考：gallery.echartsjs.com/e...
首先，在 Gallery 中使用 ECharts GL 绘制一个基础三维地图。由于 GL 是 ECharts 的扩展，需要在 Gallery 中额外引入 GL 的脚本文件。只需在 Gallery 中新建作品，然后在“脚本”配置中添加相应地址即可。
echarts.baidu.com/resou...
若要绘制世界地图，还需引入上述“常用脚本”的世界地图文件。
准备工作完成后，就可以开始绘制一个三维世界地图了。GL 中绘制三维地图的配置项与二维地图类似，只需将系列名称从“map”改为“map3D”。
以下是最基本的配置项，用于生成最基础的三维地图系列。
当然，画出的效果也会相对基础和简陋。
接下来，通过添加光照、阴影等后期配置项，逐步提升三维地图的视觉效果。
在 GL 中，大部分组件都支持灯光配置，这些灯光会影响组件中的所有图形。灯光配置项需要在组件的“light”属性下设置。
通常情况下，组件中会默认包含一个主光源“main”和一个全局环境光“ambient”。主光源负责主要的照明作用，使三维地图产生基础的明暗对比，从而产生立体感。全局环境光为整个场景提供全局照亮和统一材质的效果。
通过设置“intensity”属性，可以调整不同光源的强度。例如，在上面的代码中，将主光源强度设为2，环境光源强度设为0，可以得到更强烈的明暗对比。
默认环境光只是对所有图形添加固定亮度，显得很平淡。如果去掉主光源（强度设为0），整个地图场景将变成灰色。因此，为了更丰富的光照效果，可以使用 GL 提供的“ambientCubemap”作为环境光源。
“ambientCubemap”是指使用一张全景贴图作为环境光源。一般全景环境光贴图如下所示。
大家可以使用手机的全景模式拍摄类似的全景照片。不过，建议寻找专业的 HDR 格式的全景图资源。这里推荐一个提供不少免费 HDR 全景图资源的网站：hdrlabs.com/sibl/archiv...
找到合适的全景图片后，可以在 Gallery 的导入数据中上传该图片。
得到 Gallery 上的图片地址链接后，将其插入到“ambientCubemap”的“texture”属性中。
设置了“texture”属性后，GL 会自动启用环境光贴图作为环境光源。
由于全景贴图的每个像素都会被计算到光照中，因此相比普通环境光，使用环境光贴图会使整个光照更真实和丰富。
为了得到更真实的环境光效果，建议使用 HDR 格式的图片，因为 HDR（高动态范围图像）比其他格式的图像具有更大亮度的数据存储。对比一下同一张图片 HDR 和 PNG 格式照亮的不同效果。
有光的地方就会有阴影。阴影为光照增添了层次，失去阴影的光照显得平淡乏味。
在 GL 中，可以通过设置“shadow: true”为主光源添加阴影。同时，为了让三维地图有一种放在地面上的立体模型的感觉，再显示一个地面“groundPlane”。
通过设置主光源的“alpha”、“beta”属性，可以设置不同的光照角度，查看阴影的变化。
这样就可以实现之前设计圈非常流行的一种长阴影风格。
到这里，得到的效果与最初那个简陋的画面已是天差地别。作为一个设计师，我很喜欢白模效果，但如果你有一份数据，那就更完美了。数据上传和转换可以通过 echarts 提供的表格数据转换工具实现，echarts.baidu.com/sprea...
将这份数据导入并写入配置项中。
接下来，我们可以使用 ECharts 中的视觉映射“visualMap”组件，将地图中的每个区域赋予不同的颜色。
在 ECharts GL 中使用 visualMap 与 ECharts 中并无差异：
这样，每个国家根据不同数据就呈现出不同的颜色。
看到后期处理，大家可能首先想到的是使用 PS 调色。但我这次主要用到的确实是调色。但其实 GL 中除了调色之外，还有许多后期效果，如景深、描边等，可以让整个画面呈现出你需要的效果，大家可以大胆尝试。
不知道大家是否能感受到，此时得到的图片整体明度偏暗，色相偏蓝。就像我们在拍完照片后发现色调和曝光不理想，需要再次调整图片一样，我们也需要对这张画面进行后期处理和调色。
后期处理的配置项都在组件的“postEffect”下。首先，可以通过“enable”属性开启。
开启后，GL 会自动对整个画面进行调整，使其曝光到合适的颜色。
当然，如果这个画面并不能让我们满意，我们还可以通过“postEffect”下的“colorCorrection”配置项手动调整颜色。
“colorCorrection”下有常见的曝光“exposure”、亮度“brightness”、对比度“contrast”和饱和度“saturation”选项。
但是这次我要教大家使用这里更强大的颜色查找表功能“lookupTexture”。这个功能可以让我们在 PS 等自己用着顺手的图像处理软件里处理好图片后，再在 GL 中复现我们在 PS 中调整的颜色曲线。
我给大家提供了一张初始的颜色查找表。大家把下面这张查找表的图片下载下来后，与你的作品截图一起放入 Photoshop 中（可以把作品截图拖入查找表图层的上方，注意需要保持查找表大小不变，作品截图是为了让我们直观预览调整的效果。调整满意后，删除作品图层，只保存查找表，之后在 GL 中载入查找表，查找表的颜色映射会直接在 GL 中复现）。
点击左下角创建新的填充或调整工具来选择自己需要调整的配置项。此时，两个图层可以同时调整，这里可以自由调整各项参数来实现想要的效果。我在此使用的是颜色查找下自带的“Candlelight.cube”，将图片调整成了一种蜡烛光照的复古风格，并调整了亮度和对比度，使其更清晰。
调整完成后，隐藏作品截图的图层，只需保存颜色查找表（如下图）。
将该图在 Gallery 内上传数据，得到 Gallery 上该图片地址链接后，插入到“colorCorrection”的“lookupTexture”中即可。
至此，在 ECharts GL 中配置一个三维地图的步骤就完成啦。如果还想解锁更多 GL 技能，可以直接去 ECharts Gallery 查看 GL 超多酷炫的实例，或者查看 GL 的配置项手册 ECharts Documentation，尽情尝试吧～
本文介绍了如何在 ECharts GL 中配置出一张好看的写实风格三维地图。ECharts GL 生成的效果图还可以直接用作图片素材。如果你还在为 PPT 或自己的设计作品找不到合适的配图素材而发愁，快试试直接在 Gallery 里用 ECharts GL 生成一张吧。
