小言_互联网的博客

ecahrts给地图添加贴图纹理

415人阅读  评论(0)

有个可视化需求给地图添加纹理,翻了好久没翻到成品,希望这篇文章对后面的人有所帮助吧。

虽然echarts文档里面也有说明,但是echarts文档对一些配置属性确实不敢恭维

实现是以html实现的,vue其实一样的道理,不会差距太大

html代码:


  
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title> </title>
  6. <script type="application/javascript" src="js/echarts.js"> </script>
  7. <script type="application/javascript" src="js/jquery.min.js"> </script>
  8. </head>
  9. <body style="background: url(img/bg.png);background-repeat: no-repeat;background-size: 100%;overflow: hidden;">
  10. <div style="width: 100%;height: 100vh;" id="map"> </div>
  11. <img src="img/1.jpg" id="img1" style="display: none;" />
  12. <img src="img/2.jpg" id="img2" style="display: none;" />
  13. <img src="img/3.jpg" id="img3" style="display: none;" />
  14. <img src="img/4.jpg" id="img4" style="display: none;" />
  15. <img src="img/5.jpg" id="img5" style="display: none;" />
  16. </body>
  17. <script>
  18. var myChart = echarts.init( document.getElementById( 'map'));
  19. //通过后台接口返回的数据 value计算取值范围得到5个等级其一 选择img的对应五张图片纹理显示
  20. var data = [{
  21. name: "呈贡区",
  22. value: 12,
  23. itemStyle: {
  24. normal: {
  25. color: {
  26. image: document.getElementById( "img1"),
  27. repeat: 'repeat'
  28. }
  29. }
  30. }
  31. },
  32. {
  33. name: "安宁市",
  34. value: 12,
  35. itemStyle: {
  36. normal: {
  37. color: {
  38. image: document.getElementById( "img2"),
  39. repeat: 'repeat'
  40. }
  41. }
  42. }
  43. },
  44. {
  45. name: "安宁市",
  46. value: 12,
  47. itemStyle: {
  48. normal: {
  49. color: {
  50. image: document.getElementById( "img2"),
  51. repeat: 'repeat'
  52. }
  53. }
  54. }
  55. },
  56. {
  57. name: "晋宁区",
  58. value: 12,
  59. itemStyle: {
  60. color: {
  61. image: document.getElementById( "img3"),
  62. repeat: 'repeat'
  63. }
  64. }
  65. },
  66. {
  67. name: "宜良县",
  68. value: 12,
  69. itemStyle: {
  70. color: {
  71. image: document.getElementById( "img4"),
  72. repeat: 'repeat'
  73. }
  74. }
  75. },
  76. {
  77. name: "石林彝族自治县",
  78. value: 12,
  79. itemStyle: {
  80. color: {
  81. image: document.getElementById( "img5"),
  82. repeat: 'repeat'
  83. }
  84. }
  85. },
  86. {
  87. name: "官渡区",
  88. value: 12,
  89. itemStyle: {
  90. color: {
  91. image: document.getElementById( "img1"),
  92. repeat: 'repeat'
  93. }
  94. }
  95. },
  96. {
  97. name: "五华区",
  98. value: 12,
  99. itemStyle: {
  100. color: {
  101. image: document.getElementById( "img2"),
  102. repeat: 'repeat'
  103. }
  104. }
  105. },
  106. {
  107. name: "盘龙区",
  108. value: 12,
  109. itemStyle: {
  110. color: {
  111. image: document.getElementById( "img3"),
  112. repeat: 'repeat'
  113. }
  114. }
  115. },
  116. {
  117. name: "富民县",
  118. value: 12,
  119. itemStyle: {
  120. color: {
  121. image: document.getElementById( "img3"),
  122. repeat: 'repeat'
  123. }
  124. }
  125. },
  126. {
  127. name: "寻甸回族彝族自治县",
  128. value: 12,
  129. itemStyle: {
  130. color: {
  131. image: document.getElementById( "img5"),
  132. repeat: 'repeat'
  133. }
  134. }
  135. },
  136. {
  137. name: "禄劝彝族苗族自治县",
  138. value: 12,
  139. itemStyle: {
  140. color: {
  141. image: document.getElementById( "img5"),
  142. repeat: 'repeat'
  143. }
  144. }
  145. },
  146. {
  147. name: "东川区",
  148. value: 12,
  149. itemStyle: {
  150. color: {
  151. image: document.getElementById( "img1"),
  152. repeat: 'repeat'
  153. }
  154. }
  155. },
  156. {
  157. name: "嵩明县",
  158. value: 12,
  159. itemStyle: {
  160. color: {
  161. image: document.getElementById( "img2"),
  162. repeat: 'repeat'
  163. }
  164. }
  165. },
  166. {
  167. name: "西山区",
  168. value: 12,
  169. itemStyle: {
  170. color: {
  171. image: document.getElementById( "img3"),
  172. repeat: 'repeat'
  173. }
  174. }
  175. }
  176. ];
  177. $.getJSON( "js/kunmingMap.js", function(geoJson) {
  178. echarts.registerMap( '昆明', geoJson);
  179. let option = {
  180. //不触发事件
  181. silent: true,
  182. //要显示纹理要关闭这个属性
  183. visualMap: {
  184. show: false
  185. },
  186. //公共的一些设置 我理解为容器
  187. geo: {
  188. map: '昆明',
  189. aspectScale: 1,
  190. roam: false,
  191. itemStyle: {
  192. //容器外边框设置
  193. normal: {
  194. borderColor: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [{
  195. offset: 0,
  196. color: '#00F6FF'
  197. }, {
  198. offset: 1,
  199. color: '#53D9FF'
  200. }], false),
  201. borderWidth: 3.5, //设置外层边框
  202. shadowColor: 'rgba(0,54,255, 1)',
  203. shadowOffsetY: 0,
  204. shadowBlur: 60
  205. },
  206. //选中状态
  207. emphasis: {
  208. show: false
  209. }
  210. }
  211. },
  212. //我的理解为每个小区域的容器的公共设置
  213. series: [{
  214. type: "map",
  215. map: '昆明',
  216. aspectScale: 1,
  217. itemStyle:{
  218. normal: {
  219. borderColor: '#6FE7FF',
  220. borderWidth: 1
  221. },
  222. emphasis: {
  223. show: false
  224. }
  225. },
  226. label: {
  227. normal: {
  228. show: true,
  229. fontSize: 12,
  230. color: "#6FE7FF"
  231. },
  232. emphasis: {
  233. color: '#6FE7FF'
  234. }
  235. },
  236. //每个小区域的独立设置
  237. data: data
  238. }]
  239. };
  240. myChart.setOption(option);
  241. })
  242. </script>
  243. </html>

再单独说明下属性:我理解的属性

geo:整个地图的父级容器,再这里设置一些属性如果后面不对其进行覆盖,就会使用这个对象里面的属性值,可以用来节省一些公关代码和设置外边框

visualMap:这个属性说是什么视觉什么的,看不懂 我只知道删除这个属性,纹理就不会显示了

silent:true 这是取消全局地图事件,因为我这个地图有个BUG  就是鼠标移入会被颜色覆盖,也就是贴图纹理会被覆盖 所以我就干脆取消全局事件

 

最终放上结果图:不喜勿喷,我应该也算这个地图纹理的开荒者吧...

补充下:

1. echarts版本是5.1.0  可以通过echarts.version得到当前框架版本号

2. data中的数据的name必须与地图显示的名字一样  比如安宁市, 如果你地图是显示安宁.那么data的name就得是安宁 可以理解为这是一个映射关系

3. 鼠标移入高亮问题我之前是通过禁用全局事件解决的 但是可以通过一个echarts支持的函数方式解决,这样既不禁用事件,又能解决鼠标移入纹理被覆盖的问题


  
  1. echarts.on( "mouseover", function (params){
  2. echarts.dispatchAction({
  3. type: 'downplay'
  4. });
  5. });

4. vue中使用5.1.0 貌似需要使用下面的方式引入,不然会找不到对象

import * as echarts from 'echarts';

5. echarts的itemStyle的层级、barBorderRaudis属性名在新版本中属于过时状态 浏览器控制台也会提示  itemStyle中的nomal删了就行,直接把color等属性定义在itemStyle下就行,barBorderRaudis改为borderRaudis就行-->这个只是给我提个醒,我怕以后高版本直接不支持了,现在虽然过时,但是还是支持的..无视就好


转载:https://blog.csdn.net/u012169821/article/details/116107536
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场