网页设计地图怎么做 第1篇
通常只有街道地图会有独立建模的需要，但建模的过程往往不是设计师从零开始实现。通常要导入地形数据生成基础地图，然后再对一些有精度要求的建筑、景观、地标进行建模后置入进去。
以上 6 种是项目中最常见的地图展示类型，除此之外还有一些应用 GIS 和图形引擎生成的特殊地图种类就不在这里展开介绍了。
在真实项目中，设计师必须先判断项目需要使用的地图是哪种形式，以及设计稿输出的效果是 “仅展示”，还是最后要开发出来。
如果设计过程和开发过程是各自独立的，设计是用来给甲方、领导看的，开发怎么做没有关系，或者地图就是个背景位图，那怎么设计都没关系，怎么做“科技感”、“酷炫”就怎么来。
下面我们就开始解释独立设计地图的方法，主要介绍的对象是区块地图创建和设计的思路。
网页设计地图怎么做 第2篇
这一步要将前面获得的地图素材整理进 UI 设计软件（PS / Affinity Photo 中也可以）中，尤其是将卫星图的位置和矢量地图的轮廓进行匹配。
而为了更好的进行后续视觉的处理，卫星地图要被分隔成两个部分，区划内和区划外。区划外作为背景层已经有了，所以可以复制一层并使用前面准备的矢量区域做蒙版，得到一个区划内的独立卫星图景。
这里要强调，如果地图轮廓在 AI 中用了比较大的倾斜角度，那么底部的卫星图就也需要做透视处理，要放到 PS 中通过独立设置透视倾斜的参数来获得相近的结果。
想要效果好，就尽量完成前面的全部工作和准备，不要一边准备素材再一边处理视觉效果，这会导致在设计过程中手忙脚乱。
网页设计地图怎么做 第3篇
最后，就是添加视觉效果，让地图看起来更醒目，更酷炫……视觉效果的添加可以分成以下几个步骤。
先压暗背景地图，一方面降低饱和度，另一方面添加一个透明度径向渐变的遮罩，让背景地图被弱化更好的突出主体。
然后处理区域内的卫星图，虽然它比背景重要，但地图的主角并不是这些图像内容，所以也要进行弱化，可以通过降低明度和饱和度完成，也可以在上方叠加一层和主色近似的遮罩层。再给整个地图添加投影，进一步加强主体和背景的层次感。
最后增加光效，首先是地图的轮廓发光，只要再描边层中使用亮度高的 “投影” 就能实现外发光的效果。而想要让光效看起来明亮，就可以使用接近白色的描边色，再投影色上添加饱和度较高的色相。
外发光是最重要的光效应用，之后可以再给添加描边内发光、地图高光、底部发光等不同效果，就看设计师自己的偏好。如果没有太多的想法，也可以去收集同类地图效果做了哪些，选择满意的往自己的设计中进行添加即可。
地图的做法非常多，先掌握上面的基础才可以进一步拓展到更复杂的平面类地图的设计中去。
而这类地图应该如何交付和开发呢？除了整个地图做为背景外，只能通过代码来实现地图轮廓和效果。
因为地图的不同区块是不规则的图形，而这些不规则的图形没办法通过简单的矢量切图（导出就是矩形）进行组合，所以可交互的地图主要是通过浏览器获取相关矢量数据生成的，这些矢量数据程序员会自己去获取（3D 区划地图逻辑一样）。
但是地图描边上使用的发光效果，是可以通过前端的样式进行还原的，所以需要提供相关的标注文件让开发查看。
同时应用的卫星地图贴图，也需要进行单独的导出。而在位图上添加的效果，就要在导出过程中被合并到位图内，尽可能减少使用的位图数量，这就要凭借设计师自己的经验去判断。
具体还要做哪些工作进行交付，不同的项目和编程逻辑不同，最好让前端给你提供一个简单的文档罗列出来。
以上就是区划类地图实现的基本逻辑。
那街区类地图应该怎么设计呢？答案是基本没办法靠设计软件来完成独立设计。想要获得这些图形只能从成熟的地图软件中截图或导出，可以使用类似 Mapbox 等工具提前定制地图的样式，然后再截图。
而 3D 地图建模因为步骤太多，不同软件做法差异太大，所以不在这里展开，想要学习这种做法的同学可以到 B 站搜索 C4D / Blender 的相关城市、地图建模教学即可。
通常 3D 地图也是用前端代码实现建模的部分，然后再叠加不同的贴图或是属性样式，所以软件内创建地图还加上渲染输出的话，就没有最终落地实现的可能。
因为地图的类型非常多，所以 3D 地图的实现方法也多种多样，不是一句两句话能说完，有很多前置的知识点。
大屏类项目的复杂性来自需求、设备、技术的多样性，导致多数单一知识点都没办法套用到所有场景中去。所以这些分享放进我们的可视化系列课程内，因为做起来太麻烦只能以付费课的形式输出。
想要进一步提升对大屏项目的认识，那只能建议你们购买这套课程进行系统的学习了↓