利用 echarts 绘制江苏省的地图之三
文章目录
- 利用 echarts 绘制江苏省的地图之三
- 安装 与 引入
- 基础配置
- 绘制3层江苏省的地图来模拟3D效果
- 绘制最下面一层的地图
- 绘制中间一层的地图
- 绘制最上面的一层的地图，也是用来操作数据的一层地图
- 通过地级市的数据绘制3D图标
- 通过地级市的数据绘制波纹动效
- 通过地级市的数据绘制每个地级市的详细信息
利用 echarts 绘制江苏省的地图之三
这篇文章是采用 ecahrts@5.2.2 通过绘制3层地图，来模拟实现3D的地图效果，在和真实的3D效果相比，还是有些差距的。
那么如何实现 3层 地图层叠效果呢？其实 echarts 已经提供了 geo 地理坐标系组件，这个组件可以传递一个数组用来放置多个地图，然后通过调整每个地图层的大小和位置以及层级关系，就可以轻松实现3层层叠的地图效果。
安装 与 引入
$ npm install echarts
import * as from 'echarts' // echarts@5.2.2
基础配置
const options = {geo: [map_01, // 底层地图map_02, // 中间层地图map_03 // 上层地图],series: [series_01, // 波纹动效series_02, // 3d 图标series_03 // 展示信息]
}
绘制3层江苏省的地图来模拟3D效果
首先来说明一下绘制地图需要用到的 geo 的属性说明：
- map: 使用
registerMap注册的地图名称。 - z: 组件的所有图形的z值。控制图形的前后顺序。
z值小的图形会被z值大的图形覆盖。 - layoutCenter: 定义地图中心在屏幕中的位置
- layoutSize: 地图的大小。支持相对于屏幕宽高的百分比或者绝对的像素大小。
- roam: 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成
'scale'或者'move'。设置成true为都开启。 - silent: 图形是否不响应和触发鼠标事件，默认为
false，即响应和触发鼠标事件。 - itemStyle: 地图区域的多边形 图形样式。
- color: 图形的颜色。
- borderWidth: 描边线宽。为
0时无描边。 - borderColor: 图形的描边颜色。支持的颜色格式同
color，不支持回调函数。
- emphasis: 高亮状态下的多边形和标签样式。
- label: 地图上标签文本样式。
- show: 是否显示标签。
- itemStyle: 同
itemStyle。
- label: 地图上标签文本样式。
然后再说明一下绘制地图数据series相关的动效和数据相关的属性：
- tooltip: 本系列特定的
tooltip设定。- show: 是否显示提示框组件。
- type: 图形类型。
- coordinateSystem: 该系列使用的坐标系。
'cartesian2d': 使用二维的直角坐标系、'polar': 使用极坐标系、'geo': 使用地理坐标系。 - rippleEffect: 涟漪特效相关配置。
- scale: 动画中波纹的最大缩放比例。
- brushType: 波纹的绘制方式，可选
'stroke'和'fill'。
- showEffectOn: 配置何时显示特效。
- itemStyle: 图形样式。
- color: 图形的颜色。 默认从全局调色盘
option.color获取颜色。
- color: 图形的颜色。 默认从全局调色盘
- label: 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
- color: 文字的颜色。
- formatter: 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用
\n换行。
- symbol: 标记的图形。
- symbolSize: 标记的大小，可以设置成诸如
10这样单一的数字，也可以用数组分开表示宽和高，例如[20, 10]表示标记宽为20，高为10。 - symbolOffset: 标记相对于原本位置的偏移。
- data: 系列中的数据内容数组。数组项通常为具体的数据项。
- zlevel: 散点图所有图形的
zlevel值。 - z: 散点图组件的所有图形的
z值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。z相比zlevel优先级更低，而且不会创建新的Canvas。
绘制最下面一层的地图
const map_01 = {map: '江苏',z: 1,layoutCenter: ['49%', '51%'],layoutSize: '90%',roam: false,silent: true,itemStyle: {color: 'transparent', // 地图的颜色borderWidth: 1, // 分界线wdithborderColor: '#459bca', // 分界线颜色},emphasis: {label: {show: false},itemStyle: {color: 'transparent'}},
}
绘制中间一层的地图
const map_02 = {map: '江苏',z: 2,layoutCenter: ['49.5%', '50.5%'],layoutSize: '90%',roam: false,silent: true,itemStyle: {color: 'transparent',borderWidth: 1,borderColor: '#459bca',},emphasis: {label: {show: false},itemStyle: {color: 'transparent'}},
}
绘制最上面的一层的地图，也是用来操作数据的一层地图
const map_03 = {map: '江苏',z: 3,layoutCenter: ['50%', '50%'],layoutSize: '90%',show: true,roam: false,itemStyle: {color: 'rgb(5,101,123)',borderWidth: 0.5,borderColor: '#ffffff',borderJoin: 'round',borderCap: 'round',},label: {color: '#fff'},emphasis: {label: {color: '#fff'},itemStyle: {color: '#409EFF'}},regions: []
}
通过地级市的数据绘制3D图标
const series_01 = {tooltip: {show: false,},type: 'effectScatter',coordinateSystem: 'geo',rippleEffect: {scale: 10,brushType: 'stroke',},showEffectOn: 'render',itemStyle: {normal: {color: '#00FFFF',}},label: {normal: {color: '#fff',},},symbol: 'circle',symbolSize: [10, 5],data: convertData(data),zlevel: 1,
}
通过地级市的数据绘制波纹动效
const series_02 = {type: 'scatter',coordinateSystem: 'geo',itemStyle: {color: '#00FFF6',},symbol: 'image://' + icon_03,symbolSize: [32, 41],symbolOffset: [0, -20],z: 999,data: convertData(data),
}
通过地级市的数据绘制每个地级市的详细信息
const series_03 = {type: 'scatter',coordinateSystem: 'geo',label: {normal: {show: true,formatter: function(params) { var name = params.namevar value = params.value[2]var text = `{fline|${value}人}\n{tline|${name}}`return text;}, color:'#fff',rich: {fline: {padding: [0, 25],color: '#fff',fontSize: 14,fontWeight:400},tline: {padding: [0, 27],color: '#ABF8FF',fontSize: 12,},}},emphasis: {show: true}},itemStyle: {color: '#00FFF6',},symbol: 'image://' + icon_04,symbolSize: [100, 50],symbolOffset: [0, -60],z: 999,data: convertData(data),
}
利用 echarts 绘制江苏省的地图之三相关推荐
- 利用echart和echart-gl绘制江苏省的地图之一
文章目录 利用echart和echart-gl绘制江苏省的地图之一 1. 初始化配置 1.1 引入echarts.echarts-gl.江苏省的地图数据 1.2 初始化echarts的参数配置 1.2 ...
- vue+echarts实现江苏省疫情地图
vue+echarts实现江苏省疫情地图 文章目录 vue+echarts实现江苏省疫情地图 前言 一.使用步骤 1.引入库 2.代码数据 效果 前言 作为刚学习vue结合echarts写的案例,当前 ...
- echarts绘制上海市乡镇级地图
echarts绘制上海市乡镇级地图 echarts 最新版本不支持GeometryCollection,虽然有人在4年前就提了issue <!DOCTYPE html> <html ...
- VUE echarts绘制省级/市级地图自动轮循tooltip
效果图 绘制省级地图 1.安装echarts依赖,并在main.js中准备 import echarts from "echarts" Vue.prototype.$echarts ...
- echarts 绘制县级市地图 数据可视化
背景: 上头给了我一个使用兰溪市地图进行相关的数据可视化任务,我自然想到了以前用过的echarts,但使用过发现他自带的能实现的只到地级市(例如金华市),而县级市的区划暂时没法实现. 本文以兰溪市(县 ...
- 短租数据集分析--利用pyecharts绘制房源分布地图及单因子方差分析
文章目录 前言 一.绘制房源分布地图 1.导入基本模块 2.数据清洗 3.绘制房源分布地图 二.单因素方差分析 1.Entire home/apt 下地区对房租价格的影响 2.Private room ...
- react中使用ECharts绘制各省市地图
首先,安装对应依赖 npm install echarts --save 2.引入 import React from "react"; // 模块化样式表 import s fr ...
- vue中用echarts 绘制geo 中国地图
前言 由于5.X版本的echarts没有了map包,因此我先安装了5.1.1版本,再安装了4.9版本,并将4.9版本中的map包复制到了5.1.1版本里. 绘制效果如下: 1.省份根据数据值,展示不同 ...
- 地图如何适应 COVID-19 危机——利用 GIS 绘制飞钓地图
地图在危机时期的重要性 COVID-19 的爆发使整个世界陷入一片混乱,人们被迫呆在家中,许多人通过互联网来获取生活必需品,快递行业依靠地理空间技术来满足人们的日常需求.大多数互联网用户都依靠网络将所 ...
- echarts 绘制力导向地图
引入地图 import china from 'echarts/map/js/china' 配置项 var geoCoordMap = {'上海': [121, 30],'江苏': [118.78, ...
最新文章
- php图片发送另一台,phpcurl发送图片处理
- java-com-util-common-service：BaseService.java
- boot数据加解密 spring_springboot项目使用druid对数据库密码的加解密
- 撤销操作 —— Git 学习笔记 12
- barbuttonitem 文字换行_ios开发 常用代码整理
- TCP系列11—重传—1、TCP重传概述
- Oracle技术之串行隔离对延迟段和INTERVAL分区的支持
- HDU_2082 找单词 (生成函数)
- php字符串怎么判断是否相等,php判断两个字符串是否相等
- 火山安卓简单分组列表框
- 程序员应该知道的关于Windows API、CRT和STL二三事
- 解决Node.js中下包速度慢的问题
- 一个不能吃的中秋月饼
- C语言循环语句——while、for、do while
- 一位开发大神的“告别信”！
- js股票K线图，比较专业的K线图插件
- 安卓前端开发！移动APP开发框架盘点，附带学习经验
- 机器学习（MATLAB实现）——SVM支持向量机（一）
- 2. 输出2~100之间的素数
- matlab命令行清,如果需要清除MATLAB命令行窗口的以往输出结果，可以通过在命令行窗口中输入clear命令实现。 答案：错...