位置: IT常识 - 正文

echarts:实现3D地图版块叠加动效散点+轮播高亮效果(echarts3d地图)

编辑:rootadmin
echarts:实现3D地图版块叠加动效散点+轮播高亮效果 需求描述

推荐整理分享echarts:实现3D地图版块叠加动效散点+轮播高亮效果(echarts3d地图),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:echarts 3d图,echart3d地图,echarts 3d,echart图表3d效果,echarts 3d,echarts 3d,echarts3d地图,echart3d地图,内容如对您有帮助,希望把文章链接给更多的朋友!

如下图所示,展示3D效果的地图版块,并叠加显示动效散点:

实现思路

首先是3D地图版块效果的实现,可以参考广州3D地图;而动效散点的实现,可以参考地图发散分布。 这里再提一个经过尝试并不行的思路:叠加用动图作为图标的散点图层,经过尝试,2D/3D地图的散点图层都无法加载动图图标 看起来只要在第一个示例的图层上叠加第二个示例的图层就可以啦!一般来讲,添加图层只要在图表配置项的series列表中增加一项即可,然鹅…

动效散点使用的是2D地理坐标系,只要引入echarts库即可使用,官网配置项文档:geo;而3D地图版块使用的是3D地理坐标系,在引入echarts库的基础上,还需要额外引用echarts-gl库,官网配置项文档:geo3D,而geo3D的series并不支持动效散点图层(effectScatter)。

echarts:实现3D地图版块叠加动效散点+轮播高亮效果(echarts3d地图)

Emm…其实也没有那么复杂,在配置项中既创建3D地理坐标系(用于显示3D地图版块),又创建2D地理坐标系(用于显示动效散点),并通过调整让它们尽量重叠就可以啦!(虽然说这种实现方式只能符合“静态美”,不能拖拽缩放地图…)

参考代码/* 在3D地图版块上叠加动效散点, 3D地图版块实现参考图表:https://www.isqqw.com/viewer?id=35999 2D地图动效散点参考图表:https://www.isqqw.com/viewer?id=36159 CSDN博客网址:https://blog.csdn.net/qq_36604536/article/details/128718064*/var mapJson = '/asset/get/areas_v3/city/440100_full.json'option = { backgroundColor: "#fff", geo: { // 2D地图坐标系 show: false, // 不显示地图,用于为动效散点提供2D地图坐标系 map: 'centerMap', roam: false, // 禁用缩放、拖拽 layoutCenter: ['50%', '47%'], // 地图中心位置 layoutSize: '90%', // 控制地图尺寸(地图的宽度和高度都会改变) aspectScale: 0.78, // 控制地图长宽比(此值越小地图越窄,越大地图越宽) zlevel: 1, }, geo3D: { // 3D地图坐标系 show: true, // 显示3D地图版块 map: "centerMap", top: "-20", regionHeight: 16, // 地图版块厚度 label: { show: true, borderRadius: 0, distanca: 0, textStyle: { fontSize: 14, color: "#C23531", // 地图初始化区域字体颜色 borderWidth: 1, borderColor: '#FFFF10', } }, itemStyle: { // 三维地理坐标系组件 中三维图形的视觉属性,包括颜色,透明度,描边等。 color: "rgba(252,85,49, 0.5)", // 地图板块的颜色 opacity: 1, // 图形的不透明度 [ default: 1 ] borderWidth: 2, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ] borderColor: "#FFF500", // 图形描边的颜色。[ default: #333 ] }, emphasis: { label: { show: true, color: "#fff000", }, itemStyle: { color: "#ff0", opacity: 0.5, }, }, light: { // 光照阴影 main: { color: "#FFFFFF", // 光照颜色 intensity: 2, // 光照强度 shadowQuality: "light", // 阴影亮度 shadow: true, // 是否显示阴影 alpha: 50, beta: 10, }, }, viewControl: { "projection": "perspective", "autoRotate": false, "distance": 208, // 控制地图版块的大小 "alpha": 72, // 地图版块垂直方向的角度 "beta": 2, // 地图版块水平方向的角度 rotateSensitivity: 0, // 禁用旋转 panSensitivity: 0, // 禁用平移 zoomSensitivity: 0, // 禁用缩放 }, zlevel: 2, }, series: [ { // 动效散点图层,使用2D地图坐标系 type: 'effectScatter', coordinateSystem: 'geo', zlevel: 3, rippleEffect: { //涟漪特效 period: 4, //动画时间,值越小速度越快 brushType: 'fill', //波纹绘制方式 stroke, fill scale: 10 //波纹圆环最大限制,值越大波纹越大 }, symbol: 'circle', symbolSize: function (val) { return (5 + val[2] * 5) / 150; //圆环大小 }, itemStyle: { normal: { show: true, color: '#F41C19' } }, data: [], }, ],}myChart.showLoading();$.getJSON(mapJson, function (geoJson) { echarts.registerMap('centerMap', geoJson); myChart.hideLoading(); var areaMapData = [ { name: '白云区', value: 500 }, { name: '南沙区', value: 300 }, { name: '增城区', value: 100 } ] var mapFeatures = echarts.getMap("centerMap").geoJson.features; var geoCoordMap = {}; mapFeatures.forEach(function (v) { // 地区名称 var name = v.properties.name; // 地区经纬度 geoCoordMap[name] = v.properties.center; }); var convertData = function (data) { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value) }); } } return res; }; // alert(JSON.stringify(convertData(areaMapData))); option.series[0].data = convertData(areaMapData); // 设置动效散点数据 myChart.setOption(option);});在线运行调试

isqqw-3D地图版块叠加动效散点

3D地图版块叠加动效散点plus

想要在原先图表的基础上增加这样几个需求:1、轮播高亮展示3D地图区域;2、高亮区域的散点颜色、动效、标签样式需要与非高亮区域不同。

分析

① 3D地图区域高亮:参考echarts高亮事件,发现API目前并不支持触发geo3D组件的高亮,但根据3D地图区域样式配置,可以通过在geo3D.regions中设置特定区域样式来实现“高亮”的效果。 ② 散点颜色、动效高亮:一个动效散点图层(series中的一个对象)只能支持一种动效,所以需要两个使用不同动效的散点图层,一个图层只显示非高亮的散点,另一个图层只显示高亮的散点;此外动效散点只能是一种颜色,在emphasis中设置高亮颜色,高亮效果只是在动效散点上叠加一个高亮颜色的圆点。 ③ 散点标签样式高亮:终于可以使用名副其实的“高亮”啦!通过设置label.normal和label.emphasis控制非高亮和高亮的标签样式,并触发相应点的高亮事件即可~

参考代码/* 在3D地图版块上叠加动效散点,并轮播高亮区域,高亮区域的散点动效、颜色、标签样式都需要改变 3D地图版块实现参考图表:https://www.isqqw.com/viewer?id=35999 2D地图动效散点参考图表:https://www.isqqw.com/viewer?id=36159 CSDN博客网址:https://blog.csdn.net/qq_36604536/article/details/128718064*/let mapJson = '/asset/get/areas_v3/city/440100_full.json';let effectScatterOpt = { // 动效散点公共配置项 silent: true, // 暂不支持鼠标交互 type: 'effectScatter', coordinateSystem: 'geo', // zlevel: 3, rippleEffect: { //涟漪特效 period: 5, //动画时间,值越小速度越快 // brushType: 'stroke', //波纹绘制方式 stroke, fill scale: 11 //波纹圆环最大限制,值越大波纹越大 }, symbol: 'circle', symbolSize: function(val) { return (5 + val[2] * 5) / 100; //圆环大小 }, label: { normal: { show: true, position: 'top', formatter: '{b}', fontSize: 16, color: "#C23531", backgroundColor: "rgba(255, 255, 255, 0.52)", borderRadius: 2, borderWidth: 1, borderColor: '#FFFF10', padding: [6, 4, 2, 4] }, emphasis: { borderColor: '#5FABFB', color: "#146FD7", }, }, itemStyle: { show: true, // color: '#F41C19' }, data: [],};let option = { backgroundColor: "#fff", geo: { // 2D地图坐标系 show: false, // 不显示地图,用于为动效散点提供地图坐标系 map: 'centerMap', roam: false, // 禁用缩放、拖拽 layoutCenter: ['50%', '47%'], // 地图中心位置 layoutSize: '90%', // 控制地图尺寸(地图的宽度和高度都会改变) aspectScale: 0.78, // 控制地图长宽比(此值越小地图越窄,越大地图越宽) zlevel: 1, }, geo3D: { // 3D地图坐标系 silent: true, // 暂不支持鼠标交互 show: true, // 显示3D地图版块 map: "centerMap", top: "-20", regionHeight: 16, // 地图版块厚度 label: { show: false }, itemStyle: { // 三维地理坐标系组件 中三维图形的视觉属性,包括颜色,透明度,描边等。 color: "rgba(252,85,49, 0.5)", // 地图板块的颜色 opacity: 1, // 图形的不透明度 [ default: 1 ] borderWidth: 2, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ] borderColor: "#FFF500", // 图形描边的颜色。[ default: #333 ] }, emphasis: { label: { show: false, }, itemStyle: { color: "#ff0", opacity: 0.5, }, }, light: { // 光照阴影 main: { color: "#FFFFFF", // 光照颜色 intensity: 2, // 光照强度 shadowQuality: "light", // 阴影亮度 shadow: true, // 是否显示阴影 alpha: 50, beta: 10, }, }, viewControl: { "projection": "perspective", "autoRotate": false, "distance": 208, // 控制地图版块的大小 "alpha": 72, // 地图版块垂直方向的角度 "beta": 2, // 地图版块水平方向的角度 rotateSensitivity: 0, // 禁用旋转 panSensitivity: 0, // 禁用平移 zoomSensitivity: 0, // 禁用缩放 }, zlevel: 2, }, series: [ // 动效散点图层,使用2D地图坐标系(通常状态,波纹形态为stroke) Object.assign({}, effectScatterOpt, { zlevel: 3, rippleEffect: { brushType: 'stroke' }, itemStyle: { color: "#F41C19" } }), // 动效散点图层,使用2D地图坐标系(高亮状态,波纹形态为fill) Object.assign({}, effectScatterOpt, { zlevel: 4, rippleEffect: { brushType: 'fill' }, itemStyle: { color: "#0062FF" } }), ],};myChart.showLoading();let mapFeatures = null; // 存储从json文件读取的区域数据let scatterData = []; // 散点测试数据const newRegionCenter = { // 手动修正区域的中心点坐标 "白云区": [ 113.322831, 23.292281 ], "黄埔区": [ 113.490761, 23.213239 ], "南沙区": [ 113.49738, 22.754531 ], "番禺区": [ 113.394619, 22.978582 ], "花都区": [ 113.241184, 23.46205 ], "增城区": [ 113.749579, 23.320497 ], "天河区": [ 113.365367, 23.18559 ], "海珠区": [ 113.312008, 23.108131 ], "越秀区": [ 113.270714, 23.163624 ], "荔湾区": [ 113.223038, 23.104943 ],}$.getJSON(mapJson, geoJson => { echarts.registerMap('centerMap', geoJson); myChart.hideLoading(); mapFeatures = echarts.getMap("centerMap").geoJson.features; mapFeatures.forEach(region => { let name = region.properties.name; let center = newRegionCenter[name] || region.properties.center; scatterData.push({ name, value: center.concat(Math.random() * 300 + 200) }) }); myChart.setOption(option); highlightNext();});let currentIdx = -1;function highlightNext() { if(currentIdx++ >= 0) { // 防止下标增加到超过区域数组长度 currentIdx %= mapFeatures.length; } highlightRegion(currentIdx) // 此处的currentIdx经过if判断,已经+1了 setTimeout(highlightNext, 1000);}function highlightRegion(index) { // 高亮地图区域,改变对应的散点样式 let regionName = mapFeatures[index].properties.name; // 高亮的区名 option.geo3D.regions = [ // 高亮3D地图对应的区块 { name: regionName, label: { show: false, }, itemStyle: { color: "#ff0", opacity: 0.5, } } ]; // 当前高亮区域有散点,需删除stroke动效中的该条数据并在fill动效中增加该条数据 option.series[0].data = scatterData.filter(item => item.name !== regionName); // stroke散点数据 option.series[1].data = scatterData.filter(item => item.name === regionName); // fill散点数据 myChart.setOption(option); myChart.dispatchAction({ // 触发散点高亮事件,改变标签样式 type: 'highlight', seriesIndex: 1, // series中的第二个图层(fill散点图层) // dataIndex: 0 // 高亮第一条数据,由于fill散点图层只有一条数据,这里可以不指定 });}3D地图版块叠加动效散点plus

由于这个示例相比没有动效的版本改动不少,所以另外新增了一个图表示例: isqqw-3D地图版块叠加动效散点plus (原本还想增加轮播同时支持鼠标交互的功能,改完再说吧~)

地图json数据下载

可以参考这篇博客:echarts map中如何获取所需要的json

比官网更丰富的echarts示例!

强烈推荐一个有非常丰富的echarts在线示例的网站:PPChart,但由于遭到DDOS攻击,PPChart服务不太稳定,大家也可以访问PPChart开发者推荐的另外两个站点:madeapie、isqqw,目前笔者关于echarts的博客代码都已在isqqw创建在线示例o^~^o

参考网址

[1] echarts高亮事件 [2] 3D地图区域样式配置 [3] echarts map中如何获取所需要的json

本文链接地址:https://www.jiuchutong.com/zhishi/283860.html 转载请保留说明!

上一篇:uniapp常见兼容性问题(uniapp多端兼容)

下一篇:白兰花的养殖方法与注意事项(白兰花的养殖方法和注意事项和病虫害)

  • iPhone11pro运行内存是多大(iphone11pro运行内存到底多少)

    iPhone11pro运行内存是多大(iphone11pro运行内存到底多少)

  • 微信如何群发消息(微信如何群发消息到各个群里)

    微信如何群发消息(微信如何群发消息到各个群里)

  • 魅族17有双扬声器吗(魅族17有双扬声器功能吗)

    魅族17有双扬声器吗(魅族17有双扬声器功能吗)

  • 电脑怎么压缩证件照(电脑压缩文件怎么整)

    电脑怎么压缩证件照(电脑压缩文件怎么整)

  • 京东多少天自动收货(京东多少天自动退货)

    京东多少天自动收货(京东多少天自动退货)

  • 手机突然不能语音输入(手机突然不能语音识别)

    手机突然不能语音输入(手机突然不能语音识别)

  • 钉钉能定位行动轨迹吗(钉钉能定位么)

    钉钉能定位行动轨迹吗(钉钉能定位么)

  • 新买的iphone11下载不了微信(苹果11刚买回来怎么下载软件)

    新买的iphone11下载不了微信(苹果11刚买回来怎么下载软件)

  • 微信怎么弄黑色(微信怎么弄黑色背景?)

    微信怎么弄黑色(微信怎么弄黑色背景?)

  • 怎么设置定时发朋友圈(怎么设置定时发送消息)

    怎么设置定时发朋友圈(怎么设置定时发送消息)

  • phone locked是什么意思(phone locked是什么意思 翻译)

    phone locked是什么意思(phone locked是什么意思 翻译)

  • word批量修改英文字体(word怎么批量替换英文)

    word批量修改英文字体(word怎么批量替换英文)

  • 抖音账号可以同时登录吗(抖音帐号在哪里找)

    抖音账号可以同时登录吗(抖音帐号在哪里找)

  • 快手怎么设置开播提醒(快手怎么设置开播)

    快手怎么设置开播提醒(快手怎么设置开播)

  • 下拉框怎么做叁金苹果(怎样做下拉选项框)

    下拉框怎么做叁金苹果(怎样做下拉选项框)

  • 如何使用拼多多免拼卡(如何使用拼多多钱包里的钱)

    如何使用拼多多免拼卡(如何使用拼多多钱包里的钱)

  • 淘宝人生怎么关闭(淘宝人生怎么关注别人)

    淘宝人生怎么关闭(淘宝人生怎么关注别人)

  • 支付宝收款怎么连接音响(支付宝收款怎么自动转入余额宝)

    支付宝收款怎么连接音响(支付宝收款怎么自动转入余额宝)

  • 微信怎么让附近的人搜到我(微信怎么让附近的人加我)

    微信怎么让附近的人搜到我(微信怎么让附近的人加我)

  • 定制开发小程序时应该注意哪些方面(定制开发小程序云鲸互创挺好)

    定制开发小程序时应该注意哪些方面(定制开发小程序云鲸互创挺好)

  • 华为coltl10是什么型号(华为coral10是什么型号手机)

    华为coltl10是什么型号(华为coral10是什么型号手机)

  • 华为p20屏幕上有个圈圈怎么关(华为p20屏幕上有图案怎么去除)

    华为p20屏幕上有个圈圈怎么关(华为p20屏幕上有图案怎么去除)

  • 华为灭屏显示自定义(华为灭屏显示自定义图案如何删除)

    华为灭屏显示自定义(华为灭屏显示自定义图案如何删除)

  • reminder.exe - reminder是什么进程 有什么用

    reminder.exe - reminder是什么进程 有什么用

  • 鸿蒙系统怎么设置下拉显示通知菜单?(鸿蒙系统怎么设置导航键)

    鸿蒙系统怎么设置下拉显示通知菜单?(鸿蒙系统怎么设置导航键)

  • ip6tables-save命令  保存ip6tables表配置

    ip6tables-save命令 保存ip6tables表配置

  • 综合税率的计算方法是什么
  • 注册税务师报名条件
  • 小规模在税务局开的专票已交税,如何在税务平台申报
  • 车间设备折旧费属于制造费用吗
  • 兼营和混合销售的联系
  • 合并资产负债表和合并利润表的区别
  • 税控盘交服务费
  • 个税退税是公司退还是个人退
  • 企业职工薪酬的个人所得税纳税筹划研究
  • 计提社保费计入什么科目
  • 在建投资性物业管理办法
  • 人力资源代缴社保合法吗
  • 销售货物并收取运费税率
  • 为什么要预提企业收入
  • 零申报的资产负债表不能为0
  • 税收滞纳金和税金滞纳金有什么区别
  • 开票资料上的电话可以是手机吗?
  • 买标书怎么做分录
  • 调整以前年度应付
  • 小规模纳税人计提增值税账务处理
  • 高新企业研发人员
  • 企业所得税免税政策
  • 购买机器设备配件账务处理
  • 公司车辆违章怎么办
  • 收到的投资属于什么科目
  • 快启动u盘怎么打开
  • 购买交易性金融资产时,支付的交易费用应计入
  • 发票认证平台上不去
  • 域名服务费属于什么会计科目
  • 房产税计税的税率可分为
  • PHP:JDToGregorian()的用法_日历函数
  • 附有销售退回条款的销售中,每一资产负债表日
  • 虚拟机是什么意思
  • 外籍个人取得的现金住房补贴所得免征个人所得税吗
  • 外贸企业进项发票能是外贸企业吗
  • 前端解决浏览器跨域问题
  • timit数据集
  • 老税号的发票还能认证吗
  • 增值税注明的价款是含税还是不含税
  • yolov3图像识别
  • python描述器有什么用
  • 分公司发生的业务,开票给总公司
  • 拆迁支出包括哪些
  • 出差自己开车去开会怎么报销交通费
  • MySQL中create table as 与like的区别分析
  • 劳务费发票是个人的吗
  • 收到以前年度退回的企业所得税怎么做账
  • 应付帐款不用付了的分录怎么处理
  • 委托代理进口账务处理
  • 拆迁补偿怎么算的
  • 搬迁赔偿款
  • 研发支出放在报表哪里
  • 办公室清洁费计入办公费吗
  • 投资回报怎么写
  • 兼职会计做什么工作
  • 房地产企业发行长期债券的增信方式有哪些
  • 工业企业预提费用怎么算
  • sql报错22018
  • sql server怎么改数据
  • sql时间用什么数据类型
  • Win10 Mobile/PC build 10586.589曝光:老机型有份
  • 太极越狱助手
  • OS X 10.10 Yosemite的新特性与iOS联系更紧密
  • 举例说明linux的主要应用领域
  • win10触屏操作
  • win10预览版21337
  • j-v测试
  • html上拉加载更多
  • bootstrap designer
  • 全部删除文件快捷键
  • 一次性批量随机抽取
  • 支付宝是怎么写
  • 详细解读了
  • 使用vue-cli快速搭建vue项目
  • 用nodejs做的项目
  • jquery-easyui-1.3.3
  • 21年小规模企业所得税税率
  • 税务筹划收费标准最新
  • 成都车辆购置税2024年新政策
  • 耕地占用税应该什么时候交
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设