Echarts结合高德地图(Vue版本)

时间 2021/7/15 16:43:43 加载中...

直接引用版本:http://www.sqber.com/articles/echarts-with-gaode-map.html

说明

这个是直接引用版本的 Vue 版

介绍

echarts 对高德地图的扩展有: echarts-amap、echarts-extension-amap。
我们的对应的版本是 echarts-amap 版本。项目地址是:https://github.com/billy-poon/echarts-amap
不过这个项目不怎么更新了。
而项目 echarts-extension-amap 一直在更新和维护。

首先搭建一个初始化的 Vue 项目。使用的版本是 2.x.x 的。

添加 echarts 和 echarts-amap 插件

  1. npm install -S echarts-amap
  2. npm install echarts

两者的版本是

  1. "echarts": "^4.9.0",
  2. "echarts-amap": "^1.4.15-rc.1",

在项目中新增组件 MigrationMap.Vue,内容如下:
(说明:也是动态加载的 高德地图 js,)

  1. <template>
  2. <div>
  3. <div :id="id" class="dbox"></div>
  4. </div>
  5. </template>
  6. <script>
  7. import { guid } from "@/assets/js/util.js";
  8. import echarts from 'echarts'
  9. require('echarts-amap')
  10. export default {
  11. name: "MigrationMap",
  12. props: {
  13. },
  14. data() {
  15. return {
  16. id: guid(),
  17. mapObj: null,
  18. };
  19. },
  20. mounted() {
  21. },
  22. beforeMount() {
  23. var obj = document.getElementById('amapjs')
  24. if(obj){
  25. let self = this
  26. // 先让它加载完
  27. setTimeout(() => self.initMap(self), 1000)
  28. }else{
  29. var url =
  30. "https://webapi.amap.com/maps?v=1.4.14&key=ec817c7d9a73dae44ddbb3eb9d032a33&callback=onLoad";
  31. var jsapi = document.createElement("script");
  32. jsapi.charset = "utf-8";
  33. jsapi.src = url;
  34. jsapi.id = "amapjs";
  35. document.head.appendChild(jsapi);
  36. let self = this
  37. window.onLoad = function(){ self.initMap(self) }
  38. }
  39. },
  40. destroyed() {
  41. var obj = document.getElementById("amapjs")
  42. if(obj){
  43. document.getElementsByTagName("head")[0].removeChild(obj)
  44. }
  45. },
  46. watch: {
  47. },
  48. methods: {
  49. initMap(self){
  50. var myChart = echarts.init(document.getElementById(self.id));
  51. myChart.setOption({
  52. title : {
  53. text: '模拟迁徙',
  54. subtext: '数据纯属虚构',
  55. left: 'center',
  56. textStyle : {
  57. color: '#fff'
  58. }
  59. },
  60. amap: {
  61. maxPitch: 60,
  62. pitch: 10, //45 俯仰角
  63. viewMode: '3D',
  64. zoom: 5.5,
  65. expandZoomRange: true,
  66. zooms: [3, 20],
  67. mapStyle: 'amap://styles/darkblue', //地图主题
  68. center: [110,33], //中心点
  69. rotation: 0, //顺时针旋转角度
  70. resizeEnable: true,
  71. },
  72. animation: false,
  73. series: []
  74. })
  75. var map = myChart.getModel().getComponent('amap').getAMap();
  76. var layer = myChart.getModel().getComponent('amap').getLayer();
  77. AMap.plugin(["AMap.ControlBar"], function() {
  78. var bar = new AMap.ControlBar();
  79. map.addControl(bar);
  80. })
  81. AMap.plugin(["AMap.ToolBar"], function() {
  82. map.addControl(new AMap.ToolBar());
  83. });
  84. AMap.event.addListener(map,'zoomend',function(){
  85. console.log('当前缩放级别:' + map.getZoom());
  86. console.log('俯视视角' + map.getPitch());
  87. console.log('俯视视角' + map.getPitch());
  88. });
  89. var series = [
  90. {
  91. "name": "上海 Top10",
  92. "coordinateSystem": "amap",
  93. "type": "lines",
  94. "zlevel": 1,
  95. "effect": {
  96. "show": true,
  97. "period": 6,
  98. "trailLength": 0.7,
  99. "color": "#fff",
  100. "symbolSize": 3
  101. },
  102. "lineStyle": {
  103. "normal": {
  104. "color": "#a6c84c",
  105. "width": 0,
  106. "curveness": 0.2
  107. }
  108. },
  109. "data": [
  110. {
  111. "fromName": "上海",
  112. "toName": "包头",
  113. "coords": [
  114. [
  115. 121.4648,
  116. 31.2891
  117. ],
  118. [
  119. 109.853634,40.651412
  120. ]
  121. ],
  122. "value": 95
  123. }
  124. ]
  125. },
  126. {
  127. "name": "上海 Top10",
  128. "coordinateSystem": "amap",
  129. "type": "lines",
  130. "zlevel": 2,
  131. "symbol": [
  132. "none",
  133. "arrow"
  134. ],
  135. "symbolSize": 10,
  136. "lineStyle": {
  137. "normal": {
  138. "color": "#a6c84c",
  139. "width": 1,
  140. "opacity": 0.6,
  141. "curveness": 0.2
  142. }
  143. },
  144. "data": [
  145. {
  146. "fromName": "上海",
  147. "toName": "包头",
  148. "coords": [
  149. [
  150. 121.4648,
  151. 31.2891
  152. ],
  153. [
  154. 109.853634,40.651412
  155. ]
  156. ],
  157. "value": 95
  158. }
  159. ]
  160. },
  161. {
  162. "name": "上海 Top10",
  163. "type": "effectScatter",
  164. "coordinateSystem": "amap",
  165. "zlevel": 2,
  166. "rippleEffect": {
  167. "brushType": "stroke"
  168. },
  169. "label": {
  170. "normal": {
  171. "show": true,
  172. "position": "bottom",
  173. "formatter": "{b}"
  174. }
  175. },
  176. "itemStyle": {
  177. "normal": {
  178. "color": "#a6c84c"
  179. }
  180. },
  181. "data": [
  182. {
  183. "name": "包头",
  184. "value": [
  185. 109.853634,40.651412,
  186. 95
  187. ]
  188. }
  189. ]
  190. }
  191. ];
  192. myChart.setOption({
  193. series: series
  194. });
  195. //下面是确保高德地图渲染的时候,echarts同时也需要再次渲染一次,保持位置的同步
  196. layer.render = function() {
  197. // let series = myChart.getOption().seriesIndexes;
  198. // myChart.setOption({
  199. // series: []
  200. // });
  201. myChart.setOption({
  202. series: series
  203. });
  204. console.log('当前缩放级别:' + map.getZoom());
  205. console.log('俯视视角:' + map.getPitch());
  206. console.log('顺时针:' + map.getRotation());
  207. // var map = new AMap.Map(self.id, {
  208. // resizeEnable: true, //是否监控地图容器尺寸变化
  209. // zoom: 11, //初始化地图层级
  210. // center: [116.397428, 39.90923] //初始化地图中心点
  211. // });
  212. // // eslint-disable-next-line no-undef
  213. // AMap.plugin('AMap.ToolBar', function () {//异步加载插件
  214. // // eslint-disable-next-line no-undef
  215. // var toolbar = new AMap.ToolBar();
  216. // map.addControl(toolbar);
  217. // });
  218. // self.mapObj = map;
  219. }
  220. },
  221. test(){
  222. }
  223. }
  224. };
  225. </script>
  226. <style scoped>
  227. .dbox {
  228. position: absolute;
  229. top: 0;
  230. bottom: 0;
  231. left: 0;
  232. right: 0;
  233. border: 0px solid green;
  234. }
  235. </style>

扫码分享
版权说明
作者:SQBER
文章来源:http://www.sqber.com/articles/echarts-with-gaode-map-vue.html
本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。