一文讲透！请收下这份“完美”地图贴图的制作攻略

news2024/11/27 21:57:41

3D渲染中，我们称传入材质的纹理为贴图。贴图一词强调其用途，当某个纹理用于在材质中实现法线效果时，我们称之为法线贴图。而在EasyV中，我们地图组件填充样式中的自定义上传的图片称之为「地图贴图」，主要用于地图表面/顶面的样式设置，因此也称之为「顶面贴图」。

在使用EasyV地图组件时，我们常常通过配置顶面贴图，加深地图的真实感和美观度，让大屏效果更精美。但在实际配置中，我们经常遇到制作好的贴图上传后无法和地图组件轮廓融合，出现我们所说的“对不齐”的问题。

一张对不齐顶面贴图的地图

在这里插入图片描述

接下来我们将具体从问题原因分析入手，再到具体顶面贴图制作实操，带大家详细了解顶面贴图的配置技巧及注意事项。

一、原因分析

出现顶面贴图误差的原因通常主要存在三类原因：贴图和地图的坐标系不一致、贴图存在旋转、边距参数设置不合适。

（一）贴图和地图的坐标系不一致

EasyV的地图组件通常包含墨卡托和WGS 84这两种坐标系投影方式。墨卡托坐标系是在墨卡托投影（是一种圆柱投影）的基础上的一种平面直角坐标系，适用于大部分区域，整体接近正方形，尤其在赤道附近的区域具有较好的保真性（形状保持），但在高纬度地区会出现面积变形，在QGIS中的代号为EPSG: 3857。而WGS84是全球卫星定位系统（如GPS）所采用的标准坐标系统，接近于长方形布局，也被广泛用于地图、测量和地理信息系统（GIS）中，适用于各种地理信息应用，在QGIS中的代号为EPSG: 4326。因此我们在进行贴图制作前，需要确认好最终组件选择投影方式，以便于最后贴图的对齐。

在这里插入图片描述

同时，在我们原始地图数据获取时，不同的地图信息平台提供数据的坐标系也会不同，获取到的数据也会与平台本身的坐标系不匹配，导致最终贴图上传后出现误差。因此我们在进行贴图制作前，需要确认好最终组件选择投影方式与原始数据的坐标系的匹配，以便于最后贴图的对齐。
在这里插入图片描述

（二）贴图存在旋转

这里我们所说的旋转主要是指贴图中内容的展示角度与原有组件数据或者自定义上传的goejson数据效果不一致，也会出现很明显的偏差，导致无法与地图边界对齐。在制作贴图时，我们也需要提前确定好最后地图的展示角度，做好数据区域的调整。
在这里插入图片描述

（三）边距参数设置不合适

这里贴图边距的配置往往最容易被忽略，一般来说这里我们的边距设置需要很小，如0.08，如果边距数据过大，就会导致对应的偏移过大，甚至偏离画面区域。
在这里插入图片描述

为了规避这类问题，我们也给大家梳理了三个技巧，让大家无需调节边距就可以精准展示贴图效果

• 制作正方形的贴图，由于开发本身组件的设置逻辑是正方形贴图，如果使用长方形贴图，就会出现一定的畸变。

• 贴图处理时地图内容的「最长边」要顶到正方形画布边缘，作为正方形贴图的边长，这里我们以甘肃省为例制作了贴图画布的选择效果。

• 制作2的整数次方的贴图，减少平台计算损耗，例如 128、512、1024、2048、4096。
在这里插入图片描述

二、制作流程

如果我们想要制作一张完美对齐、有卫星纹理的顶面贴图，我们需要怎么做呢？首先这里给大家展示一下我们最终的效果。
在这里插入图片描述

（一）工具与数据准备

考虑到大家前期贴图实际操作配置的便捷性，我们选取了以下在线免费使用或者开源的产品进行实操演示：

1、EasyMap（免费使用）：用于下载地图轮廓数据

2、QGIS（开源软件）：坐标处理 + 卫星纹理生成 + 导出SVG

3、Pixso/MasterGo等（在线）：处理贴图样式效果

4、EasyV（免费试用）：使用贴图应用于对应地图组件

额外在QGIS的配置操作中，需要加载在线服务地图并进行详细卫星地图数据的处理配置。

• 高德地图URL：

https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}

• arcgis：

https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}

（二）实操配置

1、基本贴图获取

第一步：在EasyMap中下载对应省份的轮廓数据以及市级轮廓数据，并解压文件。
在这里插入图片描述

第二步：打开QGIS（建议使用QGIS-LTR版本），根据不同的使用场景（是否需要详细市级轮廓）选择对应的轮廓数据拖拽上传。
在这里插入图片描述

第三步：将地图服务对接到QGIS，并在右下角中确认对应的地图投影方式。

在这里插入图片描述

第四步：调成轮廓图层的颜色样式，导出合适的 2 的整数次方的正方形图片。

在这里插入图片描述

第五步：在EasyV中选择对应投影模式后进行贴图上传，到这里就可以制作出完美对齐的顶部贴图。
在这里插入图片描述

2、贴图效果优化

第一步：进入QGIS中，隐去轮廓部分，导出对应区域卫星地图（无轮廓）的贴图。
在这里插入图片描述
第二步：在QGIS中显示对应地图轮廓，隐去其他图层，选择新建画布并选择导出为SVG文件。

第三步：将区域卫星地图（无轮廓）的贴图、轮廓SVG导入对应的在线设计平台（这里我们以Mastergo为例），将轮廓SVG解除打组，删除空白区域后重新打组，获得最终轮廓图。
在这里插入图片描述
第四步：将轮廓拖入卫星地图（无轮廓）的贴图所在的画布中，按照视频中的操作，根据设计需求制作贴图样式效果（内阴影、内发光、颜色效果…）。(具体操作视频，大家可以前往易知微官网了解详情）