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

Echart在Openlayers的应用-航班的炫光特效

作者：我家小花儿 | 2024-06-16 20:37:10

赞

踩

echarts的地图效果在openlayers应用

概述

在前两篇文章中讲到了echart在openlayers2中的应用，地图统计图与热力图的实现，在本文中介绍openlayers中结合echart实现航班的炫光特效展示。


效果




实现代码：

1、EchartLayer

  1. OpenLayers.Layer.EchartLayer = OpenLayers.Class(OpenLayers.Layer,
  2.     {
  3.         isBaseLayer : false,
  4.         echart : null,
  5.         mapLayer : null,
  6.         _geoCoord: [],
  7.         initialize : function (name, map, echart, options)
  8.         {
  9.             var scope = this, echartdiv = document.createElement("div"), handler;
  10.             
  11.             OpenLayers.Layer.prototype.initialize.apply(this, [name, options]);
  12.  
  13.             echartdiv.style.cssText = "position:absolute;width:" + map.size.w + "px;height:"
  14.                 + map.size.h + "px;";
  15.             scope.div.appendChild(echartdiv);
  16.             scope.map = map;
  17.             scope.echartdiv = echartdiv;
  18.             scope.opacity = options.opacity;
  19.             scope.echart = echart;
  20.             scope.option = options.option;
  21.             handler = function (e)
  22.             {
  23.                 scope.updateLayer(e);
  24.             };
  25.             map.events.register("zoomend", this, handler);
  26.             map.events.register("moveend", this, handler);
  27.         },
  28.         geoCoord2Pixel:function(geoCoord){
  29.             var scope = this;
  30.             var lonLat = new OpenLayers.LonLat(geoCoord[0], geoCoord[1]);
  31.             var scrPt = scope.map.getPixelFromLonLat(lonLat);
  32.             var x = scrPt.x,
  33.                 y = scrPt.y;
  34.             return [x,y];
  35.         },
  36.         updateLayer : function (e)
  37.         {
  38.             var scope = this;
  39.             var myChart = scope.echart.init(scope.echartdiv);
  40.             var orgXy, w, h;
  41.             if(e){
  42.                 orgXy = e.object.layerContainerOriginPx;
  43.  
  44.             }
  45.             else{
  46.                 orgXy={x:0,y:0};
  47.             }
  48.             w = scope.map.size.w;
  49.             h = scope.map.size.h;
  50.             scope.echartdiv.style.cssText = "position:absolute;top:"+(-orgXy.y)+"px;left:"+(-orgXy.x)+
  51.                 "px;width:" + w + "px;height:" + h + "px;";
  52.             var ecOption = scope.getEcOption();
  53.             myChart.setOption(ecOption);
  54.         },
  55.         /**
  56.          *将echart的option转换
  57.          * @returns {*}
  58.          */
  59.         getEcOption: function(){
  60.             var scope = this;
  61.             scope._option = scope.option;
  62.             var series = scope._option.series || {};
  63.             // 记录所有的geoCoord
  64.             for (var i = 0, item; item = series[i++];) {
  65.                 var geoCoord = item.geoCoord;
  66.                 if (geoCoord) {
  67.                     for (var k in geoCoord) {
  68.                         scope._geoCoord[k] = geoCoord[k];
  69.                     }
  70.                 }
  71.             }
  72.  
  73.             // 添加x、y
  74.             for (var i = 0, item; item = series[i++];) {
  75.                 var markPoint = item.markPoint || {};
  76.                 var markLine = item.markLine || {};
  77.  
  78.                 var data = markPoint.data;
  79.                 if (data && data.length) {
  80.                     for (var k = 0, len = data.length; k < len; k++) {
  81.                         if (!(data[k].name && this._geoCoord.hasOwnProperty(data[k].name))) {
  82.                             data[k].name = k + 'markp';
  83.                             scope._geoCoord[data[k].name] = data[k].geoCoord;
  84.                         }
  85.                         scope._AddPos(data[k]);
  86.                     }
  87.                 }
  88.  
  89.                 data = markLine.data;
  90.                 if (data && data.length) {
  91.                     for (var k = 0, len = data.length; k < len; k++) {
  92.                         if (!(data[k][0].name && this._geoCoord.hasOwnProperty(data[k][0].name))) {
  93.                             data[k][0].name = k + 'startp';
  94.                             scope._geoCoord[data[k][0].name] = data[k][0].geoCoord;
  95.                         }
  96.                         if (!(data[k][1].name && this._geoCoord.hasOwnProperty(data[k][1].name))) {
  97.                             data[k][1].name = k + 'endp';
  98.                             scope._geoCoord[data[k][1].name] = data[k][1].geoCoord;
  99.                         }
  100.                         scope._AddPos(data[k][0]);
  101.                         scope._AddPos(data[k][1]);
  102.                     }
  103.                 }
  104.             }
  105.             return scope._option;
  106.         },
  107.         _AddPos:function(obj){
  108.             var scope = this;
  109.             var coord = scope._geoCoord[obj.name];
  110.             var pos = scope.geoCoord2Pixel(coord);
  111.             obj.x = pos[0]; //- self._mapOffset[0];
  112.             obj.y = pos[1]; //- self._mapOffset[1];
  113.         },
  114.         destroy : function ()
  115.         {
  116.             OpenLayers.Layer.Grid.prototype.destroy.apply(this, arguments);
  117.         },
  118.         CLASS_NAME : "OpenLayers.Layer.EchartLayer"
  119.     }
  120. );

2、页面调用 

  1. <html>
  2. <head>
  3. 	<meta charset="UTF-8">
  4. 	<title>heatmap.js OpenLayers Heatmap Layer</title>
  5. 	<link rel="stylesheet" type="text/css" href="http://dev.openlayers.org/theme/default/style.css"/>
  6. 	<style type="text/css">
  7. 		html, body, #map{
  8. 			padding:0;
  9. 			margin:0;
  10. 			height:100%;
  11. 			width:100%;
  12. 		}
  13. 	</style>
  14. 	<script type="text/javascript" src="http://dev.openlayers.org/OpenLayers.js"></script>
  15. 	<script src="http://echarts.baidu.com/echarts2/doc/example/www/js/echarts.js"></script>
  16. 	<script src="js/EchartLayer.js"></script>
  17. 	<script type="text/javascript">
  18. 		require.config({
  19. 	        paths: {
  20. 	            echarts: 'http://echarts.baidu.com/echarts2/doc/example/www/js'
  21. 	        }
  22. 	    });
  23. 		var map, echartlayer;
  24. 		function getBaseLayer(layername, layer){
  25. 			return new OpenLayers.Layer.XYZ(
  26. 					layername,
  27. 					[
  28. 						"http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
  29. 						"http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
  30. 						"http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
  31. 						"http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
  32. 						"http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
  33. 						"http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
  34. 						"http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
  35. 						"http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}"
  36.  
  37. 					],
  38. 					{
  39. 						isBaseLayer: true,
  40. 						displayInLayerSwitcher:true
  41. 					}
  42. 			);
  43. 		};
  44. 		function getAnnoLayer(layername, layer, visiable){
  45. 			return new OpenLayers.Layer.XYZ(
  46. 					layername,
  47. 					[
  48. 						"http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
  49. 						"http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
  50. 						"http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
  51. 						"http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
  52. 						"http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
  53. 						"http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
  54. 						"http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}",
  55. 						"http://t0.tianditu.com/DataServer?T="+layer+"&X=${x}&Y=${y}&L=${z}"
  56.  
  57. 					],
  58. 					{
  59. 						isBaseLayer: false,
  60. 						visibility:visiable,
  61. 						displayInLayerSwitcher:false
  62. 					}
  63. 			);
  64. 		};
  65. 		function init(){
  66. 			var baseLayers = ["vec_c","img_c","ter_c"];
  67. 			var vecLayer = getBaseLayer("vec",baseLayers[1]);
  68. 			var vecAnno = getAnnoLayer("cva", "cva_c", true);
  69. 			map = new OpenLayers.Map({
  70. 				div: "map",
  71. 				projection: "EPSG:4326",
  72. 				layers: [vecLayer, vecAnno],
  73. 				numZoomLevels:20,
  74. 				center: [103.847, 36.0473],
  75. 				zoom: 4
  76. 			});
  77. 			var option = {
  78. 				color: ['gold','aqua','lime'],
  79. 				tooltip : {
  80. 					trigger: 'item',
  81. 					formatter: '{b}'
  82. 				},
  83. 				legend: {
  84. 					orient: 'vertical',
  85. 					x:'right',
  86. 					y:"center",
  87. 					data:['北京 Top10', '上海 Top10', '广州 Top10'],
  88. 					selectedMode: 'single',
  89. 					selected:{
  90. 						'上海 Top10' : false,
  91. 						'广州 Top10' : false
  92. 					},
  93. 					textStyle : {
  94. 						color: 'auto'
  95. 					}
  96. 				},
  97. 				series : [
  98. 					/*{
  99. 					 type: 'map',
  100. 					 mapType: 'none',
  101. 					 roam: false,//鼠标滚轮缩放
  102. 					 data:[],
  103. 					 itemStyle:{
  104. 					 normal:{
  105. 					 borderColor:'rgba(100,149,237,1)',
  106. 					 borderWidth:0.5,
  107. 					 areaStyle:{
  108. 					 color: '#1b1b1b'
  109. 					 }
  110. 					 }
  111. 					 },
  112. 					 markLine : {
  113. 					 smooth:true,
  114. 					 symbol: ['none', 'circle'],
  115. 					 symbolSize : 1,
  116. 					 itemStyle : {
  117. 					 normal: {
  118. 					 color:'#fff',
  119. 					 borderWidth:1,
  120. 					 borderColor:'rgba(255,0,0,0.8)'
  121. 					 }
  122. 					 },
  123. 					 data : [
  124. 					 [{name:'北京'},{name:'包头'}],
  125. 					 [{name:'北京'},{name:'北海'}],
  126. 					 [{name:'北京'},{name:'广州'}],
  127. 					 [{name:'北京'},{name:'郑州'}],
  128. 					 [{name:'北京'},{name:'长春'}],
  129. 					 [{name:'北京'},{name:'长治'}],
  130. 					 [{name:'北京'},{name:'重庆'}],
  131. 					 [{name:'北京'},{name:'长沙'}],
  132. 					 [{name:'北京'},{name:'成都'}],
  133. 					 [{name:'北京'},{name:'常州'}],
  134. 					 [{name:'北京'},{name:'丹东'}],
  135. 					 [{name:'北京'},{name:'大连'}],
  136. 					 [{name:'北京'},{name:'东营'}],
  137. 					 [{name:'北京'},{name:'延安'}],
  138. 					 [{name:'北京'},{name:'福州'}],
  139. 					 [{name:'北京'},{name:'海口'}],
  140. 					 [{name:'北京'},{name:'呼和浩特'}],
  141. 					 [{name:'北京'},{name:'合肥'}],
  142. 					 [{name:'北京'},{name:'杭州'}],
  143. 					 [{name:'北京'},{name:'哈尔滨'}],
  144. 					 [{name:'北京'},{name:'舟山'}],
  145. 					 [{name:'北京'},{name:'银川'}],
  146. 					 [{name:'北京'},{name:'衢州'}],
  147. 					 [{name:'北京'},{name:'南昌'}],
  148. 					 [{name:'北京'},{name:'昆明'}],
  149. 					 [{name:'北京'},{name:'贵阳'}],
  150. 					 [{name:'北京'},{name:'兰州'}],
  151. 					 [{name:'北京'},{name:'拉萨'}],
  152. 					 [{name:'北京'},{name:'连云港'}],
  153. 					 [{name:'北京'},{name:'临沂'}],
  154. 					 [{name:'北京'},{name:'柳州'}],
  155. 					 [{name:'北京'},{name:'宁波'}],
  156. 					 [{name:'北京'},{name:'南京'}],
  157. 					 [{name:'北京'},{name:'南宁'}],
  158. 					 [{name:'北京'},{name:'南通'}],
  159. 					 [{name:'北京'},{name:'上海'}],
  160. 					 [{name:'北京'},{name:'沈阳'}],
  161. 					 [{name:'北京'},{name:'西安'}],
  162. 					 [{name:'北京'},{name:'汕头'}],
  163. 					 [{name:'北京'},{name:'深圳'}],
  164. 					 [{name:'北京'},{name:'青岛'}],
  165. 					 [{name:'北京'},{name:'济南'}],
  166. 					 [{name:'北京'},{name:'太原'}],
  167. 					 [{name:'北京'},{name:'乌鲁木齐'}],
  168. 					 [{name:'北京'},{name:'潍坊'}],
  169. 					 [{name:'北京'},{name:'威海'}],
  170. 					 [{name:'北京'},{name:'温州'}],
  171. 					 [{name:'北京'},{name:'武汉'}],
  172. 					 [{name:'北京'},{name:'无锡'}],
  173. 					 [{name:'北京'},{name:'厦门'}],
  174. 					 [{name:'北京'},{name:'西宁'}],
  175. 					 [{name:'北京'},{name:'徐州'}],
  176. 					 [{name:'北京'},{name:'烟台'}],
  177. 					 [{name:'北京'},{name:'盐城'}],
  178. 					 [{name:'北京'},{name:'珠海'}],
  179. 					 [{name:'上海'},{name:'包头'}],
  180. 					 [{name:'上海'},{name:'北海'}],
  181. 					 [{name:'上海'},{name:'广州'}],
  182. 					 [{name:'上海'},{name:'郑州'}],
  183. 					 [{name:'上海'},{name:'长春'}],
  184. 					 [{name:'上海'},{name:'重庆'}],
  185. 					 [{name:'上海'},{name:'长沙'}],
  186. 					 [{name:'上海'},{name:'成都'}],
  187. 					 [{name:'上海'},{name:'丹东'}],
  188. 					 [{name:'上海'},{name:'大连'}],
  189. 					 [{name:'上海'},{name:'福州'}],
  190. 					 [{name:'上海'},{name:'海口'}],
  191. 					 [{name:'上海'},{name:'呼和浩特'}],
  192. 					 [{name:'上海'},{name:'合肥'}],
  193. 					 [{name:'上海'},{name:'哈尔滨'}],
  194. 					 [{name:'上海'},{name:'舟山'}],
  195. 					 [{name:'上海'},{name:'银川'}],
  196. 					 [{name:'上海'},{name:'南昌'}],
  197. 					 [{name:'上海'},{name:'昆明'}],
  198. 					 [{name:'上海'},{name:'贵阳'}],
  199. 					 [{name:'上海'},{name:'兰州'}],
  200. 					 [{name:'上海'},{name:'拉萨'}],
  201. 					 [{name:'上海'},{name:'连云港'}],
  202. 					 [{name:'上海'},{name:'临沂'}],
  203. 					 [{name:'上海'},{name:'柳州'}],
  204. 					 [{name:'上海'},{name:'宁波'}],
  205. 					 [{name:'上海'},{name:'南宁'}],
  206. 					 [{name:'上海'},{name:'北京'}],
  207. 					 [{name:'上海'},{name:'沈阳'}],
  208. 					 [{name:'上海'},{name:'秦皇岛'}],
  209. 					 [{name:'上海'},{name:'西安'}],
  210. 					 [{name:'上海'},{name:'石家庄'}],
  211. 					 [{name:'上海'},{name:'汕头'}],
  212. 					 [{name:'上海'},{name:'深圳'}],
  213. 					 [{name:'上海'},{name:'青岛'}],
  214. 					 [{name:'上海'},{name:'济南'}],
  215. 					 [{name:'上海'},{name:'天津'}],
  216. 					 [{name:'上海'},{name:'太原'}],
  217. 					 [{name:'上海'},{name:'乌鲁木齐'}],
  218. 					 [{name:'上海'},{name:'潍坊'}],
  219. 					 [{name:'上海'},{name:'威海'}],
  220. 					 [{name:'上海'},{name:'温州'}],
  221. 					 [{name:'上海'},{name:'武汉'}],
  222. 					 [{name:'上海'},{name:'厦门'}],
  223. 					 [{name:'上海'},{name:'西宁'}],
  224. 					 [{name:'上海'},{name:'徐州'}],
  225. 					 [{name:'上海'},{name:'烟台'}],
  226. 					 [{name:'上海'},{name:'珠海'}],
  227. 					 [{name:'广州'},{name:'北海'}],
  228. 					 [{name:'广州'},{name:'郑州'}],
  229. 					 [{name:'广州'},{name:'长春'}],
  230. 					 [{name:'广州'},{name:'重庆'}],
  231. 					 [{name:'广州'},{name:'长沙'}],
  232. 					 [{name:'广州'},{name:'成都'}],
  233. 					 [{name:'广州'},{name:'常州'}],
  234. 					 [{name:'广州'},{name:'大连'}],
  235. 					 [{name:'广州'},{name:'福州'}],
  236. 					 [{name:'广州'},{name:'海口'}],
  237. 					 [{name:'广州'},{name:'呼和浩特'}],
  238. 					 [{name:'广州'},{name:'合肥'}],
  239. 					 [{name:'广州'},{name:'杭州'}],
  240. 					 [{name:'广州'},{name:'哈尔滨'}],
  241. 					 [{name:'广州'},{name:'舟山'}],
  242. 					 [{name:'广州'},{name:'银川'}],
  243. 					 [{name:'广州'},{name:'南昌'}],
  244. 					 [{name:'广州'},{name:'昆明'}],
  245. 					 [{name:'广州'},{name:'贵阳'}],
  246. 					 [{name:'广州'},{name:'兰州'}],
  247. 					 [{name:'广州'},{name:'拉萨'}],
  248. 					 [{name:'广州'},{name:'连云港'}],
  249. 					 [{name:'广州'},{name:'临沂'}],
  250. 					 [{name:'广州'},{name:'柳州'}],
  251. 					 [{name:'广州'},{name:'宁波'}],
  252. 					 [{name:'广州'},{name:'南京'}],
  253. 					 [{name:'广州'},{name:'南宁'}],
  254. 					 [{name:'广州'},{name:'南通'}],
  255. 					 [{name:'广州'},{name:'北京'}],
  256. 					 [{name:'广州'},{name:'上海'}],
  257. 					 [{name:'广州'},{name:'沈阳'}],
  258. 					 [{name:'广州'},{name:'西安'}],
  259. 					 [{name:'广州'},{name:'石家庄'}],
  260. 					 [{name:'广州'},{name:'汕头'}],
  261. 					 [{name:'广州'},{name:'青岛'}],
  262. 					 [{name:'广州'},{name:'济南'}],
  263. 					 [{name:'广州'},{name:'天津'}],
  264. 					 [{name:'广州'},{name:'太原'}],
  265. 					 [{name:'广州'},{name:'乌鲁木齐'}],
  266. 					 [{name:'广州'},{name:'温州'}],
  267. 					 [{name:'广州'},{name:'武汉'}],
  268. 					 [{name:'广州'},{name:'无锡'}],
  269. 					 [{name:'广州'},{name:'厦门'}],
  270. 					 [{name:'广州'},{name:'西宁'}],
  271. 					 [{name:'广州'},{name:'徐州'}],
  272. 					 [{name:'广州'},{name:'烟台'}],
  273. 					 [{name:'广州'},{name:'盐城'}]
  274. 					 ]
  275. 					 },
  276. 					 geoCoord: {
  277. 					 '上海': [121.4648,31.2891],
  278. 					 '东莞': [113.8953,22.901],
  279. 					 '东营': [118.7073,37.5513],
  280. 					 '中山': [113.4229,22.478],
  281. 					 '临汾': [111.4783,36.1615],
  282. 					 '临沂': [118.3118,35.2936],
  283. 					 '丹东': [124.541,40.4242],
  284. 					 '丽水': [119.5642,28.1854],
  285. 					 '乌鲁木齐': [87.9236,43.5883],
  286. 					 '佛山': [112.8955,23.1097],
  287. 					 '保定': [115.0488,39.0948],
  288. 					 '兰州': [103.5901,36.3043],
  289. 					 '包头': [110.3467,41.4899],
  290. 					 '北京': [116.4551,40.2539],
  291. 					 '北海': [109.314,21.6211],
  292. 					 '南京': [118.8062,31.9208],
  293. 					 '南宁': [108.479,23.1152],
  294. 					 '南昌': [116.0046,28.6633],
  295. 					 '南通': [121.1023,32.1625],
  296. 					 '厦门': [118.1689,24.6478],
  297. 					 '台州': [121.1353,28.6688],
  298. 					 '合肥': [117.29,32.0581],
  299. 					 '呼和浩特': [111.4124,40.4901],
  300. 					 '咸阳': [108.4131,34.8706],
  301. 					 '哈尔滨': [127.9688,45.368],
  302. 					 '唐山': [118.4766,39.6826],
  303. 					 '嘉兴': [120.9155,30.6354],
  304. 					 '大同': [113.7854,39.8035],
  305. 					 '大连': [122.2229,39.4409],
  306. 					 '天津': [117.4219,39.4189],
  307. 					 '太原': [112.3352,37.9413],
  308. 					 '威海': [121.9482,37.1393],
  309. 					 '宁波': [121.5967,29.6466],
  310. 					 '宝鸡': [107.1826,34.3433],
  311. 					 '宿迁': [118.5535,33.7775],
  312. 					 '常州': [119.4543,31.5582],
  313. 					 '广州': [113.5107,23.2196],
  314. 					 '廊坊': [116.521,39.0509],
  315. 					 '延安': [109.1052,36.4252],
  316. 					 '张家口': [115.1477,40.8527],
  317. 					 '徐州': [117.5208,34.3268],
  318. 					 '德州': [116.6858,37.2107],
  319. 					 '惠州': [114.6204,23.1647],
  320. 					 '成都': [103.9526,30.7617],
  321. 					 '扬州': [119.4653,32.8162],
  322. 					 '承德': [117.5757,41.4075],
  323. 					 '拉萨': [91.1865,30.1465],
  324. 					 '无锡': [120.3442,31.5527],
  325. 					 '日照': [119.2786,35.5023],
  326. 					 '昆明': [102.9199,25.4663],
  327. 					 '杭州': [119.5313,29.8773],
  328. 					 '枣庄': [117.323,34.8926],
  329. 					 '柳州': [109.3799,24.9774],
  330. 					 '株洲': [113.5327,27.0319],
  331. 					 '武汉': [114.3896,30.6628],
  332. 					 '汕头': [117.1692,23.3405],
  333. 					 '江门': [112.6318,22.1484],
  334. 					 '沈阳': [123.1238,42.1216],
  335. 					 '沧州': [116.8286,38.2104],
  336. 					 '河源': [114.917,23.9722],
  337. 					 '泉州': [118.3228,25.1147],
  338. 					 '泰安': [117.0264,36.0516],
  339. 					 '泰州': [120.0586,32.5525],
  340. 					 '济南': [117.1582,36.8701],
  341. 					 '济宁': [116.8286,35.3375],
  342. 					 '海口': [110.3893,19.8516],
  343. 					 '淄博': [118.0371,36.6064],
  344. 					 '淮安': [118.927,33.4039],
  345. 					 '深圳': [114.5435,22.5439],
  346. 					 '清远': [112.9175,24.3292],
  347. 					 '温州': [120.498,27.8119],
  348. 					 '渭南': [109.7864,35.0299],
  349. 					 '湖州': [119.8608,30.7782],
  350. 					 '湘潭': [112.5439,27.7075],
  351. 					 '滨州': [117.8174,37.4963],
  352. 					 '潍坊': [119.0918,36.524],
  353. 					 '烟台': [120.7397,37.5128],
  354. 					 '玉溪': [101.9312,23.8898],
  355. 					 '珠海': [113.7305,22.1155],
  356. 					 '盐城': [120.2234,33.5577],
  357. 					 '盘锦': [121.9482,41.0449],
  358. 					 '石家庄': [114.4995,38.1006],
  359. 					 '福州': [119.4543,25.9222],
  360. 					 '秦皇岛': [119.2126,40.0232],
  361. 					 '绍兴': [120.564,29.7565],
  362. 					 '聊城': [115.9167,36.4032],
  363. 					 '肇庆': [112.1265,23.5822],
  364. 					 '舟山': [122.2559,30.2234],
  365. 					 '苏州': [120.6519,31.3989],
  366. 					 '莱芜': [117.6526,36.2714],
  367. 					 '菏泽': [115.6201,35.2057],
  368. 					 '营口': [122.4316,40.4297],
  369. 					 '葫芦岛': [120.1575,40.578],
  370. 					 '衡水': [115.8838,37.7161],
  371. 					 '衢州': [118.6853,28.8666],
  372. 					 '西宁': [101.4038,36.8207],
  373. 					 '西安': [109.1162,34.2004],
  374. 					 '贵阳': [106.6992,26.7682],
  375. 					 '连云港': [119.1248,34.552],
  376. 					 '邢台': [114.8071,37.2821],
  377. 					 '邯郸': [114.4775,36.535],
  378. 					 '郑州': [113.4668,34.6234],
  379. 					 '鄂尔多斯': [108.9734,39.2487],
  380. 					 '重庆': [107.7539,30.1904],
  381. 					 '金华': [120.0037,29.1028],
  382. 					 '铜川': [109.0393,35.1947],
  383. 					 '银川': [106.3586,38.1775],
  384. 					 '镇江': [119.4763,31.9702],
  385. 					 '长春': [125.8154,44.2584],
  386. 					 '长沙': [113.0823,28.2568],
  387. 					 '长治': [112.8625,36.4746],
  388. 					 '阳泉': [113.4778,38.0951],
  389. 					 '青岛': [120.4651,36.3373],
  390. 					 '韶关': [113.7964,24.7028]
  391. 					 }
  392. 					 },*/
  393. 					{
  394. 						name: '北京 Top10',
  395. 						type: 'map',
  396. 						mapType: 'none',
  397. 						roam: false,//鼠标滚轮缩放
  398. 						data:[],
  399. 						geoCoord: {
  400. 							'上海': [121.4648,31.2891],
  401. 							'东莞': [113.8953,22.901],
  402. 							'东营': [118.7073,37.5513],
  403. 							'中山': [113.4229,22.478],
  404. 							'临汾': [111.4783,36.1615],
  405. 							'临沂': [118.3118,35.2936],
  406. 							'丹东': [124.541,40.4242],
  407. 							'丽水': [119.5642,28.1854],
  408. 							'乌鲁木齐': [87.9236,43.5883],
  409. 							'佛山': [112.8955,23.1097],
  410. 							'保定': [115.0488,39.0948],
  411. 							'兰州': [103.5901,36.3043],
  412. 							'包头': [110.3467,41.4899],
  413. 							'北京': [116.4551,40.2539],
  414. 							'北海': [109.314,21.6211],
  415. 							'南京': [118.8062,31.9208],
  416. 							'南宁': [108.479,23.1152],
  417. 							'南昌': [116.0046,28.6633],
  418. 							'南通': [121.1023,32.1625],
  419. 							'厦门': [118.1689,24.6478],
  420. 							'台州': [121.1353,28.6688],
  421. 							'合肥': [117.29,32.0581],
  422. 							'呼和浩特': [111.4124,40.4901],
  423. 							'咸阳': [108.4131,34.8706],
  424. 							'哈尔滨': [127.9688,45.368],
  425. 							'唐山': [118.4766,39.6826],
  426. 							'嘉兴': [120.9155,30.6354],
  427. 							'大同': [113.7854,39.8035],
  428. 							'大连': [122.2229,39.4409],
  429. 							'天津': [117.4219,39.4189],
  430. 							'太原': [112.3352,37.9413],
  431. 							'威海': [121.9482,37.1393],
  432. 							'宁波': [121.5967,29.6466],
  433. 							'宝鸡': [107.1826,34.3433],
  434. 							'宿迁': [118.5535,33.7775],
  435. 							'常州': [119.4543,31.5582],
  436. 							'广州': [113.5107,23.2196],
  437. 							'廊坊': [116.521,39.0509],
  438. 							'延安': [109.1052,36.4252],
  439. 							'张家口': [115.1477,40.8527],
  440. 							'徐州': [117.5208,34.3268],
  441. 							'德州': [116.6858,37.2107],
  442. 							'惠州': [114.6204,23.1647],
  443. 							'成都': [103.9526,30.7617],
  444. 							'扬州': [119.4653,32.8162],
  445. 							'承德': [117.5757,41.4075],
  446. 							'拉萨': [91.1865,30.1465],
  447. 							'无锡': [120.3442,31.5527],
  448. 							'日照': [119.2786,35.5023],
  449. 							'昆明': [102.9199,25.4663],
  450. 							'杭州': [119.5313,29.8773],
  451. 							'枣庄': [117.323,34.8926],
  452. 							'柳州': [109.3799,24.9774],
  453. 							'株洲': [113.5327,27.0319],
  454. 							'武汉': [114.3896,30.6628],
  455. 							'汕头': [117.1692,23.3405],
  456. 							'江门': [112.6318,22.1484],
  457. 							'沈阳': [123.1238,42.1216],
  458. 							'沧州': [116.8286,38.2104],
  459. 							'河源': [114.917,23.9722],
  460. 							'泉州': [118.3228,25.1147],
  461. 							'泰安': [117.0264,36.0516],
  462. 							'泰州': [120.0586,32.5525],
  463. 							'济南': [117.1582,36.8701],
  464. 							'济宁': [116.8286,35.3375],
  465. 							'海口': [110.3893,19.8516],
  466. 							'淄博': [118.0371,36.6064],
  467. 							'淮安': [118.927,33.4039],
  468. 							'深圳': [114.5435,22.5439],
  469. 							'清远': [112.9175,24.3292],
  470. 							'温州': [120.498,27.8119],
  471. 							'渭南': [109.7864,35.0299],
  472. 							'湖州': [119.8608,30.7782],
  473. 							'湘潭': [112.5439,27.7075],
  474. 							'滨州': [117.8174,37.4963],
  475. 							'潍坊': [119.0918,36.524],
  476. 							'烟台': [120.7397,37.5128],
  477. 							'玉溪': [101.9312,23.8898],
  478. 							'珠海': [113.7305,22.1155],
  479. 							'盐城': [120.2234,33.5577],
  480. 							'盘锦': [121.9482,41.0449],
  481. 							'石家庄': [114.4995,38.1006],
  482. 							'福州': [119.4543,25.9222],
  483. 							'秦皇岛': [119.2126,40.0232],
  484. 							'绍兴': [120.564,29.7565],
  485. 							'聊城': [115.9167,36.4032],
  486. 							'肇庆': [112.1265,23.5822],
  487. 							'舟山': [122.2559,30.2234],
  488. 							'苏州': [120.6519,31.3989],
  489. 							'莱芜': [117.6526,36.2714],
  490. 							'菏泽': [115.6201,35.2057],
  491. 							'营口': [122.4316,40.4297],
  492. 							'葫芦岛': [120.1575,40.578],
  493. 							'衡水': [115.8838,37.7161],
  494. 							'衢州': [118.6853,28.8666],
  495. 							'西宁': [101.4038,36.8207],
  496. 							'西安': [109.1162,34.2004],
  497. 							'贵阳': [106.6992,26.7682],
  498. 							'连云港': [119.1248,34.552],
  499. 							'邢台': [114.8071,37.2821],
  500. 							'邯郸': [114.4775,36.535],
  501. 							'郑州': [113.4668,34.6234],
  502. 							'鄂尔多斯': [108.9734,39.2487],
  503. 							'重庆': [107.7539,30.1904],
  504. 							'金华': [120.0037,29.1028],
  505. 							'铜川': [109.0393,35.1947],
  506. 							'银川': [106.3586,38.1775],
  507. 							'镇江': [119.4763,31.9702],
  508. 							'长春': [125.8154,44.2584],
  509. 							'长沙': [113.0823,28.2568],
  510. 							'长治': [112.8625,36.4746],
  511. 							'阳泉': [113.4778,38.0951],
  512. 							'青岛': [120.4651,36.3373],
  513. 							'韶关': [113.7964,24.7028]
  514. 						},
  515. 						markLine : {
  516. 							smooth:true,
  517. 							effect : {
  518. 								show: true,
  519. 								scaleSize: 1,
  520. 								period: 30,
  521. 								color: '#fff',
  522. 								shadowBlur: 10
  523. 							},
  524. 							itemStyle : {
  525. 								normal: {
  526. 									borderWidth:1,
  527. 									lineStyle: {
  528. 										type: 'solid',
  529. 										shadowBlur: 10
  530. 									}
  531. 								}
  532. 							},
  533. 							data : [
  534. 								[{name:'北京'}, {name:'上海',value:95}],
  535. 								[{name:'北京'}, {name:'广州',value:90}],
  536. 								[{name:'北京'}, {name:'大连',value:80}],
  537. 								[{name:'北京'}, {name:'南宁',value:70}],
  538. 								[{name:'北京'}, {name:'南昌',value:60}],
  539. 								[{name:'北京'}, {name:'拉萨',value:50}],
  540. 								[{name:'北京'}, {name:'长春',value:40}],
  541. 								[{name:'北京'}, {name:'包头',value:30}],
  542. 								[{name:'北京'}, {name:'重庆',value:20}],
  543. 								[{name:'北京'}, {name:'常州',value:10}]
  544. 							]
  545. 						},
  546. 						markPoint : {
  547. 							symbol:'emptyCircle',
  548. 							symbolSize : function (v){
  549. 								return 10 + v/10
  550. 							},
  551. 							effect : {
  552. 								show: true,
  553. 								shadowBlur : 0
  554. 							},
  555. 							itemStyle:{
  556. 								normal:{
  557. 									label:{show:false}
  558. 								},
  559. 								emphasis: {
  560. 									label:{position:'top'}
  561. 								}
  562. 							},
  563. 							data : [
  564. 								{name:'上海',value:95},
  565. 								{name:'广州',value:90},
  566. 								{name:'大连',value:80},
  567. 								{name:'南宁',value:70},
  568. 								{name:'南昌',value:60},
  569. 								{name:'拉萨',value:50},
  570. 								{name:'长春',value:40},
  571. 								{name:'包头',value:30},
  572. 								{name:'重庆',value:20},
  573. 								{name:'常州',value:10}
  574. 							]
  575. 						}
  576. 					},
  577. 					{
  578. 						name: '上海 Top10',
  579. 						type: 'map',
  580. 						mapType: 'none',
  581. 						roam: false,//鼠标滚轮缩放
  582. 						data:[],
  583. 						markLine : {
  584. 							smooth:true,
  585. 							effect : {
  586. 								show: true,
  587. 								scaleSize: 1,
  588. 								period: 30,
  589. 								color: '#fff',
  590. 								shadowBlur: 10
  591. 							},
  592. 							itemStyle : {
  593. 								normal: {
  594. 									borderWidth:1,
  595. 									lineStyle: {
  596. 										type: 'solid',
  597. 										shadowBlur: 10
  598. 									}
  599. 								}
  600. 							},
  601. 							data : [
  602. 								[{name:'上海'},{name:'包头',value:95}],
  603. 								[{name:'上海'},{name:'昆明',value:90}],
  604. 								[{name:'上海'},{name:'广州',value:80}],
  605. 								[{name:'上海'},{name:'郑州',value:70}],
  606. 								[{name:'上海'},{name:'长春',value:60}],
  607. 								[{name:'上海'},{name:'重庆',value:50}],
  608. 								[{name:'上海'},{name:'长沙',value:40}],
  609. 								[{name:'上海'},{name:'北京',value:30}],
  610. 								[{name:'上海'},{name:'丹东',value:20}],
  611. 								[{name:'上海'},{name:'大连',value:10}]
  612. 							]
  613. 						},
  614. 						markPoint : {
  615. 							symbol:'emptyCircle',
  616. 							symbolSize : function (v){
  617. 								return 10 + v/10
  618. 							},
  619. 							effect : {
  620. 								show: true,
  621. 								shadowBlur : 0
  622. 							},
  623. 							itemStyle:{
  624. 								normal:{
  625. 									label:{show:false}
  626. 								},
  627. 								emphasis: {
  628. 									label:{position:'top'}
  629. 								}
  630. 							},
  631. 							data : [
  632. 								{name:'包头',value:95},
  633. 								{name:'昆明',value:90},
  634. 								{name:'广州',value:80},
  635. 								{name:'郑州',value:70},
  636. 								{name:'长春',value:60},
  637. 								{name:'重庆',value:50},
  638. 								{name:'长沙',value:40},
  639. 								{name:'北京',value:30},
  640. 								{name:'丹东',value:20},
  641. 								{name:'大连',value:10}
  642. 							]
  643. 						}
  644. 					},
  645. 					{
  646. 						name: '广州 Top10',
  647. 						type: 'map',
  648. 						mapType: 'none',
  649. 						roam: false,//鼠标滚轮缩放
  650. 						data:[],
  651. 						markLine : {
  652. 							smooth:true,
  653. 							effect : {
  654. 								show: true,
  655. 								scaleSize: 1,
  656. 								period: 30,
  657. 								color: '#fff',
  658. 								shadowBlur: 10
  659. 							},
  660. 							itemStyle : {
  661. 								normal: {
  662. 									borderWidth:1,
  663. 									lineStyle: {
  664. 										type: 'solid',
  665. 										shadowBlur: 10
  666. 									}
  667. 								}
  668. 							},
  669. 							data : [
  670. 								[{name:'广州'},{name:'福州',value:95}],
  671. 								[{name:'广州'},{name:'太原',value:90}],
  672. 								[{name:'广州'},{name:'长春',value:80}],
  673. 								[{name:'广州'},{name:'重庆',value:70}],
  674. 								[{name:'广州'},{name:'西安',value:60}],
  675. 								[{name:'广州'},{name:'成都',value:50}],
  676. 								[{name:'广州'},{name:'常州',value:40}],
  677. 								[{name:'广州'},{name:'北京',value:30}],
  678. 								[{name:'广州'},{name:'北海',value:20}],
  679. 								[{name:'广州'},{name:'海口',value:10}]
  680. 							]
  681. 						},
  682. 						markPoint : {
  683. 							symbol:'emptyCircle',
  684. 							symbolSize : function (v){
  685. 								return 10 + v/10
  686. 							},
  687. 							effect : {
  688. 								show: true,
  689. 								shadowBlur : 0
  690. 							},
  691. 							itemStyle:{
  692. 								normal:{
  693. 									label:{show:false}
  694. 								},
  695. 								emphasis: {
  696. 									label:{position:'top'}
  697. 								}
  698. 							},
  699. 							data : [
  700. 								{name:'福州',value:95},
  701. 								{name:'太原',value:90},
  702. 								{name:'长春',value:80},
  703. 								{name:'重庆',value:70},
  704. 								{name:'西安',value:60},
  705. 								{name:'成都',value:50},
  706. 								{name:'常州',value:40},
  707. 								{name:'北京',value:30},
  708. 								{name:'北海',value:20},
  709. 								{name:'海口',value:10}
  710. 							]
  711. 						}
  712. 					}
  713. 				]
  714. 			};
  715. 			require([
  716. 				'echarts',
  717. 				'echarts/chart/map'
  718. 			], function (echart) {
  719. 				echartlayer = new OpenLayers.Layer.EchartLayer("echartlayer",map,echart,{
  720. 					option:option
  721. 				});
  722. 				map.addLayer(echartlayer);
  723. 				echartlayer.updateLayer();
  724. 			});
  725. 		}
  726. 	</script>
  727. </head>
  728. <body οnlοad="init()">
  729. <div id="map">
  730. </div>
  731. </body>
  732. </html>


查看示例


传播GIS知识 | 交流GIS经验 | 分享GIS价值 | 专注GIS发展

技术博客

http://blog.csdn.net/gisshixisheng

在线教程

http://edu.csdn.net/course/detail/799
Github

https://github.com/lzugis/

联系方式

q       q:1004740957

e-mail:niujp08@qq.com

公众号:lzugis15

Q Q 群:452117357(webgis)
             337469080(Android)




转载于:https://www.cnblogs.com/lzugis/p/6539773.html

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

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

  

闽ICP备14008679号