vue2+echarts实现地图效果

前言--用vue2结合echarts实现一个地图的效果。之前用echarts都是直接从官网上找示例然后复制粘贴,改改配置就直接用了,但是前段时间的大屏任务需要制作3D地图,由于没有示例并且内容比较繁琐在,所以自己还是摸索了一下如何制作。这一期先分享如何用vue和echarts实现一个地图,最终效果图如下

大家有需要源码的可以去Gitee上面下载,后续会持续更新实现3D效果。

gitee.com/guoJunJia/v...

老样子,按照惯例,去官网找示例,但是地图的示例很粗糙 ,所以这里就一步一步的来构建自己的基础地图。

首先肯定就是基础部分,先创建一个容器,来容纳我们的地图

<div ref="chart" style="width:900px;height:600px; " />

接着就是将我们自己的容器初始化成为一个echarts的容器,这样才能在容器中显示echarts图表。这里我们需要使用echarts库提供的一些实例和方法。使用前需要下载echarts库

npm install echarts --save

kotlin 复制代码
import * as echarts from 'echarts';

// 在mounted函数中书写
const myChart = echarts.init(this.$refs.chart);

在书写具体代码之前,我们需要自己准备一个地图的JSON文件,为构建想要的地图做准备。这里给大家提供一个链接,可以去下载各市区的JSON文件。当然如果自己有其他好的途径也可以,JSON文件都大差不大。

hxkj.vip/demo/echart...

这里我以荆州的JSON为例来构建地图。获取到的JSON文件保存下来,使用的时候必须使用echarts的registerMap方法进行注册,否则是不能用的。传入两个参数,第一个是你后续在配置项中给map 的名称,第二个是你的JSON文件。

javascript 复制代码
import jingzhouMap from "./jingzhouMap.json";


// 在mounted函数中书写
echarts.registerMap("jingzhouMap", jingzhouMap);

echarts中最重要的就是书写配置项,他的官方文档中也有配置项的详细内容和使用场景,这里我就不一一赘述,我只描述一些关键的配置项,代码中相应的也会有注释说明。

itemStyle配置的是每一个区域块的样式,这也是我们主要需要配置的一项,在里面可以设置地图的颜色、边框、文字等等内容。其中分为主要分为normal和emphasis两个对象,前者就是基本的设置,对所有的区域快都有效,emphasis则是当鼠标移入某个地图块后会对其进行高亮显示,用于设置高亮的特殊样式。

go 复制代码
    // 设置初始化的地图样式
    // 在mounted函数中书写
      const option = {
        series: [
          {
            type: "map",       // 设置图表类型为地图
            map: "jingzhouMap",     // 地图要加载的JSON文件
            zoom: 1.32,        // 地图缩放大小,这个根据自己需求,默认是1,不缩放
            layoutCenter: ["50%", "46%"],   //  定义地图中心在屏幕中的位置
            // 如果宽高比大于 1 则宽度为 100,如果小于 1 则高度为 100,保证了不超过 100x100 的区域
            layoutSize: 650,
            aspectScale: 0.9, // 长宽比
            roam: false,
            itemStyle: {       // 这里就是设置item 的样式,也就是地图中每个区块的样式(区块就是JSON文件中包含经纬度信息的对象,获取的地图JSON文件中应该有一个数组,其中的每一个对象就对应一个区块)
              normal: {        // 区块的基本样式
                borderColor: "#41b8ff",   // 区块的边界(边框)颜色
                borderWidth: 3,           // 区块的边界(边框)宽度
              },
              emphasis: {         // 区块高亮时的样式(鼠标移入的时候可以选中进行高亮显示)
                borderColor: "#fff",
                shadowBlur: 10,   // 模糊度
                shadowColor: "rgba(0,255,244,0.6)",  // 模糊阴影的颜色
                borderWidth: 4,
                color: "#41b8ff",    // 鼠标选择区域颜色
              },
            },
          },
        ],
      };

配置好option之后,使用echarts实例上的setOption方法即可将我们写的配置传入到echarts容器中

ini 复制代码
myChart.setOption(option);

那么到目前为止,基本的地图就已经制作完成了,只是它看起来很粗糙丑陋,接下来要做的就是对我们的地图进行样式的优化。需要注意的是,echarts是不支持CSS修改样式的,想要修改样式只能通过添加或者修改配置项来实现。

例如修改地图的颜色,我们可以在itemStyle的normal中配置areaColor选项,可以直接设置颜色,如

css 复制代码
normal: {
     areaColor: "blue",
},

这样可以很方便的去改变地图的颜色,但是展现的效果不美观,也不能很好的展示地图的纹理,所以这里推荐使用第二种,传入图片作为地图的背景色,但是需要注意的是,不能直接给图片的地址,而是要传入一个DOM元素才行,否则会出错不显示。以下是官网上面关于纹理填充的说明。

底图可以从我的项目中直接获取使用,也可以自己去寻找自己觉得好看的底图。同样为了修改高亮的样式,我也在emphasis中设置了纹理图片。整体效果如下。

接下来,我们来给每个区块地图显示地名,让地图看起来不那么单调,这里我们需要使用的配置的是label属性。label的本意就是标签的意思,与原生是一个行内元素,所以我们在设置的时候不能设置宽高,并且里面只能放置文字,其包含的属性大多也都是设置文字样式的,如字体大小fontSize、字体颜色color等。

例如我们可以在normal中添加以下代码,来设置label的样式,这样在我们的地图中就能显示地名信息

dart 复制代码
label: {
     show: true,     // 是否显示label
     fontSize: 14,   // 字体大小
     color: "#fff",  // 字体颜色
},

效果如下

那么,我们如果想给label设置背景色并且设置宽高要怎么实现呢?前面说过label是行内元素,不能设置宽高,所以我们直接设置是不行的,所以就要使用其他的方法。echarts为了满足开发者的需求,提供了formatter(标签内容格式器)和rich(富文本标签)来让开发者实现更多的效果。

formatter支持字符串模板和回调函数两种形式,不管是哪种形式,都可以使用"\n"进行换行。如果是模板字符串,一共有三个变量{a},{b},{c}。其中{a}:系列名。{b}:数据名。{c}:数据值。可以直接用来展示,例如这里是显示地名。那么就是使用变量{b},有其他显示需求的可以自己根据三个变量进行自定义。

formatter: "{b}",

formatter只能提供数据层面的操作,比如数据的重建、组合等等,想要更加炫酷的样式就要结合rich来使用。可以通过在rich中书写对象,通过给对象书写样式来使用。使用rich才可以给label设置宽高等样式,否则是不行的。rich可以相当于是一个具有条件选择的富文本标签,可以通过选择想要的对象来使用对象中的属性。

使用rich的时候,formatter中就要使用回调函数,该函数自带的参数就是当前区域块的信息

formatter: function (params) { console.log(params) }

在控制台打印结果如下

可以看到参数params中包含了很多信息,其中name就是我们要展示的label文字,我们就可以通过return来返回params.name达到显示label的效果

javascript 复制代码
formatter: function (params) {
         const areaname = params.name;
         return `${areaname}`;
},

结合rich使用,就可以给label设置更多的样式,需要注意的是,在书写属性的时候不能使用连字符 '-' ,要使用小驼峰的命名方式,否则会报错,如font-size应写为fontSize。rich中的基本写法如下

less 复制代码
 label: {
     show: true, // 是否显示label
     fontSize: 14, // 字体大小
     color: "#fff", // 字体颜色
     formatter: function (params) {
         const areaname = params.name;
         return `{a|${areaname}}`; // |前代表选择的rich项,后面代表要展示的部分
     },
     rich: {
         a: {     // a代表就是分类,通过在formatter中进行选择,就代表使用a对象下的属性
              color: "#fff",
              padding: 8,
              width: 35,
              height: 8,
              fontSize: 14,
              fontWeight: "normal",
              fontFamily: "Adobe Heiti Std",
              position: "left",
              backgroundColor: "#ccc",
            },
         b: {     
              color: "red",
              padding: 8,
              width: 35,
              height: 8,
              fontSize: 14,
              fontWeight: "normal",
              fontFamily: "Adobe Heiti Std",
              position: "left",
              backgroundColor: "blue",
            },
      },
},

在formatter和rich的组合中,rich提供了一系列的可选项,可选项的名称可以自己定义(如以上代码的a,b)formatter在使用的时候,返回的时候可以选择系列,使用|进行分配系列,当然也可以在返回值中有多个系列去控制不同属性的样式。如

javascript 复制代码
formatter: function (params) {
      const areaname = params.name;
      const index = params.dataIndex;
      return `{a|${areaname}}{b|${index}}`; 
},

和areaColor一样,label的背景色backgroundColor也可以设置为图片,只是这里的图片不需要是个DOM元素,只要填入图片的路径即可,书写规范如下

backgroundColor: { image: '这里书写你的图片路径' },

同样我们也可以在emphasis中书写label的配置项,给高亮选择的区块设置不同的样式,来满足不同的功能需求。

最后,给整个页面添加一个背景色,让我们的地图看起来更加的美观,整体的地图效果如下:

相关推荐
zhougl99640 分钟前
html处理Base文件流
linux·前端·html
花花鱼44 分钟前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_1 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo2 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之4 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端4 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡4 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木5 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!5 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷6 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript