利用echart和echart-gl绘制江苏省的地图之二
2024-05-18 02:05:13
文章目录
- 利用echart和echart-gl绘制江苏省的地图之二
- 1 使用 echarts@4.9.0 和 echarts-gl@1.0.1 绘制江苏省地图
- 1.1 这里采用 cdn 的方式全局引入
- 1.2 参数配置
- 1.2.1 首先造一些地图上的假数据
- 1.2.2 使用三维的地理坐标系组件绘制3D地图
- 1.2.3 组合配置参数
- 1.3 绘制3D地图
- 1.3.1 初始化画布
- 1.3.2 声明3D地图进入效果
- 1.3.3 处理地级市数据上的图片的位置
- 1.3.4 首次进入实现3D地图效果
- 1.3.5 点击地级市区域触发地图
- 1.4 设置南京市的地图
- 1.4.1 在南京是地图上设置具体的电厂的位置
- 2. 存在的问题
利用echart和echart-gl绘制江苏省的地图之二
上一篇讲述了如何使用 echarts@5.2.2 和 echarts-gl@2.0.8 绘制江苏省的3D地图和绘制中存在的问题，而这篇文章将要讲述的是使用 echarts@4.9.0 和 echarts-gl@1.0.1 绘制江苏省的3D地图和绘制中存在的问题。
下面先看一下3D效果图：
1 使用 echarts@4.9.0 和 echarts-gl@1.0.1 绘制江苏省地图
这里之所使用 echarts@4.9.0 和 echarts-gl@1.0.1 绘制江苏省的3D地图，原因是：
echarts高版本不支持更改geo3D中每个地级市的文本样式。echarts高版本不支持geo3D中每个地级市区域的click事件。
1.1 这里采用 cdn 的方式全局引入
<script src="https://cdn.jsdelivr.net/npm/echarts@4.9.0/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl@1.0.1/dist/echarts-gl.min.js"></script>
当然你也可以使用
$ npm install echarts@4.9.0 echarts-gl@1.0.1
的方式安装后使用
import * as echarts from 'echarts'
import 'echarts-gl'
的方式在模块中引入。
1.2 参数配置
这里的参数配置和 第一篇文章的配置如出一辙，不同的是，这次的配置中添加了环境贴图效果和地级市 click事件触发的效果。
1.2.1 首先造一些地图上的假数据
// 每个地级市地图上的值
const data = [{ name: '南京市', value: 3802 },{ name: '无锡市', value: 3802 },{ name: '徐州市', value: 3412 },{ name: '常州市', value: 3421 },{ name: '苏州市', value: 3802 },{ name: '南通市', value: 3432 },{ name: '连云港市', value: 3512 },{ name: '淮安市', value: 3802 },{ name: '盐城市', value: 3802 },{ name: '扬州市', value: 3802 },{ name: '镇江市', value: 3802 },{ name: '泰州市', value: 3612 },{ name: '宿迁市', value: 3802 },
]
// 每个地级市的省会经纬度坐标
const gdGeoCoordMap = {"南京市": [118.767413,32.041544],"无锡市": [120.301663,31.574729],"徐州市": [117.184811,34.261792],"常州市": [119.946973,31.772752],"苏州市": [120.619585,31.299379],"南通市": [120.864608,32.016212],"连云港市": [119.178821,34.600018],"淮安市": [119.021265,33.597506],"盐城市": [120.139998,33.377631],"扬州市": [119.421003,32.393159],"镇江市": [119.452753,32.204402],"泰州市": [119.915176,32.484882],"宿迁市": [118.275162,33.963008],
}
// 将地级市的经纬度和具体的值结合处理成echarts可以接收的格式
const convertData = function(data) {var res = []for (var i = 0; i < data.length; i++) {var geoCoord = gdGeoCoordMap[data[i].name]if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value)})}}return res
}
1.2.2 使用三维的地理坐标系组件绘制3D地图
const geo3D = {map: '江苏', // 地图类型。boxDepth: 80, // 三维地理坐标系组件在三维场景中的深度regionHeight: 2, // 三维地图每个区域的高度// 用于鼠标的旋转，缩放等视角控制viewControl: {autoRotate: false, // 是否开启视角绕物体的自动旋转查看rotateSensitivity: 0, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。zoomSensitivity: 0, // 缩放操作的灵敏度，值越大越灵敏。panSensitivity: 0, // 平移操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的平移灵敏度alpha: 90, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。beta: 0, // 视角绕 y 轴，即左右旋转的角度。maxBeta: 45, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。},// 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等itemStyle: {opacity: 1,color: 'rgb(5,101,123)', // 地图颜色borderWidth: 1, // 分界线wdithborderColor: '#459bca', // 分界线颜色},// 鼠标 hover 高亮时图形和标签的样式。emphasis: {label: {show: false, // 是否显示高亮},itemStyle: {color: '#0489d6' // 地图高亮颜色}},// 光照相关的设置。light: {// 场景主光源的设置main: {color: '#fff', // 主光源的颜色intensity: 1.5, // 主光源的强度shadow: true, // 主光源是否投射阴影shadowQuality: 'high', // 阴影的质量// alpha: 55, // 主光源绕 x 轴，即上下旋转的角度// beta: 4, // 主光源绕 y 轴，即左右旋转的角度},// 全局的环境光设置ambient: {color: '#fff', // 环境光的颜色intensity: 2 // 环境光的强度},ambientCubemap: {diffuseIntensity: 2, // 漫反射的强度specularIntensity: 2, // 高光反射的强度}},
}
1.2.3 组合配置参数
const options = {geo3D
}
1.3 绘制3D地图
1.3.1 初始化画布
// 初始化画布
const echart = echarts.init(document.getElementById('echarts'), {width: document.documentElement.clientWidth,height: document.documentElement.clientHeight
})// 注册江苏省数据
echarts.registerMap('江苏', jiangsu)// 绘制3D地图
echart.setOption(options)
1.3.2 声明3D地图进入效果
首次进入，首先是一个平面图，紧接着反转 90 度，成一个有深度的3D地图
function setMap3DBoxDepth(success) {let count = 90let timer = setInterval(() => {if (count <= 40) {clearInterval(timer)success()} else {count = count - 10echart.setOption({series: [{viewControl: {alpha: count}}]})}}, 30)
}
1.3.3 处理地级市数据上的图片的位置
为什么要配置图片在地图上的位置呢？因为 echarts-gl 中无法设置 3D 的形状和彩色图片。这里使用生成 img 元素通过定位的方式在指定的位置放置图标。而此处的位置是采用鼠标的横纵坐标位置来设置的。
function setImagesPosition(data = []) {data = [{ name: '南京市', value: [628, 416, 1] },{ name: '苏州市', value: [919, 485, 0] }]for (let i = 0; i < data.length; i++) {const { value: [x,y,flag] } = data[i]const img = document.createElement('img')img.setAttribute('src', flag ? icon_01 : icon_02)img.setAttribute('style', `position: absolute;left: ${x}px;top: ${y}px;transform: translate(-50%, -50%) scale(0.6);pointer-events: none;`)document.getElementById('echarts').appendChild(img)}
}
1.3.4 首次进入实现3D地图效果
// 获取环境贴图的HTML元素
const mapBgImg = document.getElementById('map-bg')// 平面转换为倾斜
setMap3DBoxDepth(() => {echart.setOption({series: [{shading: 'realistic',realisticMaterial: {// 材质细节的纹理贴图，参数只有三种格式：string、HTMLImageElement、HTMLCanvasElementdetailTexture: mapBgImg},itemStyle: {borderColor: '#fff'}}]})setImagesPosition()
})
1.3.5 点击地级市区域触发地图
echart.on('click', (params) => {const { seriesType, name, event: { event: {x,y} } } = paramsconsole.log(['echart', name, x, y])if (seriesType === 'map3D' && name === '南京市') {console.log(name)this.is_show_dialog_city = true// 设置电厂的位置setFactoryPosition()}
})
1.4 设置南京市的地图
<div id="dialog-box"><div class="dialog-close">×</div><div id="dialog-warpper"></div>
</div>
1.4.1 在南京是地图上设置具体的电厂的位置
function setFactoryPosition(data = []) {data = [{ x: 429, y: 92, name: '南京华润' },{ x: 452, y: 288, name: '大唐南京' }]for (let i = 0; i < data.length; i++) {const { x, y, name } = data[i]const box = document.createElement('div')const title = document.createElement('div')const img = document.createElement('img')box.setAttribute('class', 'factory-warpper')box.setAttribute('style', `left: ${x}px;top: ${y}px;`)title.setAttribute('class', 'factory-title')title.innerText = nameimg.setAttribute('src', icon_01)img.setAttribute('class', 'factory-icon')box.appendChild(title)box.appendChild(img)document.getElementById('dialog-warpper').appendChild(box)}
}
2. 存在的问题
echarts@4.9.0和echarts-gl@1.0.1绘制3D无法设置3D图标。- 通过 鼠标的横纵坐标位置并使用 img 图片在3D地图上设置具体的图标的位置，非常的麻烦，需要计算画布的大小，和画布与img图标的相对位置。
- 3D 地图边角不支持圆滑的边框效果。
- 3D 环境贴图只有在最后一步设置，否则会失效，所以就出现了另一种问题，首次进入前3D地图没有贴图效果。
利用echart和echart-gl绘制江苏省的地图之二相关推荐
- 利用echart和echart-gl绘制江苏省的地图之一
文章目录 利用echart和echart-gl绘制江苏省的地图之一 1. 初始化配置 1.1 引入echarts.echarts-gl.江苏省的地图数据 1.2 初始化echarts的参数配置 1.2 ...
- python气象数据可视化学习笔记6——利用python地图库cnmaps绘制地图填色图并白化
文章目录 1. 效果图 2. cnmaps简介及安装 2.1 写在前面 2.2 cnmaps简介和安装 3. 导入库 4. 定义绘图函数 4.1 使用get_adm_maps返回地图边界 4.2 ax ...
- 用python画玫瑰花教程-利用Python的turtle库绘制玫瑰教程
用Python的turtle库绘图是很简单的,闲来无事就画了一个玫瑰花,下面奉上源码.... 源码: ''' Created on Nov 18, 2017 @author: QiZhao ''' i ...
- android地图路径绘制,android：利用svg的path路径+canvas 开发自定义地图控件
需求:做小型地图的一个显示功能 实现思路:自定义view解析对应的svg文件,在利用canvas的画笔画出相应的地图线条.各个线条围成的区域可以表示成各个元素比如树,街道,路灯,汽车等等一切事物.然后 ...
- php代码输出笑脸,利用HTML5中的Canvas绘制笑脸的代码
这篇文章主要介绍了利用HTML5中的Canvas绘制一张笑脸的教程,使用Canvas进行绘图是HTML5中的基本功能,需要的朋友可以参考下 今天,你将学习一项称为Canvas(画布)的web技术,以及 ...
- 利用Python快速绘制海报级别地图
利用Python快速绘制海报级别地图 1.简介 2.利用prettymaps快速制作海报级地图 2.1 prettymaps的几种使用方式 2.1.1 圆形模式 2.1.2 圆角矩形模式 2.1.3 ...
- 霍兰德人格分析：利用Python第三方库matplotlib绘制雷达图
美国约翰霍普金斯大学霍兰德教授认为,个人职业兴趣特性与职业之间应有一种内在的对应关系.根据兴趣的不同,人格可分为研究型(I).艺术型(A).社会型(S).企业型(E).传统型(C).现实型(R)六个维 ...
- 利用基于注意力的神经网络绘制化学反应空间图谱
<Mapping the Space of Chemical Reactions Using Attention-Based Neural Networks> 利用基于注意力的神经网络绘制 ...
- 利用思维导图软件绘制鱼骨图怎样做
思维导图的类型有哪些? 圆圈图 主要用于把一个主题展开来,联想或描述细节.小圈圈是主题,而外面的大圈圈里放的是和这个主题有关的细节或特征 气泡图 由很多泡泡组成,中间一个主题泡泡描述核心主题,周围的属 ...
- Unity关于GL绘制和Gizmos绘制的Matrix问题。
不管是在GL下绘图还是在Gizmos下绘制,使用世界坐标确定点的位置很多时候是很麻烦的,通常使用物体自身的坐标会比较简单,但是GL和Gizmos都是针对世界坐标绘制,这就需要把自身坐标转换成世界坐标. ...
最新文章
- django admin组件
- php中储存数据类型,PHP中的数据类型
- Sqlserver：谈索引优化需要注意的几个方面
- 大表与大表join数据倾斜_技术分享|大数据技术初探之Spark数据倾斜调优
- 【XCTF 攻防世界 web 练习详解系列（二）】【get_post的两种解法】
- Redis的N种妙用，不仅仅是缓存
- 双数组trie树的基本构造及简单优化
- 语法糖----C#的async和await
- linux 查看进程启动路径
- “完美”解决微信小程序购物车抛物动画，在连续点击时出现计算错误问题，定时器停不下来。
- 两个可用的ntp服务器地址
- 解决Eclipse中文乱码的问题
- adb 驱动安装说明文档
- KiCad快速修改PCB线宽
- Gym - 100886F 2015-2016 Petrozavodsk Winter Training Camp, Saratov SU Contest F - Empty Vessels
- 华硕FL8000U拆换机械硬盘
- 2022-2027年中国股权众筹行业市场调研及未来发展趋势预测报告
- c+primer 学习笔记 6
- SAP中QM和MM在质检流程应用中的区别应用问题实例
- hive用temporary table替换with