使用 ECharts 实现仿 3D 地图效果的技术方案
本文介绍如何利用 ECharts 实现仿 3D 地图视觉效果。通过配置 series-map 的 itemStyle，利用 borderWidth 增加边框宽度，并结合线性渐变（linear gradient）设置边框与区域颜色，从而增强地图的立体层次感。文章详细解析了渐变坐标参数及 global 属性的作用，提供了从环境配置到具体代码实现的全流程指导。
项目初始化
项目的环境配置：
"echarts": "^4.9.0",
"vue": "^2.6.10",首先创建一个 container 容器，采用绝对定位，宽度和高度均设置为 100%，使背景图片铺满整个屏幕。
//html
<div class="container"></div>
//css
.container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(../../assets/image/bg.png);
background-size: 100% 100%;
color: #fff;
}随后添加标题，设计稿尺寸为 1920*1080，字体选用庞门正道，通过绝对定位实现居中显示。
//html
<div class="title">x x市x x x x 智慧平台</div>
//css
.title {
position: absolute;
top: 10px;
left: 660px;
font-size: 55px;
font-family: "PangMenZhengDao";
font-weight: 400;
font-style: italic;
color: #fff;
text-shadow: 0px 3px 8px rgba(3, 71, 138, 0.75);
}echarts仿3d地图
为提高开发效率，此处不逐一手写配置项，而是基于现有示例进行修改。
更换自己的json
获取方法，从高德地图选择器中直接复制JSON API 即可，网址链接
让地图更有立体感 首先看下面两组图片，第一个是我们要修改的例子立体感不明显，我们大概要做成图二的一个效果，有人要问了为什么不使用echarts-gl,首先他的侧边不能做出多个层次的感觉，其次他的纹理贴图也是诡异的，图片不能铺满并且还是倒立的，我设计的图片宽高都是2的N次方，白白花费好几个小时，果然放弃了。
接下来给边框增加宽度和更换颜色：
语法：series-map.itemStyle. borderWidth描边线宽。为 0 时无描边，我利用这个使线边宽度增加，让地图更有层次感，看代码：
itemStyle: {
normal: {
borderWidth: 6,
borderColor: "rgba(29, 111, 165,1)",
shadowColor: "rgba(29, 111, 165,0.5)",
shadowOffsetY: 15,
shadowBlur: 8,
areaColor: "rgba(5,21,35,0.1)",
},
},上面的重影以此类推，这里要注意的是渐变的处理方法 type是linear，线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 true，则该四个值是绝对的像素位置，当x:0,y:0,x2:0,y2:1是从上向下；当x:0,y:1,x2:0,y2:0是从下向上，当x:1,y:0,x2:0,y2:0是从右向左；当x:1,y:0,x2:1,y2:0是从左向右
borderColor: {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: "#20a2e1", // 0% 处的颜色
},
{
offset: 0.8,
color: "#085473", // 80% 处的颜色
},
{
offset: 1,
color: "#054660", // 100% 处的颜色
},
],
},最后效果：
最后地图表面做个渐变的效果，因为下面global: true所以这里x=1200指的是像素的位置，不要搞混了
areaColor: {
type: "linear",
x: 1200,
y: 0,
x2: 0,
y2: 0,
colorStops: [
{
offset: 0,
color: "#17498d", // 0% 处的颜色
},
{
offset: 1,
color: "#3a95fd", // 50% 处的颜色
},
],
global: true, // 缺省为 false
},完成初稿图：
总结
到此这篇关于如何只用echarts做个仿3d地图功能的文章就介绍到这了,更多相关echarts仿3d地图内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！
JS脚本在App中运行报错怎么解决
2026-11-04 23:11:03
JS怎么使用padStart方法给数字补零
2026-11-04 11:12:03
JS是什么意思？JavaScript全称及基本定义
2026-11-04 08:05:29
JS 使用 toFixed(1) 保留一位小数的基本用法与注意事项
2026-11-03 18:34:57
JS字符串转整数：parseInt与Number的区别及用法
2026-11-03 17:26:54