devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

echarts+echarts-gl vue2制作3D地图+下钻功能+标记点功能，解决dblclick事件失效问题，解决地图下钻后边框不更新保留问题_echarts-gl安装

作者：weixin_40725706 | 2024-02-15 08:54:24

赞

踩

echarts-gl安装

目录

先看实现效果：​编辑

步骤一

安装echarts和echarts-gl

步骤二 

设置地图容器

在methods中设置初始化地图方法并在mounted中调用

在methods中设置初始化地图方法

在mounted中调用

打开页面效果：​编辑

 步骤三

1、给地图添加双击事件dblclick

但是也出现了一个问题，和我们预想的不太一样，下钻到省地图后，china地图的边框数据保留了，即：地图边框并没有更新，如图：​编辑

解决方案一：

解决方案二：

步骤四

 扩展：

最后附上完整代码：

先看实现效果：

步骤一

安装echarts和echarts-gl

  1. npm install echarts --save //echarts安装命令
  2. npm install echarts-gl //echarts-gl安装命令

 引入：

  1. import * as echarts from 'echarts';
  2. import 'echarts-gl'

步骤二 

设置地图容器

  1. <div id="mapBox" class="mapBox">
  2.  
  3. 				</div>

注意：地图容器必须设置宽高

在methods中设置初始化地图方法并在mounted中调用

在methods中设置初始化地图方法

  1. setMap3D(chinaJson) {
  2. 				// 引入地图边界json数据
  3. 				this.chinaJson =chinaJson?chinaJson:require('@/assets/json/china.json')
  4. 				// 获取地图容器
  5. 				var chartDom = document.getElementById('mapBox');
  6. 				var myChart = echarts.init(chartDom);
  7. 				// 注册地图
  8. 				echarts.registerMap("china", this.chinaJson)
  9. 				let dataObj = ''
  10. 				var option;
  11. 				option = {
  12. 					// title: {
  13. 					// 	text: '全国行政区划3D地图',
  14. 					// 	x: 'center',
  15. 					// 	top: "20",
  16. 					// 	textStyle: {
  17. 					// 		color: '#000',
  18. 					// 		fontSize: 24
  19. 					// 	}
  20. 					// },
  21. 					tooltip: {
  22. 						show: true,
  23. 					},
  24. 					geo3D: {
  25. 						map: 'china',
  26. 						roam: true,
  27. 						regionHeight: 4, //地图厚度
  28. 						itemStyle: {
  29. 							color: '#326a9a',
  30. 							opacity: 0.8,
  31. 							borderWidth: 0.8,
  32. 							borderColor: '#c3d7de'
  33. 						},
  34. 						label: {
  35. 							show: false,
  36. 						},
  37. 						emphasis: { //当鼠标放上去  地区区域是否显示名称
  38. 							disabled: true, //是否可以被选中
  39. 							label: {
  40. 								formatter: function(params) { // 鼠标经过的回调函数  
  41. 									// console.log('hover', params)
  42. 									dataObj = params;
  43. 									return params.name
  44. 								},
  45. 							},
  46. 						},
  47. 						//shading: 'lambert',
  48. 						light: { //光照阴影
  49. 							main: {
  50. 								color: '#fff', //光照颜色
  51. 								intensity: 1.2, //光照强度
  52. 								// shadowQuality: 'high', //阴影亮度
  53. 								shadow: false, //是否显示阴影
  54. 								alpha: 55,
  55. 								beta: 10
  56. 							},
  57. 							ambient: {
  58. 								intensity: 0.3
  59. 							}
  60. 						},
  61. 						viewControl: {
  62. 							distance: 85, // 地图视角 控制初始大小
  63. 							// rotateSensitivity: 0, // 旋转
  64. 							// zoomSensitivity: 0, // 缩放
  65. 							// autoRotate: false,
  66. 							// maxBeta: Infinity,
  67. 							// minBeta: -Infinity,
  68. 							// beta: -15, //旋转视角
  69. 							alpha: 65, //视角
  70. 							panMouseButton: 'left',
  71. 							rotateMouseButton: 'right',
  72. 							center: [-1, 0, 5],
  73. 						},
  74. 						regions: [{
  75. 							name: '南海诸岛',
  76. 							itemStyle: {
  77. 								Color: 'rgba(0, 10, 52, 1)',
  78. 								borderColor: 'rgba(0, 10, 52, 1)'
  79. 							},
  80. 							emphasis: {
  81. 								areaColor: 'rgba(0, 10, 52, 1)',
  82. 								borderColor: 'rgba(0, 10, 52, 1)'
  83. 							}
  84. 						}],
  85. 					},
  86. 					series: []
  87. 				};
  88. 				option && myChart.setOption(option);
  89. 			}

在mounted中调用

  1. mounted() {
  2. 			this.setMap3D()
  3. 		},

打开页面效果：

 步骤三

经过以上两个步骤初步实现了地图的渲染，现在开始添加下钻功能

1、给地图添加双击事件dblclick

  1. myChart.on('dblclick', (clickparams)=> {
  2. 					console.log(clickparams);
  3. 				});

此时双击地图板块发现并没有触发方法

这里我的解决方案是添加.getZr()，如下：

  1. myChart.getZr().on('dblclick', (clickparams)=> {
  2. 					console.log(clickparams);
  3. 				});

再次双击地图，发现事件确实是触发了，但是并没有返回我们想要的数据（双击的地图板块名称）

这里我的解决方案是，在鼠标悬浮在地图板块的时候在label中拿到对应的数据赋值给一个变量，然后再双击地图的时候使用这个变量，如下：

 双击地图：

 这里已经拿到了双击地图板块的名称，现在只需要去匹配对应的地图json数据，重新渲染地图即可实现下钻功能，具体代码如下：

  1. myChart.getZr().on('dblclick', (clickparams)=> {
  2. 					console.log(dataObj);
  3. 					if (dataObj.name == '河南') {
  4. 						this.chinaJson = require('@/assets/json/henan.json')
  5. 						echarts.registerMap("china", this.chinaJson)
  6. 					}else{
  7. 						this.chinaJson = require('@/assets/json/china.json')
  8. 						echarts.registerMap("china", this.chinaJson)
  9. 					}
  10. 					option && myChart.setOption(option);
  11. 				});

小编这里以河南地图为例，添加以上代码后，双击河南地图板块后，发现已经实现了我们想要的下钻功能。

但是也出现了一个问题，和我们预想的不太一样，下钻到省地图后，china地图的边框数据保留了，即：地图边框并没有更新，如图：

 在这里小编的解决方案是在下钻的时候，添加重置 option 事件。如下：

解决方案一：

  1.                     myChart.dispatchAction({ //来用程序主动渲染选框
  2. 						type: "restore",//restore 重置 option 事件。
  3. 					});
  4. 					option && myChart.setOption(option);

双击执行函数完整代码

  1. myChart.getZr().on('dblclick', (clickparams)=> {
  2. 					console.log(dataObj);
  3. 					if (dataObj.name == '河南') {
  4. 						this.chinaJson = require('@/assets/json/henan.json')
  5. 						echarts.registerMap("china", this.chinaJson)
  6. 					}else{
  7. 						this.chinaJson = require('@/assets/json/china.json')
  8. 						echarts.registerMap("china", this.chinaJson)
  9. 					}
  10. 					// 解决方法一
  11. 					myChart.dispatchAction({ //来用程序主动渲染选框
  12. 						type: "restore",//restore 重置 option 事件。
  13. 					});
  14. 					option && myChart.setOption(option);
  15. 					
  16. 				});

此时我们双击地图板块，发现边框已经更新，达到了我们想要的效果（边框问题完美解决），如图：

 虽然达到了我们预期的效果，但是经过多次测试，发现在个别版本的echarts-gl中还是会有边框不更新问题，如方案一不能解决，

在这里小编这里整理了第二套解决方案原理上适配所有的echarts版本：如下：

解决方案二：

原理：下钻的时候销毁当前地图，重新执行初始化渲染地图

  1. // 解决方法二
  2. 					myChart.dispose(); //地图销毁函数
  3. 					this.setMap3D(this.chinaJson) //重新执行初始化地图的方法并传入地图数据

完整的双击事件代码

  1.                 myChart.getZr().on('dblclick', (clickparams)=> {
  2. 					console.log(dataObj);
  3. 					if (dataObj.name == '河南') {
  4. 						this.chinaJson = require('@/assets/json/henan.json')
  5. 						echarts.registerMap("china", this.chinaJson)
  6. 					}else{
  7. 						this.chinaJson = require('@/assets/json/china.json')
  8. 						echarts.registerMap("china", this.chinaJson)
  9. 					}
  10. 					// 解决方法一
  11. 					// myChart.dispatchAction({ //来用程序主动渲染选框
  12. 					// 	type: "restore",//restore 重置 option 事件。
  13. 					// });
  14. 					// option && myChart.setOption(option);
  15. 					
  16. 					// 解决方法二
  17. 					myChart.dispose(); //地图销毁函数
  18. 					this.setMap3D(this.chinaJson) //重新执行初始化地图的方法并传入地图数据
  19. 				});

以上两种解决方法，任选其一即可，如不能解决换另一种方法

步骤四

添加地图标记点功能，代码如下：

  1.                     series: [{
  2. 						type: 'scatter3D',
  3. 						coordinateSystem: 'geo3D',
  4. 						itemStyle: {
  5. 							color: '#fff',
  6. 							opacity: 1,
  7. 						},
  8. 						zlevel: 1,
  9. 						// symbol: 'path://M133 409 c-37 -11 -73 -52 -73 -84 0 -28 71 -172 101 -203 26 -29 32 -24 84 67 52 93 63 142 41 176 -18 27 -72 56 -103 54 -10 0 -32 -5 -50 -10z m72 -63 c16 -12 17 -16 6 -30 -7 -9 -21 -16 -31 -16 -10 0 -24 7 -31 16 -11 14 -10 18 6 30 10 8 22 14 25 14 3 0 15 -6 25 -14z',
  10. 						symbol: 'circle',
  11. 						symbolSize: [40, 50],
  12. 						data: [{
  13. 							name: '标记点',
  14. 							value: [120.256616, 30.239604, 100],
  15. 							info: require('../assets/icon/dianwei.png'),
  16. 						}],
  17. 					}]

效果如下：

 扩展：

自定义标记点样式为icon图标：

  1.                    series: [{
  2. 						type: 'scatter3D',
  3. 						coordinateSystem: 'geo3D',
  4. 						itemStyle: {
  5. 							color: '#fff',
  6. 							opacity: 1,
  7. 						},
  8. 						zlevel: 1,
  9. 						symbol: 'path://M133 409 c-37 -11 -73 -52 -73 -84 0 -28 71 -172 101 -203 26 -29 32 -24 84 67 52 93 63 142 41 176 -18 27 -72 56 -103 54 -10 0 -32 -5 -50 -10z m72 -63 c16 -12 17 -16 6 -30 -7 -9 -21 -16 -31 -16 -10 0 -24 7 -31 16 -11 14 -10 18 6 30 10 8 22 14 25 14 3 0 15 -6 25 -14z',
  10. 						// symbol: 'circle',
  11. 						symbolSize: [40, 50],
  12. 						data: [{
  13. 							name: '标记点',
  14. 							value: [120.256616, 30.239604, 100],
  15. 							info: require('../assets/icon/dianwei.png'),
  16. 						}],
  17. 					}]

 使用图片为标记点样式，但是图片只能是svg PathData 格式的，并且好像不能设置彩色的图片，官方文档如下：

ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'

可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适（如果是 symbol 的话就是 symbolSize）的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。

 效果如下：

 标记点小编技术有限，也没有太好的办法解决，去完善，到此为止，就是小编做的最终效果

最后附上完整代码：

html:

  1. setMap3D(chinaJson) {
  2. 				this.chinaJson =chinaJson?chinaJson:require('@/assets/json/china.json')
  3. 				var chartDom = document.getElementById('mapBox');
  4. 				var myChart = echarts.init(chartDom);
  5. 				echarts.registerMap("china", this.chinaJson)
  6. 				let dataObj = ''
  7. 				var option;
  8. 				option = {
  9. 					// title: {
  10. 					// 	text: '全国行政区划3D地图',
  11. 					// 	x: 'center',
  12. 					// 	top: "20",
  13. 					// 	textStyle: {
  14. 					// 		color: '#000',
  15. 					// 		fontSize: 24
  16. 					// 	}
  17. 					// },
  18. 					tooltip: {
  19. 						show: true,
  20. 						// formatter:(params)=>{
  21. 						//   let data = "测试1:"+params.name + "<br/>"+"值:"+ params.value[2]+"<br/>"+"地理坐标:[" + params.value[0]+","+params.value[1] +"]";
  22. 						//   return data;
  23. 						// },
  24. 					},
  25. 					geo3D: {
  26. 						map: 'china',
  27. 						roam: true,
  28. 						regionHeight: 4, //地图厚度
  29. 						itemStyle: {
  30. 							color: '#326a9a',
  31. 							opacity: 0.8,
  32. 							borderWidth: 0.8,
  33. 							borderColor: '#c3d7de'
  34. 						},
  35. 						label: {
  36. 							show: false,
  37. 						},
  38. 						emphasis: { //当鼠标放上去  地区区域是否显示名称
  39. 							disabled: true, //是否可以被选中
  40. 							label: {
  41. 								formatter: function(params) { // 鼠标经过的回调函数  
  42. 									// console.log('hover', params)
  43. 									dataObj = params;
  44. 									return params.name
  45. 								},
  46. 							},
  47. 						},
  48. 						//shading: 'lambert',
  49. 						light: { //光照阴影
  50. 							main: {
  51. 								color: '#fff', //光照颜色
  52. 								intensity: 1.2, //光照强度
  53. 								// shadowQuality: 'high', //阴影亮度
  54. 								shadow: false, //是否显示阴影
  55. 								alpha: 55,
  56. 								beta: 10
  57. 							},
  58. 							ambient: {
  59. 								intensity: 0.3
  60. 							}
  61. 						},
  62. 						viewControl: {
  63. 							distance: 85, // 地图视角 控制初始大小
  64. 							// rotateSensitivity: 0, // 旋转
  65. 							// zoomSensitivity: 0, // 缩放
  66. 							// autoRotate: false,
  67. 							// maxBeta: Infinity,
  68. 							// minBeta: -Infinity,
  69. 							// beta: -15, //旋转视角
  70. 							alpha: 65, //视角
  71. 							panMouseButton: 'left',
  72. 							rotateMouseButton: 'right',
  73. 							center: [-1, 0, 5],
  74. 						},
  75. 						regions: [{
  76. 							name: '南海诸岛',
  77. 							itemStyle: {
  78. 								Color: 'rgba(0, 10, 52, 1)',
  79. 								borderColor: 'rgba(0, 10, 52, 1)'
  80. 							},
  81. 							emphasis: {
  82. 								areaColor: 'rgba(0, 10, 52, 1)',
  83. 								borderColor: 'rgba(0, 10, 52, 1)'
  84. 							}
  85. 						}],
  86. 					},
  87. 					series: [{
  88. 						type: 'scatter3D',
  89. 						coordinateSystem: 'geo3D',
  90. 						itemStyle: {
  91. 							color: '#fff',
  92. 							opacity: 1,
  93. 						},
  94. 						zlevel: 1,
  95. 						symbol: 'path://M133 409 c-37 -11 -73 -52 -73 -84 0 -28 71 -172 101 -203 26 -29 32 -24 84 67 52 93 63 142 41 176 -18 27 -72 56 -103 54 -10 0 -32 -5 -50 -10z m72 -63 c16 -12 17 -16 6 -30 -7 -9 -21 -16 -31 -16 -10 0 -24 7 -31 16 -11 14 -10 18 6 30 10 8 22 14 25 14 3 0 15 -6 25 -14z',
  96. 						// symbol: 'circle',
  97. 						symbolSize: [40, 50],
  98. 						data: [{
  99. 							name: '标记点',
  100. 							value: [120.256616, 30.239604, 100],
  101. 							info: require('../assets/icon/dianwei.png'),
  102. 						}],
  103. 					}]
  104. 				};
  105. 				// console.log(myChart)
  106. 				myChart.getZr().on('dblclick', (clickparams)=> {
  107. 					console.log(dataObj);
  108. 					if (dataObj.name == '河南') {
  109. 						this.chinaJson = require('@/assets/json/henan.json')
  110. 						echarts.registerMap("china", this.chinaJson)
  111. 					}else{
  112. 						this.chinaJson = require('@/assets/json/china.json')
  113. 						echarts.registerMap("china", this.chinaJson)
  114. 					}
  115. 					// 解决方法一
  116. 					// myChart.dispatchAction({ //来用程序主动渲染选框
  117. 					// 	type: "restore",//restore 重置 option 事件。
  118. 					// });
  119. 					// option && myChart.setOption(option);
  120. 					
  121. 					// 解决方法二
  122. 					myChart.dispose(); //地图销毁函数
  123. 					this.setMap3D(this.chinaJson) //重新执行初始化地图的方法并传入地图数据
  124. 				});
  125. 				option && myChart.setOption(option);
  126. 			}

码字不易，如有帮到您，麻烦三连支持下！！！！！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/82899
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号