脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → echarts仿3d地图

如何只用echarts做个仿3d地图功能

 更新时间：2022年09月22日 10:32:48   作者：前端宋权武  
由于业务需求,需要绘制3d地图,所以下面这篇文章主要给大家介绍了关于如何只用echarts做个仿3d地图功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

项目初始化

项目的环境配置：

"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地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • checkbox全选所涉及到的知识点介绍

    checkbox全选所涉及到的知识点介绍

    checkbox全选涉及到的知识点比如IE里起作用，火狐不起作用，getElementById()与getElementsByName()的区别等等
    2013-12-12
  • Typescript的三种运行方式(小结)

    Typescript的三种运行方式(小结)

    这篇文章主要介绍了Typescript的三种运行方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • ES6新特性之函数的扩展实例详解

    ES6新特性之函数的扩展实例详解

    这篇文章主要介绍了ES6新特性之函数的扩展,实例形式较为详细的分析了ES6针对函数参数、运算符及相关新特性的扩展操作与注意事项,需要的朋友可以参考下
    2017-04-04
  • javascript实现label标签跳出循环操作

    javascript实现label标签跳出循环操作

    这篇文章主要为大家详细介绍了javascript实现label标签跳出循环操作，感兴趣的朋友可以参考一下
    2016-03-03
  • 使用Echarts绘制一个多组折线图

    使用Echarts绘制一个多组折线图

    这篇文章主要给大家介绍了关于使用Echarts绘制一个多组折线图的相关资料,Echarts是一个功能强大的可视化库,可以用来绘制各种类型的图表,包括多组折线图,需要的朋友可以参考下
    2023-09-09
  • Bootstrap零基础入门教程(二)

    Bootstrap零基础入门教程(二)

    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。这篇文章主要介绍了Bootstrap零基础入门教程(二) 的相关资料，非常不错，具有参考借鉴价值，感兴趣的朋友一起看下吧
    2016-07-07
  • 浅析创建javascript对象的方法

    浅析创建javascript对象的方法

    下面小编就为大家带来一篇浅析创建javascript对象的方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • javascript简单写的判断电话号码实例

    javascript简单写的判断电话号码实例

    这篇文章主要介绍了javascript简单写的判断电话号码实例的相关资料,需要的朋友可以参考下
    2017-05-05
  • js模仿php中strtotime()与date()函数实现方法

    js模仿php中strtotime()与date()函数实现方法

    这篇文章主要介绍了js模仿php中strtotime()与date()函数实现方法,涉及javascript时间操作的相关技巧,非常具有实用价值,需要的朋友可以参考下
    2015-08-08
  • JavaScript中附件预览功能实现详解（推荐）

    JavaScript中附件预览功能实现详解（推荐）

    这篇文章主要介绍了JavaScript中附件预览功能的实现,具体操作步骤大家可查看下文详细讲解,感兴趣的小伙伴们可以参考一下。
    2017-08-08

最新评论