chinadci / leaflet-echart · 提交

提交 6f49c8544d8954daf30bce9ccfcb92709363c726

作者 HT 黄涛
1 个父辈 31a778ac

support multi charts in one page

内嵌 并排对比
正在显示 9 个修改的文件 包含 2222 行增加 和 34 行删除
  1 +//LeafletEcharts Created by HuangTao.
  2 +(function(root, factory) {
  3 + if (typeof define === 'function' && define.amd) {
  4 + // AMD. Register as an anonymous module.
  5 + define(['leaflet'], factory);
  6 + } else if (typeof module === 'object' && module.exports) {
  7 + // Node. Does not work with strict CommonJS, but
  8 + // only CommonJS-like environments that support module.exports,
  9 + // like Node.
  10 + module.exports = factory(require('leaflet'), require('echarts'));
  11 + } else if (typeof root !== 'undefined' && root.L && root.echarts) {
  12 + // Browser globals (root is window)
  13 + LeafletEcharts = factory(L, echarts);
  14 + }
  15 +}(this, function(L, echarts) {
  16 + var LeafletMap; //Leaflet Map
  17 + var EchartInstance; //Echart Instance
  18 +
  19 + //define LMapModel
  20 + var LMapModel = echarts.extendComponentModel({
  21 + type: 'lmap',
  22 +
  23 + defaultOption: {
  24 + mapOptions : {
  25 + center: [37.550339,104.114129],
  26 + zoom: 5
  27 + }
  28 + }
  29 + });
  30 +
  31 + //define LMapView
  32 + var LMapView = echarts.extendComponentView({
  33 + type: 'lmap',
  34 +
  35 + render: function (lMapModel, ecModel, api) {
  36 + }
  37 + });
  38 +
  39 + //define EchartLayer
  40 + L.EchartLayer = L.Class.extend({
  41 + includes:[L.Mixin.Events],
  42 + _echartsContainer:null,
  43 + _map:null,
  44 + _ec:null,
  45 + _ecModel:null,
  46 + _resizing:false,
  47 +
  48 + initialize:function(ec, root) {
  49 + this._ec = ec;
  50 + this._echartsContainer= root ? root: ec.getDom();
  51 + },
  52 +
  53 + getMap: function() {
  54 + return this._map;
  55 + },
  56 +
  57 + setModel:function(ecModel) {
  58 + this._ecModel = ecModel;
  59 + },
  60 +
  61 + onAdd: function (map) {
  62 + this._map = map;
  63 + var size = map.getSize();
  64 +
  65 + map.getPanes().overlayPane.appendChild(this._echartsContainer);
  66 +
  67 + map.on('moveend', this._moveend, this);
  68 + map.on('resize', this._resize, this);
  69 + },
  70 +
  71 + _resize:function() {
  72 + var domPosition = this._map._getMapPanePos();
  73 + this._mapOffset = [-parseInt(domPosition.x) || 0, -parseInt(domPosition.y) || 0];
  74 + this._echartsContainer.style.left = this._mapOffset[0] + 'px';
  75 + this._echartsContainer.style.top = this._mapOffset[1] + 'px';
  76 + var size = this._map.getSize();
  77 + this._echartsContainer.style.height = size.y + 'px';
  78 + this._echartsContainer.style.width = size.x + 'px';
  79 + //resize over will moveend;
  80 + this._resizing=true;
  81 + },
  82 +
  83 +
  84 + _moveend : function() {
  85 + var domPosition = this._map._getMapPanePos();
  86 + this._mapOffset = [-parseInt(domPosition.x) || 0, -parseInt(domPosition.y) || 0];
  87 + this._echartsContainer.style.left = this._mapOffset[0] + 'px';
  88 + this._echartsContainer.style.top = this._mapOffset[1] + 'px';
  89 + if (this._resizing == true)
  90 + {
  91 + this._resizing = false;
  92 + this._ec.resize();
  93 + } else {
  94 + this._ec.dispatchAction({
  95 + type: 'mapMoveEnd'
  96 + });
  97 + }
  98 + },
  99 +
  100 + onRemove: function (map) {
  101 + // remove layer's DOM elements and listeners
  102 + map.getPanes().overlayPane.removeChild(this._root);
  103 + map.off('viewreset', this._viewreset, this);
  104 + map.off('resize', this._resize, this);
  105 + }
  106 +
  107 + });
  108 +
  109 +
  110 + function LMapCoordSys(lmap, api) {
  111 + this._lmap = lmap;
  112 + this.dimensions = ['lng', 'lat'];
  113 + this._mapOffset = [0, 0];
  114 +
  115 + this._api = api;
  116 + }
  117 +
  118 + LMapCoordSys.prototype.dimensions = ['lng', 'lat'];
  119 +
  120 + LMapCoordSys.prototype.setMapOffset = function (mapOffset) {
  121 + this._mapOffset = mapOffset;
  122 + };
  123 +
  124 + LMapCoordSys.prototype.getLMap = function () {
  125 + return this._lmap;
  126 + };
  127 +
  128 + LMapCoordSys.prototype.dataToPoint = function (data) {
  129 + var point = new L.latLng(data[1], data[0]);
  130 + // TODO pointToOverlayPixel is toooooooo slow, cache the transform
  131 + var px = this._lmap.latLngToContainerPoint(point);
  132 + var mapOffset = this._mapOffset;
  133 + return [px.x - mapOffset[0], px.y - mapOffset[1]];
  134 + };
  135 +
  136 + LMapCoordSys.prototype.pointToData = function (pt) {
  137 + var mapOffset = this._mapOffset;
  138 + var pt = this._lmap.containerPointToLatLng({
  139 + x: pt[0] + mapOffset[0],
  140 + y: pt[1] + mapOffset[1]
  141 + });
  142 + return [pt.lat, pt.lng];
  143 + };
  144 +
  145 + LMapCoordSys.prototype.getViewRect = function () {
  146 + var api = this._api;
  147 + return new echarts.graphic.BoundingRect(0, 0, api.getWidth(), api.getHeight());
  148 + };
  149 +
  150 + LMapCoordSys.prototype.getRoamTransform = function () {
  151 + return echarts.matrix.create();
  152 + };
  153 +
  154 + // For deciding which dimensions to use when creating list data
  155 + LMapCoordSys.dimensions = LMapCoordSys.prototype.dimensions;
  156 +
  157 + var OverLayer;
  158 + LMapCoordSys.create = function (ecModel, api) {
  159 + var lmapCoordSys;
  160 +
  161 + ecModel.eachComponent('lmap', function (lmapModel) {
  162 + if (lmapCoordSys) {
  163 + throw new Error('Only one lmap component can exist');
  164 + }
  165 +
  166 + var viewportRoot;
  167 + if (!LeafletMap) {
  168 + var root = api.getDom();
  169 + viewportRoot = api.getZr().painter.getViewportRoot();
  170 + if (typeof L === 'undefined') {
  171 + throw new Error('LMap api is not loaded');
  172 + }
  173 + var root = api.getDom();
  174 + // Not support IE8
  175 + var lmapRoot = root.querySelector('.ec-extension-lmap');
  176 + if (lmapRoot) {
  177 + // Reset viewport left and top, which will be changed
  178 + // in moving handler in BMapView
  179 + viewportRoot.style.left = '0px';
  180 + viewportRoot.style.top = '0px';
  181 + root.removeChild(lmapRoot);
  182 + }
  183 + lmapRoot = document.createElement('div');
  184 + lmapRoot.style.cssText = 'width:100%;height:100%';
  185 + // Not support IE8
  186 + lmapRoot.classList.add('ec-extension-lmap');
  187 + root.appendChild(lmapRoot);
  188 + var opts = lmapModel.get('mapOptions');
  189 + LeafletMap = lmapModel.__lmap = new L.map(lmapRoot, opts);
  190 + }
  191 +
  192 + if (!OverLayer)
  193 + {
  194 + var overlayer = OverLayer = new L.EchartLayer(EchartInstance, viewportRoot);
  195 + LeafletMap.addLayer(overlayer);
  196 + }
  197 + OverLayer.setModel(lmapModel);
  198 +
  199 + lmapCoordSys = new LMapCoordSys(LeafletMap, api);
  200 + lmapCoordSys.setMapOffset(lmapModel.__mapOffset || [0, 0]);
  201 + lmapModel.coordinateSystem = lmapCoordSys;
  202 + });
  203 +
  204 + ecModel.eachComponent('geo', function (geoModel) {
  205 + if (!lmapCoordSys) {
  206 + lmapCoordSys = new LMapCoordSys(LeafletMap, api);
  207 + lmapCoordSys.setMapOffset(geoModel.__mapOffset || [0, 0]);
  208 + }
  209 +
  210 + if (!OverLayer)
  211 + {
  212 + var overlayer = OverLayer = new L.EchartLayer(EchartInstance);
  213 + LeafletMap.addLayer(overlayer);
  214 + }
  215 + OverLayer.setModel(geoModel);
  216 + });
  217 +
  218 + ecModel.eachSeries(function (seriesModel) {
  219 + var coordSys = seriesModel.get('coordinateSystem');
  220 + //series Lines only support geo coordSys;
  221 + if (coordSys === 'geo' || coordSys === 'lmap') {
  222 + seriesModel.coordinateSystem = lmapCoordSys;
  223 + }
  224 + });
  225 +
  226 + };
  227 +
  228 + //register lmap coordinateSystem
  229 + echarts.registerCoordinateSystem(
  230 + 'lmap', LMapCoordSys
  231 + );
  232 +
  233 + //register map moveend Action to UpdateLayout
  234 + echarts.registerAction({
  235 + type: 'mapMoveEnd',
  236 + event: 'mapMoveEnd',
  237 + update: 'updateLayout'
  238 + }, function (payload, ecModel) {
  239 + ecModel.eachComponent('lmap', function (lmapModel) {
  240 + });
  241 + });
  242 +
  243 + return {
  244 + //init leaflet map, return map
  245 + initMap : function(id, options) {
  246 + var map = LeafletMap = L.map(id, options);
  247 + var div = document.createElement('div');
  248 + var size = map.getSize();
  249 + div.style.position = "absolute";
  250 + div.style.height = size.y + 'px';
  251 + div.style.width = size.x + 'px';
  252 + div.style.top = 0;
  253 + div.style.left = 0;
  254 + var ec = EchartInstance = echarts.init(div);
  255 + return map;
  256 + },
  257 + //get echart instance
  258 + getEcharts:function() {
  259 + return EchartInstance;
  260 + },
  261 + //get leaflet Layer for echart
  262 + getEchartLayer:function() {
  263 + return OverLayer;
  264 + },
  265 + getLMap:function() {
  266 + return LeafletMap;
  267 + },
  268 + initEcharts:function(dom) {
  269 + var ec = EchartInstance = echarts.init(dom);
  270 + return ec;
  271 + }
  272 + };
  273 +
  274 +}));
  1 +!function(e,t){"function"==typeof define&&define.amd?define(["leaflet"],t):"object"==typeof module&&module.exports?module.exports=t(require("leaflet"),require("echarts")):"undefined"!=typeof e&&e.L&&e.echarts&&(LeafletEcharts=t(L,echarts))}(this,function(e,t){function n(e,t){this._lmap=e,this.dimensions=["lng","lat"],this._mapOffset=[0,0],this._api=t}var i,a;t.extendComponentModel({type:"lmap",defaultOption:{mapOptions:{center:[37.550339,104.114129],zoom:5}}}),t.extendComponentView({type:"lmap",render:function(e,t,n){}});e.EchartLayer=e.Class.extend({includes:[e.Mixin.Events],_echartsContainer:null,_map:null,_ec:null,_ecModel:null,_resizing:!1,initialize:function(e,t){this._ec=e,this._echartsContainer=t?t:e.getDom()},getMap:function(){return this._map},setModel:function(e){this._ecModel=e},onAdd:function(e){this._map=e;e.getSize();e.getPanes().overlayPane.appendChild(this._echartsContainer),e.on("moveend",this._moveend,this),e.on("resize",this._resize,this)},_resize:function(){var e=this._map._getMapPanePos();this._mapOffset=[-parseInt(e.x)||0,-parseInt(e.y)||0],this._echartsContainer.style.left=this._mapOffset[0]+"px",this._echartsContainer.style.top=this._mapOffset[1]+"px";var t=this._map.getSize();this._echartsContainer.style.height=t.y+"px",this._echartsContainer.style.width=t.x+"px",this._resizing=!0},_moveend:function(){var e=this._map._getMapPanePos();this._mapOffset=[-parseInt(e.x)||0,-parseInt(e.y)||0],this._echartsContainer.style.left=this._mapOffset[0]+"px",this._echartsContainer.style.top=this._mapOffset[1]+"px",1==this._resizing?(this._resizing=!1,this._ec.resize()):this._ec.dispatchAction({type:"mapMoveEnd"})},onRemove:function(e){e.getPanes().overlayPane.removeChild(this._root),e.off("viewreset",this._viewreset,this),e.off("resize",this._resize,this)}}),n.prototype.dimensions=["lng","lat"],n.prototype.setMapOffset=function(e){this._mapOffset=e},n.prototype.getLMap=function(){return this._lmap},n.prototype.dataToPoint=function(t){var n=new e.latLng(t[1],t[0]),i=this._lmap.latLngToContainerPoint(n),a=this._mapOffset;return[i.x-a[0],i.y-a[1]]},n.prototype.pointToData=function(e){var t=this._mapOffset,e=this._lmap.containerPointToLatLng({x:e[0]+t[0],y:e[1]+t[1]});return[e.lat,e.lng]},n.prototype.getViewRect=function(){var e=this._api;return new t.graphic.BoundingRect(0,0,e.getWidth(),e.getHeight())},n.prototype.getRoamTransform=function(){return t.matrix.create()},n.dimensions=n.prototype.dimensions;var o;return n.create=function(t,s){var r;t.eachComponent("lmap",function(t){if(r)throw new Error("Only one lmap component can exist");var p;if(!i){var h=s.getDom();if(p=s.getZr().painter.getViewportRoot(),"undefined"==typeof e)throw new Error("LMap api is not loaded");var h=s.getDom(),f=h.querySelector(".ec-extension-lmap");f&&(p.style.left="0px",p.style.top="0px",h.removeChild(f)),f=document.createElement("div"),f.style.cssText="width:100%;height:100%",f.classList.add("ec-extension-lmap"),h.appendChild(f);var c=t.get("mapOptions");i=t.__lmap=new e.map(f,c)}if(!o){var l=o=new e.EchartLayer(a,p);i.addLayer(l)}o.setModel(t),r=new n(i,s),r.setMapOffset(t.__mapOffset||[0,0]),t.coordinateSystem=r}),t.eachComponent("geo",function(t){if(r||(r=new n(i,s),r.setMapOffset(t.__mapOffset||[0,0])),!o){var p=o=new e.EchartLayer(a);i.addLayer(p)}o.setModel(t)}),t.eachSeries(function(e){var t=e.get("coordinateSystem");"geo"!==t&&"lmap"!==t||(e.coordinateSystem=r)})},t.registerCoordinateSystem("lmap",n),t.registerAction({type:"mapMoveEnd",event:"mapMoveEnd",update:"updateLayout"},function(e,t){t.eachComponent("lmap",function(e){})}),{initMap:function(n,o){var s=i=e.map(n,o),r=document.createElement("div"),p=s.getSize();r.style.position="absolute",r.style.height=p.y+"px",r.style.width=p.x+"px",r.style.top=0,r.style.left=0;a=t.init(r);return s},getEcharts:function(){return a},getEchartLayer:function(){return o},getLMap:function(){return i},initEcharts:function(e){var n=a=t.init(e);return n}}});
  1 +<!DOCTYPE html>
  2 +<html lang="en">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <title>Leaflet 加载 Echarts3</title>
  6 + <link rel="stylesheet" href="../libs/leaflet/dist/leaflet.css">
  7 + <style>
  8 + html, body, #map, #ee {
  9 + height: 100%;
  10 + padding: 0;
  11 + margin: 0;
  12 + }
  13 + #forkongithub a{background:#000;color:#fff;text-decoration:none;font-family:arial,sans-serif;text-align:center;font-weight:bold;padding:5px 40px;font-size:1rem;line-height:2rem;position:relative;transition:0.5s;}#forkongithub a:hover{background:#c11;color:#fff;}#forkongithub a::before,#forkongithub a::after{content:"";width:100%;display:block;position:absolute;top:1px;left:0;height:1px;background:#fff;}#forkongithub a::after{bottom:1px;top:auto;}@media screen and (min-width:800px){#forkongithub{position:fixed;display:block;top:0;right:0;width:200px;overflow:hidden;height:200px;z-index:9999;}#forkongithub a{width:200px;position:absolute;top:60px;right:-60px;transform:rotate(45deg);-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);box-shadow:4px 4px 10px rgba(0,0,0,0.8);}}</style>
  14 +</head>
  15 +<body>
  16 +<span id="forkongithub"><a href="http://gitlab.ctune.cn/chinadci/leaflet-echart">Fork me on Gitlab</a></span>
  17 +<div id="ee"><div id="map"></div></div>
  18 +
  19 +<script src="../libs/echarts/dist/echarts.min.js"></script>
  20 +<script src="../libs/leaflet/dist/leaflet.js"></script>
  21 +<script src="../libs/jquery/dist/jquery.min.js"></script>
  22 +<script src="../src/leaflet-echarts3.js"></script>
  23 +<script>
  24 +
  25 + var echarts = LeafletEcharts.initEcharts(document.getElementById("map"));//('map');
  26 +
  27 + //var echarts = leafletEcharts1.getEcharts();
  28 +
  29 + var geoCoordMap = {
  30 + '上海': [121.4648, 31.2891],
  31 + '东莞': [113.8953, 22.901],
  32 + '东营': [118.7073, 37.5513],
  33 + '中山': [113.4229, 22.478],
  34 + '临汾': [111.4783, 36.1615],
  35 + '临沂': [118.3118, 35.2936],
  36 + '丹东': [124.541, 40.4242],
  37 + '丽水': [119.5642, 28.1854],
  38 + '乌鲁木齐': [87.9236, 43.5883],
  39 + '佛山': [112.8955, 23.1097],
  40 + '保定': [115.0488, 39.0948],
  41 + '兰州': [103.5901, 36.3043],
  42 + '包头': [110.3467, 41.4899],
  43 + '北京': [116.4551, 40.2539],
  44 + '北海': [109.314, 21.6211],
  45 + '南京': [118.8062, 31.9208],
  46 + '南宁': [108.479, 23.1152],
  47 + '南昌': [116.0046, 28.6633],
  48 + '南通': [121.1023, 32.1625],
  49 + '厦门': [118.1689, 24.6478],
  50 + '台州': [121.1353, 28.6688],
  51 + '合肥': [117.29, 32.0581],
  52 + '呼和浩特': [111.4124, 40.4901],
  53 + '咸阳': [108.4131, 34.8706],
  54 + '哈尔滨': [127.9688, 45.368],
  55 + '唐山': [118.4766, 39.6826],
  56 + '嘉兴': [120.9155, 30.6354],
  57 + '大同': [113.7854, 39.8035],
  58 + '大连': [122.2229, 39.4409],
  59 + '天津': [117.4219, 39.4189],
  60 + '太原': [112.3352, 37.9413],
  61 + '威海': [121.9482, 37.1393],
  62 + '宁波': [121.5967, 29.6466],
  63 + '宝鸡': [107.1826, 34.3433],
  64 + '宿迁': [118.5535, 33.7775],
  65 + '常州': [119.4543, 31.5582],
  66 + '广州': [113.5107, 23.2196],
  67 + '廊坊': [116.521, 39.0509],
  68 + '延安': [109.1052, 36.4252],
  69 + '张家口': [115.1477, 40.8527],
  70 + '徐州': [117.5208, 34.3268],
  71 + '德州': [116.6858, 37.2107],
  72 + '惠州': [114.6204, 23.1647],
  73 + '成都': [103.9526, 30.7617],
  74 + '扬州': [119.4653, 32.8162],
  75 + '承德': [117.5757, 41.4075],
  76 + '拉萨': [91.1865, 30.1465],
  77 + '无锡': [120.3442, 31.5527],
  78 + '日照': [119.2786, 35.5023],
  79 + '昆明': [102.9199, 25.4663],
  80 + '杭州': [119.5313, 29.8773],
  81 + '枣庄': [117.323, 34.8926],
  82 + '柳州': [109.3799, 24.9774],
  83 + '株洲': [113.5327, 27.0319],
  84 + '武汉': [114.3896, 30.6628],
  85 + '汕头': [117.1692, 23.3405],
  86 + '江门': [112.6318, 22.1484],
  87 + '沈阳': [123.1238, 42.1216],
  88 + '沧州': [116.8286, 38.2104],
  89 + '河源': [114.917, 23.9722],
  90 + '泉州': [118.3228, 25.1147],
  91 + '泰安': [117.0264, 36.0516],
  92 + '泰州': [120.0586, 32.5525],
  93 + '济南': [117.1582, 36.8701],
  94 + '济宁': [116.8286, 35.3375],
  95 + '海口': [110.3893, 19.8516],
  96 + '淄博': [118.0371, 36.6064],
  97 + '淮安': [118.927, 33.4039],
  98 + '深圳': [114.5435, 22.5439],
  99 + '清远': [112.9175, 24.3292],
  100 + '温州': [120.498, 27.8119],
  101 + '渭南': [109.7864, 35.0299],
  102 + '湖州': [119.8608, 30.7782],
  103 + '湘潭': [112.5439, 27.7075],
  104 + '滨州': [117.8174, 37.4963],
  105 + '潍坊': [119.0918, 36.524],
  106 + '烟台': [120.7397, 37.5128],
  107 + '玉溪': [101.9312, 23.8898],
  108 + '珠海': [113.7305, 22.1155],
  109 + '盐城': [120.2234, 33.5577],
  110 + '盘锦': [121.9482, 41.0449],
  111 + '石家庄': [114.4995, 38.1006],
  112 + '福州': [119.4543, 25.9222],
  113 + '秦皇岛': [119.2126, 40.0232],
  114 + '绍兴': [120.564, 29.7565],
  115 + '聊城': [115.9167, 36.4032],
  116 + '肇庆': [112.1265, 23.5822],
  117 + '舟山': [122.2559, 30.2234],
  118 + '苏州': [120.6519, 31.3989],
  119 + '莱芜': [117.6526, 36.2714],
  120 + '菏泽': [115.6201, 35.2057],
  121 + '营口': [122.4316, 40.4297],
  122 + '葫芦岛': [120.1575, 40.578],
  123 + '衡水': [115.8838, 37.7161],
  124 + '衢州': [118.6853, 28.8666],
  125 + '西宁': [101.4038, 36.8207],
  126 + '西安': [109.1162, 34.2004],
  127 + '贵阳': [106.6992, 26.7682],
  128 + '连云港': [119.1248, 34.552],
  129 + '邢台': [114.8071, 37.2821],
  130 + '邯郸': [114.4775, 36.535],
  131 + '郑州': [113.4668, 34.6234],
  132 + '鄂尔多斯': [108.9734, 39.2487],
  133 + '重庆': [107.7539, 30.1904],
  134 + '金华': [120.0037, 29.1028],
  135 + '铜川': [109.0393, 35.1947],
  136 + '银川': [106.3586, 38.1775],
  137 + '镇江': [119.4763, 31.9702],
  138 + '长春': [125.8154, 44.2584],
  139 + '长沙': [113.0823, 28.2568],
  140 + '长治': [112.8625, 36.4746],
  141 + '阳泉': [113.4778, 38.0951],
  142 + '青岛': [120.4651, 36.3373],
  143 + '韶关': [113.7964, 24.7028]
  144 + };
  145 +
  146 + var BJData = [
  147 + [{name: '北京'}, {name: '上海', value: 95}],
  148 + [{name: '北京'}, {name: '广州', value: 90}],
  149 + [{name: '北京'}, {name: '大连', value: 80}],
  150 + [{name: '北京'}, {name: '南宁', value: 70}],
  151 + [{name: '北京'}, {name: '南昌', value: 60}],
  152 + [{name: '北京'}, {name: '拉萨', value: 50}],
  153 + [{name: '北京'}, {name: '长春', value: 40}],
  154 + [{name: '北京'}, {name: '包头', value: 30}],
  155 + [{name: '北京'}, {name: '重庆', value: 20}],
  156 + [{name: '北京'}, {name: '常州', value: 10}]
  157 + ];
  158 +
  159 + var SHData = [
  160 + [{name: '上海'}, {name: '包头', value: 95}],
  161 + [{name: '上海'}, {name: '昆明', value: 90}],
  162 + [{name: '上海'}, {name: '广州', value: 80}],
  163 + [{name: '上海'}, {name: '郑州', value: 70}],
  164 + [{name: '上海'}, {name: '长春', value: 60}],
  165 + [{name: '上海'}, {name: '重庆', value: 50}],
  166 + [{name: '上海'}, {name: '长沙', value: 40}],
  167 + [{name: '上海'}, {name: '北京', value: 30}],
  168 + [{name: '上海'}, {name: '丹东', value: 20}],
  169 + [{name: '上海'}, {name: '大连', value: 10}]
  170 + ];
  171 +
  172 + var GZData = [
  173 + [{name: '广州'}, {name: '福州', value: 95}],
  174 + [{name: '广州'}, {name: '太原', value: 90}],
  175 + [{name: '广州'}, {name: '长春', value: 80}],
  176 + [{name: '广州'}, {name: '重庆', value: 70}],
  177 + [{name: '广州'}, {name: '西安', value: 60}],
  178 + [{name: '广州'}, {name: '成都', value: 50}],
  179 + [{name: '广州'}, {name: '常州', value: 40}],
  180 + [{name: '广州'}, {name: '北京', value: 30}],
  181 + [{name: '广州'}, {name: '北海', value: 20}],
  182 + [{name: '广州'}, {name: '海口', value: 10}]
  183 + ];
  184 +
  185 + var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
  186 +
  187 + var convertData = function (data) {
  188 + var res = [];
  189 + for (var i = 0; i < data.length; i++) {
  190 + var dataItem = data[i];
  191 + var fromCoord = geoCoordMap[dataItem[0].name];
  192 + var toCoord = geoCoordMap[dataItem[1].name];
  193 + if (fromCoord && toCoord) {
  194 + res.push([{
  195 + coord: fromCoord
  196 + }, {
  197 + coord: toCoord
  198 + }]);
  199 + }
  200 + }
  201 + return res;
  202 + };
  203 +
  204 + var color = ['#a6c84c', '#ffa022', '#46bee9'];
  205 + var series = [];
  206 + [['北京', BJData], ['上海', SHData], ['广州', GZData]].forEach(function (item, i) {
  207 + series.push({
  208 + name: item[0] + ' Top10',
  209 + type: 'lines',
  210 + zlevel: 1,
  211 + effect: {
  212 + show: true,
  213 + period: 6,
  214 + trailLength: 0.7,
  215 + color: '#fff',
  216 + symbolSize: 3
  217 + },
  218 + lineStyle: {
  219 + normal: {
  220 + color: color[i],
  221 + width: 0,
  222 + curveness: 0.2
  223 + }
  224 + },
  225 + data: convertData(item[1])
  226 + },
  227 + {
  228 + name: item[0] + ' Top10',
  229 + type: 'lines',
  230 + zlevel: 2,
  231 + effect: {
  232 + show: true,
  233 + period: 6,
  234 + trailLength: 0,
  235 + symbol: planePath,
  236 + symbolSize: 15
  237 + },
  238 + lineStyle: {
  239 + normal: {
  240 + color: color[i],
  241 + width: 1,
  242 + opacity: 0.4,
  243 + curveness: 0.2
  244 + }
  245 + },
  246 + data: convertData(item[1])
  247 + },
  248 + {
  249 + name: item[0] + ' Top10',
  250 + type: 'effectScatter',
  251 + coordinateSystem: 'geo',
  252 + zlevel: 2,
  253 + rippleEffect: {
  254 + brushType: 'stroke'
  255 + },
  256 + label: {
  257 + normal: {
  258 + show: true,
  259 + position: 'right',
  260 + formatter: '{b}'
  261 + }
  262 + },
  263 + symbolSize: function (val) {
  264 + return val[2] / 8;
  265 + },
  266 + itemStyle: {
  267 + normal: {
  268 + color: color[i]
  269 + }
  270 + },
  271 + data: item[1].map(function (dataItem) {
  272 + return {
  273 + name: dataItem[1].name,
  274 + value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
  275 + };
  276 + })
  277 + });
  278 + });
  279 +
  280 +
  281 + option = {
  282 +// backgroundColor: '#404a59',
  283 + title: {
  284 + text: 'Leaflet扩展Echarts3之模拟迁徙',
  285 + subtext: 'Develop By HuangTao',
  286 + left: 'center',
  287 + textStyle: {
  288 + color: '#fff'
  289 + }
  290 + },
  291 + tooltip: {
  292 + trigger: 'item'
  293 + },
  294 + legend: {
  295 + orient: 'vertical',
  296 + top: 'bottom',
  297 + left: 'right',
  298 + data: ['北京 Top10', '上海 Top10', '广州 Top10'],
  299 + textStyle: {
  300 + color: '#fff'
  301 + },
  302 + selectedMode: 'single'
  303 + },
  304 + lmap: {
  305 +
  306 + },
  307 + series: series
  308 + };
  309 + // 使用刚指定的配置项和数据显示图表。
  310 + echarts.setOption(option);
  311 +
  312 + var map = echarts.getMap();
  313 + var baseLayers = {
  314 + "高德地图": L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
  315 + subdomains: "1234"
  316 + }),
  317 + '高德影像': L.layerGroup([L.tileLayer('http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
  318 + subdomains: "1234"
  319 + }), L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=cta_w&X={x}&Y={y}&L={z}', {
  320 + subdomains: "1234"
  321 + })]),
  322 + "立体地图": L.tileLayer('https://a.tiles.mapbox.com/v3/examples.c7d2024a/{z}/{x}/{y}.png', {
  323 + attribution: 'Map &copy; Pacific Rim Coordination Center (PRCC). Certain data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
  324 + key: 'BC9A493B41014CAABB98F0471D759707',
  325 + styleId: 22677
  326 + }),
  327 + "Foursquare": L.tileLayer('https://a.tiles.mapbox.com/v3/foursquare.map-0y1jh28j/{z}/{x}/{y}.png', {
  328 + attribution: 'Map &copy; Pacific Rim Coordination Center (PRCC). Certain data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
  329 + key: 'BC9A493B41014CAABB98F0471D759707',
  330 + styleId: 22677
  331 + }),
  332 + 'GeoQ灰色底图': L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}').addTo(map)
  333 + };
  334 + L.tileLayer('https://a.tiles.mapbox.com/v3/foursquare.map-0y1jh28j/{z}/{x}/{y}.png', {
  335 + attribution: 'Map &copy; Pacific Rim Coordination Center (PRCC). Certain data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
  336 + key: 'BC9A493B41014CAABB98F0471D759707',
  337 + styleId: 22677
  338 + });
  339 + var layercontrol = L.control.layers(baseLayers,{}, {
  340 + position: "topleft"
  341 + }).addTo(map);
  342 + map.setView(L.latLng(37.550339, 104.114129), 4);
  343 +</script>
  344 +</body>
  345 +</html>
@@ -20,7 +20,9 @@ @@ -20,7 +20,9 @@
20 <script src="../libs/jquery/dist/jquery.min.js"></script> 20 <script src="../libs/jquery/dist/jquery.min.js"></script>
21 <script src="../src/leaflet-echarts3.js"></script> 21 <script src="../src/leaflet-echarts3.js"></script>
22 <script> 22 <script>
23 - var map = LeafletEcharts.initMap('map'); 23 +
  24 + var le = LeafletEcharts.initMap('map');
  25 + var map = le.getMap();
24 var baseLayers = { 26 var baseLayers = {
25 "高德地图": L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', { 27 "高德地图": L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
26 subdomains: "1234" 28 subdomains: "1234"
@@ -52,7 +54,7 @@ @@ -52,7 +54,7 @@
52 }).addTo(map); 54 }).addTo(map);
53 map.setView(L.latLng(37.550339, 104.114129), 4); 55 map.setView(L.latLng(37.550339, 104.114129), 4);
54 56
55 - var myChart = LeafletEcharts.getEcharts(); 57 + var myChart = le.getEcharts();
56 58
57 var data = [ 59 var data = [
58 {name: '海门', value: 9}, 60 {name: '海门', value: 9},
@@ -476,7 +478,7 @@ option = { @@ -476,7 +478,7 @@ option = {
476 color: '#fff' 478 color: '#fff'
477 } 479 }
478 }, 480 },
479 - lmap: { 481 + geo: {
480 482
481 }, 483 },
482 series : [ 484 series : [
@@ -539,6 +541,8 @@ option = { @@ -539,6 +541,8 @@ option = {
539 }; 541 };
540 // 使用刚指定的配置项和数据显示图表。 542 // 使用刚指定的配置项和数据显示图表。
541 myChart.setOption(option); 543 myChart.setOption(option);
  544 +
  545 + var layer = le.getEchartLayer();
542 </script> 546 </script>
543 </body> 547 </body>
544 </html> 548 </html>
  1 +<!DOCTYPE html>
  2 +<html lang="zh">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 + <title>Leaflet 加载 Echarts3</title>
  7 + <link rel="stylesheet" href="../libs/bootstrap/dist/css/bootstrap.css">
  8 + <link rel="stylesheet" href="../libs/leaflet/dist/leaflet.css">
  9 + <style>
  10 + #chart1 {height:480px;}
  11 + #chart2 {height:480px;}
  12 + </style>
  13 +</head>
  14 +<body>
  15 + <header>
  16 + <div class="navbar navbar-default navbar-static-top">
  17 + <div class="container">
  18 + <div class="navbar-header">
  19 + <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  20 + <span class="fa fa-bars"></span>
  21 + </button>
  22 + <a class="navbar-brand" href="index.html">Multi<span>Charts</span></a>
  23 + </div>
  24 + <div class="navbar-collapse collapse ">
  25 + <ul class="nav navbar-nav">
  26 + <li class="active"><a href="index.html">Home</a></li>
  27 + <li><a href="about.html">About</a></li>
  28 + <li><a href="services.html">Service</a></li>
  29 + </ul>
  30 + </div>
  31 + </div>
  32 + <div>
  33 + </header>
  34 +
  35 + <div class="container">
  36 + <div class="row">
  37 + <div class="col-lg-6 col-md-6">
  38 + <div class="panel panel-default">
  39 + <div class="panel-heading">
  40 + <h3 class="panel-title">Panel title</h3>
  41 + </div>
  42 + <div class="panel-body">
  43 + <div id="chart1"></div>
  44 + </div>
  45 + </div>
  46 + </div>
  47 + <div class="col-lg-6 col-md-6">
  48 + <div class="panel panel-default">
  49 + <div class="panel-heading">
  50 + <h3 class="panel-title">Panel title</h3>
  51 + </div>
  52 + <div class="panel-body">
  53 + <div id="chart2"></div>
  54 + </div>
  55 + </div>
  56 + </div>
  57 + </div>
  58 + </div>
  59 + <footer>
  60 + <div class="container">
  61 + <p>&copy; 2016 - HuangTao</p>
  62 + </div>
  63 + </footer>
  64 +
  65 + <script src="../libs/jquery/dist/jquery.min.js"></script>
  66 + <script src="../libs/bootstrap/dist/js/bootstrap.min.js"></script>
  67 + <script src="../libs/echarts/dist/echarts.min.js"></script>
  68 + <script src="../libs/leaflet/dist/leaflet.js"></script>
  69 + <script src="../src/leaflet-echarts3.js"></script>
  70 + <script>
  71 + var data1 = [
  72 + {name: '海门', value: 9},
  73 + {name: '鄂尔多斯', value: 12},
  74 + {name: '招远', value: 12},
  75 + {name: '舟山', value: 12},
  76 + {name: '齐齐哈尔', value: 14},
  77 + {name: '盐城', value: 15},
  78 + {name: '赤峰', value: 16},
  79 + {name: '青岛', value: 18},
  80 + {name: '乳山', value: 18},
  81 + {name: '金昌', value: 19},
  82 + {name: '泉州', value: 21},
  83 + {name: '莱西', value: 21},
  84 + {name: '日照', value: 21},
  85 + {name: '胶南', value: 22},
  86 + {name: '南通', value: 23},
  87 + {name: '拉萨', value: 24},
  88 + {name: '云浮', value: 24},
  89 + {name: '梅州', value: 25},
  90 + {name: '文登', value: 25},
  91 + {name: '上海', value: 25},
  92 + {name: '攀枝花', value: 25},
  93 + {name: '威海', value: 25},
  94 + {name: '承德', value: 25},
  95 + {name: '厦门', value: 26},
  96 + {name: '汕尾', value: 26},
  97 + {name: '潮州', value: 26},
  98 + {name: '丹东', value: 27},
  99 + {name: '太仓', value: 27},
  100 + {name: '曲靖', value: 27},
  101 + {name: '烟台', value: 28},
  102 + {name: '福州', value: 29},
  103 + {name: '瓦房店', value: 30},
  104 + {name: '即墨', value: 30},
  105 + {name: '抚顺', value: 31},
  106 + {name: '玉溪', value: 31},
  107 + {name: '张家口', value: 31},
  108 + {name: '阳泉', value: 31},
  109 + {name: '莱州', value: 32},
  110 + {name: '湖州', value: 32},
  111 + {name: '汕头', value: 32},
  112 + {name: '昆山', value: 33},
  113 + {name: '宁波', value: 33},
  114 + {name: '湛江', value: 33},
  115 + {name: '揭阳', value: 34},
  116 + {name: '荣成', value: 34},
  117 + {name: '连云港', value: 35},
  118 + {name: '葫芦岛', value: 35},
  119 + {name: '常熟', value: 36},
  120 + {name: '东莞', value: 36},
  121 + {name: '河源', value: 36},
  122 + {name: '淮安', value: 36},
  123 + {name: '泰州', value: 36},
  124 + {name: '南宁', value: 37},
  125 + {name: '营口', value: 37},
  126 + {name: '惠州', value: 37},
  127 + {name: '江阴', value: 37},
  128 + {name: '蓬莱', value: 37},
  129 + {name: '韶关', value: 38},
  130 + {name: '嘉峪关', value: 38},
  131 + {name: '广州', value: 38},
  132 + {name: '延安', value: 38},
  133 + {name: '太原', value: 39},
  134 + {name: '清远', value: 39},
  135 + {name: '中山', value: 39},
  136 + {name: '昆明', value: 39},
  137 + {name: '寿光', value: 40},
  138 + {name: '盘锦', value: 40},
  139 + {name: '长治', value: 41},
  140 + {name: '深圳', value: 41},
  141 + {name: '珠海', value: 42},
  142 + {name: '宿迁', value: 43},
  143 + {name: '咸阳', value: 43},
  144 + {name: '铜川', value: 44},
  145 + {name: '平度', value: 44},
  146 + {name: '佛山', value: 44},
  147 + {name: '海口', value: 44},
  148 + {name: '江门', value: 45},
  149 + {name: '章丘', value: 45},
  150 + {name: '肇庆', value: 46},
  151 + {name: '大连', value: 47},
  152 + {name: '临汾', value: 47},
  153 + {name: '吴江', value: 47},
  154 + {name: '石嘴山', value: 49},
  155 + {name: '沈阳', value: 50},
  156 + {name: '苏州', value: 50},
  157 + {name: '茂名', value: 50},
  158 + {name: '嘉兴', value: 51},
  159 + {name: '长春', value: 51},
  160 + {name: '胶州', value: 52},
  161 + {name: '银川', value: 52},
  162 + {name: '张家港', value: 52},
  163 + {name: '三门峡', value: 53},
  164 + {name: '锦州', value: 54},
  165 + {name: '南昌', value: 54},
  166 + {name: '柳州', value: 54},
  167 + {name: '三亚', value: 54},
  168 + {name: '自贡', value: 56},
  169 + {name: '吉林', value: 56},
  170 + {name: '阳江', value: 57},
  171 + {name: '泸州', value: 57},
  172 + {name: '西宁', value: 57},
  173 + {name: '宜宾', value: 58},
  174 + {name: '呼和浩特', value: 58},
  175 + {name: '成都', value: 58},
  176 + {name: '大同', value: 58},
  177 + {name: '镇江', value: 59},
  178 + {name: '桂林', value: 59},
  179 + {name: '张家界', value: 59},
  180 + {name: '宜兴', value: 59},
  181 + {name: '北海', value: 60},
  182 + {name: '西安', value: 61},
  183 + {name: '金坛', value: 62},
  184 + {name: '东营', value: 62},
  185 + {name: '牡丹江', value: 63},
  186 + {name: '遵义', value: 63},
  187 + {name: '绍兴', value: 63},
  188 + {name: '扬州', value: 64},
  189 + {name: '常州', value: 64},
  190 + {name: '潍坊', value: 65},
  191 + {name: '重庆', value: 66},
  192 + {name: '台州', value: 67},
  193 + {name: '南京', value: 67},
  194 + {name: '滨州', value: 70},
  195 + {name: '贵阳', value: 71},
  196 + {name: '无锡', value: 71},
  197 + {name: '本溪', value: 71},
  198 + {name: '克拉玛依', value: 72},
  199 + {name: '渭南', value: 72},
  200 + {name: '马鞍山', value: 72},
  201 + {name: '宝鸡', value: 72},
  202 + {name: '焦作', value: 75},
  203 + {name: '句容', value: 75},
  204 + {name: '北京', value: 79},
  205 + {name: '徐州', value: 79},
  206 + {name: '衡水', value: 80},
  207 + {name: '包头', value: 80},
  208 + {name: '绵阳', value: 80},
  209 + {name: '乌鲁木齐', value: 84},
  210 + {name: '枣庄', value: 84},
  211 + {name: '杭州', value: 84},
  212 + {name: '淄博', value: 85},
  213 + {name: '鞍山', value: 86},
  214 + {name: '溧阳', value: 86},
  215 + {name: '库尔勒', value: 86},
  216 + {name: '安阳', value: 90},
  217 + {name: '开封', value: 90},
  218 + {name: '济南', value: 92},
  219 + {name: '德阳', value: 93},
  220 + {name: '温州', value: 95},
  221 + {name: '九江', value: 96},
  222 + {name: '邯郸', value: 98},
  223 + {name: '临安', value: 99},
  224 + {name: '兰州', value: 99},
  225 + {name: '沧州', value: 100},
  226 + {name: '临沂', value: 103},
  227 + {name: '南充', value: 104},
  228 + {name: '天津', value: 105},
  229 + {name: '富阳', value: 106},
  230 + {name: '泰安', value: 112},
  231 + {name: '诸暨', value: 112},
  232 + {name: '郑州', value: 113},
  233 + {name: '哈尔滨', value: 114},
  234 + {name: '聊城', value: 116},
  235 + {name: '芜湖', value: 117},
  236 + {name: '唐山', value: 119},
  237 + {name: '平顶山', value: 119},
  238 + {name: '邢台', value: 119},
  239 + {name: '德州', value: 120},
  240 + {name: '济宁', value: 120},
  241 + {name: '荆州', value: 127},
  242 + {name: '宜昌', value: 130},
  243 + {name: '义乌', value: 132},
  244 + {name: '丽水', value: 133},
  245 + {name: '洛阳', value: 134},
  246 + {name: '秦皇岛', value: 136},
  247 + {name: '株洲', value: 143},
  248 + {name: '石家庄', value: 147},
  249 + {name: '莱芜', value: 148},
  250 + {name: '常德', value: 152},
  251 + {name: '保定', value: 153},
  252 + {name: '湘潭', value: 154},
  253 + {name: '金华', value: 157},
  254 + {name: '岳阳', value: 169},
  255 + {name: '长沙', value: 175},
  256 + {name: '衢州', value: 177},
  257 + {name: '廊坊', value: 193},
  258 + {name: '菏泽', value: 194},
  259 + {name: '合肥', value: 229},
  260 + {name: '武汉', value: 273},
  261 + {name: '大庆', value: 279}
  262 + ];
  263 + var geoCoordMap = {
  264 + '上海': [121.4648, 31.2891],
  265 + '东莞': [113.8953, 22.901],
  266 + '东营': [118.7073, 37.5513],
  267 + '中山': [113.4229, 22.478],
  268 + '临汾': [111.4783, 36.1615],
  269 + '临沂': [118.3118, 35.2936],
  270 + '丹东': [124.541, 40.4242],
  271 + '丽水': [119.5642, 28.1854],
  272 + '乌鲁木齐': [87.9236, 43.5883],
  273 + '佛山': [112.8955, 23.1097],
  274 + '保定': [115.0488, 39.0948],
  275 + '兰州': [103.5901, 36.3043],
  276 + '包头': [110.3467, 41.4899],
  277 + '北京': [116.4551, 40.2539],
  278 + '北海': [109.314, 21.6211],
  279 + '南京': [118.8062, 31.9208],
  280 + '南宁': [108.479, 23.1152],
  281 + '南昌': [116.0046, 28.6633],
  282 + '南通': [121.1023, 32.1625],
  283 + '厦门': [118.1689, 24.6478],
  284 + '台州': [121.1353, 28.6688],
  285 + '合肥': [117.29, 32.0581],
  286 + '呼和浩特': [111.4124, 40.4901],
  287 + '咸阳': [108.4131, 34.8706],
  288 + '哈尔滨': [127.9688, 45.368],
  289 + '唐山': [118.4766, 39.6826],
  290 + '嘉兴': [120.9155, 30.6354],
  291 + '大同': [113.7854, 39.8035],
  292 + '大连': [122.2229, 39.4409],
  293 + '天津': [117.4219, 39.4189],
  294 + '太原': [112.3352, 37.9413],
  295 + '威海': [121.9482, 37.1393],
  296 + '宁波': [121.5967, 29.6466],
  297 + '宝鸡': [107.1826, 34.3433],
  298 + '宿迁': [118.5535, 33.7775],
  299 + '常州': [119.4543, 31.5582],
  300 + '广州': [113.5107, 23.2196],
  301 + '廊坊': [116.521, 39.0509],
  302 + '延安': [109.1052, 36.4252],
  303 + '张家口': [115.1477, 40.8527],
  304 + '徐州': [117.5208, 34.3268],
  305 + '德州': [116.6858, 37.2107],
  306 + '惠州': [114.6204, 23.1647],
  307 + '成都': [103.9526, 30.7617],
  308 + '扬州': [119.4653, 32.8162],
  309 + '承德': [117.5757, 41.4075],
  310 + '拉萨': [91.1865, 30.1465],
  311 + '无锡': [120.3442, 31.5527],
  312 + '日照': [119.2786, 35.5023],
  313 + '昆明': [102.9199, 25.4663],
  314 + '杭州': [119.5313, 29.8773],
  315 + '枣庄': [117.323, 34.8926],
  316 + '柳州': [109.3799, 24.9774],
  317 + '株洲': [113.5327, 27.0319],
  318 + '武汉': [114.3896, 30.6628],
  319 + '汕头': [117.1692, 23.3405],
  320 + '江门': [112.6318, 22.1484],
  321 + '沈阳': [123.1238, 42.1216],
  322 + '沧州': [116.8286, 38.2104],
  323 + '河源': [114.917, 23.9722],
  324 + '泉州': [118.3228, 25.1147],
  325 + '泰安': [117.0264, 36.0516],
  326 + '泰州': [120.0586, 32.5525],
  327 + '济南': [117.1582, 36.8701],
  328 + '济宁': [116.8286, 35.3375],
  329 + '海口': [110.3893, 19.8516],
  330 + '淄博': [118.0371, 36.6064],
  331 + '淮安': [118.927, 33.4039],
  332 + '深圳': [114.5435, 22.5439],
  333 + '清远': [112.9175, 24.3292],
  334 + '温州': [120.498, 27.8119],
  335 + '渭南': [109.7864, 35.0299],
  336 + '湖州': [119.8608, 30.7782],
  337 + '湘潭': [112.5439, 27.7075],
  338 + '滨州': [117.8174, 37.4963],
  339 + '潍坊': [119.0918, 36.524],
  340 + '烟台': [120.7397, 37.5128],
  341 + '玉溪': [101.9312, 23.8898],
  342 + '珠海': [113.7305, 22.1155],
  343 + '盐城': [120.2234, 33.5577],
  344 + '盘锦': [121.9482, 41.0449],
  345 + '石家庄': [114.4995, 38.1006],
  346 + '福州': [119.4543, 25.9222],
  347 + '秦皇岛': [119.2126, 40.0232],
  348 + '绍兴': [120.564, 29.7565],
  349 + '聊城': [115.9167, 36.4032],
  350 + '肇庆': [112.1265, 23.5822],
  351 + '舟山': [122.2559, 30.2234],
  352 + '苏州': [120.6519, 31.3989],
  353 + '莱芜': [117.6526, 36.2714],
  354 + '菏泽': [115.6201, 35.2057],
  355 + '营口': [122.4316, 40.4297],
  356 + '葫芦岛': [120.1575, 40.578],
  357 + '衡水': [115.8838, 37.7161],
  358 + '衢州': [118.6853, 28.8666],
  359 + '西宁': [101.4038, 36.8207],
  360 + '西安': [109.1162, 34.2004],
  361 + '贵阳': [106.6992, 26.7682],
  362 + '连云港': [119.1248, 34.552],
  363 + '邢台': [114.8071, 37.2821],
  364 + '邯郸': [114.4775, 36.535],
  365 + '郑州': [113.4668, 34.6234],
  366 + //'鄂尔多斯': [108.9734, 39.2487],
  367 + '重庆': [107.7539, 30.1904],
  368 + '金华': [120.0037, 29.1028],
  369 + '铜川': [109.0393, 35.1947],
  370 + '银川': [106.3586, 38.1775],
  371 + '镇江': [119.4763, 31.9702],
  372 + '长春': [125.8154, 44.2584],
  373 + '长沙': [113.0823, 28.2568],
  374 + '长治': [112.8625, 36.4746],
  375 + '阳泉': [113.4778, 38.0951],
  376 + '青岛': [120.4651, 36.3373],
  377 + '韶关': [113.7964, 24.7028],
  378 + '海门':[121.15,31.89],
  379 + '鄂尔多斯':[109.781327,39.608266],
  380 + '招远':[120.38,37.35],
  381 + '舟山':[122.207216,29.985295],
  382 + '齐齐哈尔':[123.97,47.33],
  383 + '盐城':[120.13,33.38],
  384 + '赤峰':[118.87,42.28],
  385 + '青岛':[120.33,36.07],
  386 + '乳山':[121.52,36.89],
  387 + '金昌':[102.188043,38.520089],
  388 + '泉州':[118.58,24.93],
  389 + '莱西':[120.53,36.86],
  390 + '日照':[119.46,35.42],
  391 + '胶南':[119.97,35.88],
  392 + '南通':[121.05,32.08],
  393 + '拉萨':[91.11,29.97],
  394 + '云浮':[112.02,22.93],
  395 + '梅州':[116.1,24.55],
  396 + '文登':[122.05,37.2],
  397 + //'上海':[121.48,31.22],
  398 + '攀枝花':[101.718637,26.582347],
  399 + '威海':[122.1,37.5],
  400 + '承德':[117.93,40.97],
  401 + '厦门':[118.1,24.46],
  402 + '汕尾':[115.375279,22.786211],
  403 + '潮州':[116.63,23.68],
  404 + '丹东':[124.37,40.13],
  405 + '太仓':[121.1,31.45],
  406 + '曲靖':[103.79,25.51],
  407 + '烟台':[121.39,37.52],
  408 + '福州':[119.3,26.08],
  409 + '瓦房店':[121.979603,39.627114],
  410 + '即墨':[120.45,36.38],
  411 + '抚顺':[123.97,41.97],
  412 + '玉溪':[102.52,24.35],
  413 + '张家口':[114.87,40.82],
  414 + '阳泉':[113.57,37.85],
  415 + '莱州':[119.942327,37.177017],
  416 + '湖州':[120.1,30.86],
  417 + '汕头':[116.69,23.39],
  418 + '昆山':[120.95,31.39],
  419 + '宁波':[121.56,29.86],
  420 + '湛江':[110.359377,21.270708],
  421 + '揭阳':[116.35,23.55],
  422 + '荣成':[122.41,37.16],
  423 + '连云港':[119.16,34.59],
  424 + '葫芦岛':[120.836932,40.711052],
  425 + '常熟':[120.74,31.64],
  426 + '东莞':[113.75,23.04],
  427 + '河源':[114.68,23.73],
  428 + '淮安':[119.15,33.5],
  429 + '泰州':[119.9,32.49],
  430 + '南宁':[108.33,22.84],
  431 + '营口':[122.18,40.65],
  432 + '惠州':[114.4,23.09],
  433 + '江阴':[120.26,31.91],
  434 + '蓬莱':[120.75,37.8],
  435 + '韶关':[113.62,24.84],
  436 + '嘉峪关':[98.289152,39.77313],
  437 + //'广州':[113.23,23.16],
  438 + '延安':[109.47,36.6],
  439 + '太原':[112.53,37.87],
  440 + '清远':[113.01,23.7],
  441 + '中山':[113.38,22.52],
  442 + '昆明':[102.73,25.04],
  443 + '寿光':[118.73,36.86],
  444 + '盘锦':[122.070714,41.119997],
  445 + '长治':[113.08,36.18],
  446 + '深圳':[114.07,22.62],
  447 + '珠海':[113.52,22.3],
  448 + '宿迁':[118.3,33.96],
  449 + '咸阳':[108.72,34.36],
  450 + '铜川':[109.11,35.09],
  451 + '平度':[119.97,36.77],
  452 + '佛山':[113.11,23.05],
  453 + '海口':[110.35,20.02],
  454 + '江门':[113.06,22.61],
  455 + '章丘':[117.53,36.72],
  456 + '肇庆':[112.44,23.05],
  457 + '大连':[121.62,38.92],
  458 + '临汾':[111.5,36.08],
  459 + '吴江':[120.63,31.16],
  460 + '石嘴山':[106.39,39.04],
  461 + '沈阳':[123.38,41.8],
  462 + '苏州':[120.62,31.32],
  463 + '茂名':[110.88,21.68],
  464 + '嘉兴':[120.76,30.77],
  465 + '长春':[125.35,43.88],
  466 + '胶州':[120.03336,36.264622],
  467 + '银川':[106.27,38.47],
  468 + '张家港':[120.555821,31.875428],
  469 + '三门峡':[111.19,34.76],
  470 + '锦州':[121.15,41.13],
  471 + '南昌':[115.89,28.68],
  472 + '柳州':[109.4,24.33],
  473 + '三亚':[109.511909,18.252847],
  474 + '自贡':[104.778442,29.33903],
  475 + '吉林':[126.57,43.87],
  476 + '阳江':[111.95,21.85],
  477 + '泸州':[105.39,28.91],
  478 + '西宁':[101.74,36.56],
  479 + '宜宾':[104.56,29.77],
  480 + '呼和浩特':[111.65,40.82],
  481 + '成都':[104.06,30.67],
  482 + '大同':[113.3,40.12],
  483 + '镇江':[119.44,32.2],
  484 + '桂林':[110.28,25.29],
  485 + '张家界':[110.479191,29.117096],
  486 + '宜兴':[119.82,31.36],
  487 + '北海':[109.12,21.49],
  488 + '西安':[108.95,34.27],
  489 + '金坛':[119.56,31.74],
  490 + '东营':[118.49,37.46],
  491 + '牡丹江':[129.58,44.6],
  492 + '遵义':[106.9,27.7],
  493 + '绍兴':[120.58,30.01],
  494 + '扬州':[119.42,32.39],
  495 + '常州':[119.95,31.79],
  496 + '潍坊':[119.1,36.62],
  497 + '重庆':[106.54,29.59],
  498 + '台州':[121.420757,28.656386],
  499 + '南京':[118.78,32.04],
  500 + '滨州':[118.03,37.36],
  501 + '贵阳':[106.71,26.57],
  502 + '无锡':[120.29,31.59],
  503 + '本溪':[123.73,41.3],
  504 + '克拉玛依':[84.77,45.59],
  505 + '渭南':[109.5,34.52],
  506 + '马鞍山':[118.48,31.56],
  507 + '宝鸡':[107.15,34.38],
  508 + '焦作':[113.21,35.24],
  509 + '句容':[119.16,31.95],
  510 + //'北京':[116.46,39.92],
  511 + '徐州':[117.2,34.26],
  512 + '衡水':[115.72,37.72],
  513 + '包头':[110,40.58],
  514 + '绵阳':[104.73,31.48],
  515 + '乌鲁木齐':[87.68,43.77],
  516 + '枣庄':[117.57,34.86],
  517 + '杭州':[120.19,30.26],
  518 + '淄博':[118.05,36.78],
  519 + '鞍山':[122.85,41.12],
  520 + '溧阳':[119.48,31.43],
  521 + '库尔勒':[86.06,41.68],
  522 + '安阳':[114.35,36.1],
  523 + '开封':[114.35,34.79],
  524 + '济南':[117,36.65],
  525 + '德阳':[104.37,31.13],
  526 + '温州':[120.65,28.01],
  527 + '九江':[115.97,29.71],
  528 + '邯郸':[114.47,36.6],
  529 + '临安':[119.72,30.23],
  530 + '兰州':[103.73,36.03],
  531 + '沧州':[116.83,38.33],
  532 + '临沂':[118.35,35.05],
  533 + '南充':[106.110698,30.837793],
  534 + '天津':[117.2,39.13],
  535 + '富阳':[119.95,30.07],
  536 + '泰安':[117.13,36.18],
  537 + '诸暨':[120.23,29.71],
  538 + '郑州':[113.65,34.76],
  539 + '哈尔滨':[126.63,45.75],
  540 + '聊城':[115.97,36.45],
  541 + '芜湖':[118.38,31.33],
  542 + '唐山':[118.02,39.63],
  543 + '平顶山':[113.29,33.75],
  544 + '邢台':[114.48,37.05],
  545 + '德州':[116.29,37.45],
  546 + '济宁':[116.59,35.38],
  547 + '荆州':[112.239741,30.335165],
  548 + '宜昌':[111.3,30.7],
  549 + '义乌':[120.06,29.32],
  550 + '丽水':[119.92,28.45],
  551 + '洛阳':[112.44,34.7],
  552 + '秦皇岛':[119.57,39.95],
  553 + '株洲':[113.16,27.83],
  554 + '石家庄':[114.48,38.03],
  555 + '莱芜':[117.67,36.19],
  556 + '常德':[111.69,29.05],
  557 + '保定':[115.48,38.85],
  558 + '湘潭':[112.91,27.87],
  559 + '金华':[119.64,29.12],
  560 + '岳阳':[113.09,29.37],
  561 + '长沙':[113,28.21],
  562 + '衢州':[118.88,28.97],
  563 + '廊坊':[116.7,39.53],
  564 + '菏泽':[115.480656,35.23375],
  565 + '合肥':[117.27,31.86],
  566 + '武汉':[114.31,30.52],
  567 + '大庆':[125.03,46.58]
  568 + };
  569 +
  570 + var convertData = function (data) {
  571 + var res = [];
  572 + for (var i = 0; i < data.length; i++) {
  573 + var geoCoord = geoCoordMap[data[i].name];
  574 + if (geoCoord) {
  575 + res.push({
  576 + name: data[i].name,
  577 + value: geoCoord.concat(data[i].value)
  578 + });
  579 + }
  580 + }
  581 + return res;
  582 + };
  583 +
  584 + //var leafletEcharts1 = new LeafletEcharts();
  585 + var myChart1 = LeafletEcharts.initEcharts(document.getElementById("chart1"));
  586 +
  587 + option1 = {
  588 + // backgroundColor: '#404a59',
  589 + title: {
  590 + text: 'Leaflet扩展Echarts3之全国主要城市空气质量',
  591 + subtext: 'Data from PM25.in, Develop By HuangTao',
  592 + sublink: 'http://www.pm25.in',
  593 + left: 'center',
  594 + textStyle: {
  595 + color: '#fff'
  596 + }
  597 + },
  598 + tooltip : {
  599 + trigger: 'item'
  600 + },
  601 + legend: {
  602 + orient: 'vertical',
  603 + y: 'bottom',
  604 + x:'right',
  605 + data:['pm2.5'],
  606 + textStyle: {
  607 + color: '#fff'
  608 + }
  609 + },
  610 + lmap: {
  611 + mapOptions : {
  612 + center: [37.550339, 104.114129],
  613 + zoom:4
  614 + }
  615 + },
  616 + series : [
  617 + {
  618 + name: 'pm2.5',
  619 + type: 'scatter',
  620 + coordinateSystem: 'geo',
  621 + data: convertData(data1),
  622 + symbolSize: function (val) {
  623 + return val[2] / 10;
  624 + },
  625 + label: {
  626 + normal: {
  627 + formatter: '{b}',
  628 + position: 'right',
  629 + show: false
  630 + },
  631 + emphasis: {
  632 + show: true
  633 + }
  634 + },
  635 + itemStyle: {
  636 + normal: {
  637 + color: '#ddb926'
  638 + }
  639 + }
  640 + },
  641 + {
  642 + name: 'Top 5',
  643 + type: 'effectScatter',
  644 + coordinateSystem: 'geo',
  645 + data: convertData(data1.sort(function (a, b) {
  646 + return b.value - a.value;
  647 + }).slice(0, 6)),
  648 + symbolSize: function (val) {
  649 + return val[2] / 10;
  650 + },
  651 + showEffectOn: 'render',
  652 + rippleEffect: {
  653 + brushType: 'stroke'
  654 + },
  655 + hoverAnimation: true,
  656 + label: {
  657 + normal: {
  658 + formatter: '{b}',
  659 + position: 'right',
  660 + show: true
  661 + }
  662 + },
  663 + itemStyle: {
  664 + normal: {
  665 + color: '#f4e925',
  666 + shadowBlur: 10,
  667 + shadowColor: '#333'
  668 + }
  669 + },
  670 + zlevel: 1
  671 + }
  672 + ]
  673 + };
  674 + // 使用刚指定的配置项和数据显示图表。
  675 + myChart1.setOption(option1);
  676 + var map = myChart1.getMap();
  677 + var baseLayer = new L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}', {
  678 + attribution: '&copy; <a href="http://www.tianditu.com/">天地图</a> 提供底图服务',
  679 + subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
  680 + });
  681 + map.addLayer(baseLayer);
  682 +
  683 +
  684 + var BJData = [
  685 + [{name: '北京'}, {name: '上海', value: 95}],
  686 + [{name: '北京'}, {name: '广州', value: 90}],
  687 + [{name: '北京'}, {name: '大连', value: 80}],
  688 + [{name: '北京'}, {name: '南宁', value: 70}],
  689 + [{name: '北京'}, {name: '南昌', value: 60}],
  690 + [{name: '北京'}, {name: '拉萨', value: 50}],
  691 + [{name: '北京'}, {name: '长春', value: 40}],
  692 + [{name: '北京'}, {name: '包头', value: 30}],
  693 + [{name: '北京'}, {name: '重庆', value: 20}],
  694 + [{name: '北京'}, {name: '常州', value: 10}]
  695 + ];
  696 +
  697 + var SHData = [
  698 + [{name: '上海'}, {name: '包头', value: 95}],
  699 + [{name: '上海'}, {name: '昆明', value: 90}],
  700 + [{name: '上海'}, {name: '广州', value: 80}],
  701 + [{name: '上海'}, {name: '郑州', value: 70}],
  702 + [{name: '上海'}, {name: '长春', value: 60}],
  703 + [{name: '上海'}, {name: '重庆', value: 50}],
  704 + [{name: '上海'}, {name: '长沙', value: 40}],
  705 + [{name: '上海'}, {name: '北京', value: 30}],
  706 + [{name: '上海'}, {name: '丹东', value: 20}],
  707 + [{name: '上海'}, {name: '大连', value: 10}]
  708 + ];
  709 +
  710 + var GZData = [
  711 + [{name: '广州'}, {name: '福州', value: 95}],
  712 + [{name: '广州'}, {name: '太原', value: 90}],
  713 + [{name: '广州'}, {name: '长春', value: 80}],
  714 + [{name: '广州'}, {name: '重庆', value: 70}],
  715 + [{name: '广州'}, {name: '西安', value: 60}],
  716 + [{name: '广州'}, {name: '成都', value: 50}],
  717 + [{name: '广州'}, {name: '常州', value: 40}],
  718 + [{name: '广州'}, {name: '北京', value: 30}],
  719 + [{name: '广州'}, {name: '北海', value: 20}],
  720 + [{name: '广州'}, {name: '海口', value: 10}]
  721 + ];
  722 +
  723 + var convertData2 = function (data) {
  724 + var res = [];
  725 + for (var i = 0; i < data.length; i++) {
  726 + var dataItem = data[i];
  727 + var fromCoord = geoCoordMap[dataItem[0].name];
  728 + var toCoord = geoCoordMap[dataItem[1].name];
  729 + if (fromCoord && toCoord) {
  730 + res.push([{
  731 + coord: fromCoord
  732 + }, {
  733 + coord: toCoord
  734 + }]);
  735 + }
  736 + }
  737 + return res;
  738 + };
  739 +
  740 + var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
  741 +
  742 + var color = ['#a6c84c', '#ffa022', '#46bee9'];
  743 + var series = [];
  744 + [['北京', BJData], ['上海', SHData], ['广州', GZData]].forEach(function (item, i) {
  745 + series.push({
  746 + name: item[0] + ' Top10',
  747 + type: 'lines',
  748 + zlevel: 1,
  749 + effect: {
  750 + show: true,
  751 + period: 6,
  752 + trailLength: 0.7,
  753 + color: '#fff',
  754 + symbolSize: 3
  755 + },
  756 + lineStyle: {
  757 + normal: {
  758 + color: color[i],
  759 + width: 0,
  760 + curveness: 0.2
  761 + }
  762 + },
  763 + data: convertData2(item[1])
  764 + },
  765 + {
  766 + name: item[0] + ' Top10',
  767 + type: 'lines',
  768 + zlevel: 2,
  769 + effect: {
  770 + show: true,
  771 + period: 6,
  772 + trailLength: 0,
  773 + symbol: planePath,
  774 + symbolSize: 15
  775 + },
  776 + lineStyle: {
  777 + normal: {
  778 + color: color[i],
  779 + width: 1,
  780 + opacity: 0.4,
  781 + curveness: 0.2
  782 + }
  783 + },
  784 + data: convertData2(item[1])
  785 + },
  786 + {
  787 + name: item[0] + ' Top10',
  788 + type: 'effectScatter',
  789 + coordinateSystem: 'geo',
  790 + zlevel: 2,
  791 + rippleEffect: {
  792 + brushType: 'stroke'
  793 + },
  794 + label: {
  795 + normal: {
  796 + show: true,
  797 + position: 'right',
  798 + formatter: '{b}'
  799 + }
  800 + },
  801 + symbolSize: function (val) {
  802 + return val[2] / 8;
  803 + },
  804 + itemStyle: {
  805 + normal: {
  806 + color: color[i]
  807 + }
  808 + },
  809 + data: item[1].map(function (dataItem) {
  810 + return {
  811 + name: dataItem[1].name,
  812 + value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
  813 + };
  814 + })
  815 + });
  816 + });
  817 +
  818 +
  819 +
  820 +
  821 + var myChart2 = LeafletEcharts.initEcharts(document.getElementById("chart2"));
  822 +
  823 + var baseLayer2 = new L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}', {
  824 + attribution: '&copy; <a href="http://www.tianditu.com/">天地图</a> 提供底图服务',
  825 + subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
  826 + });
  827 +
  828 + var option2 = {
  829 + // backgroundColor: '#404a59',
  830 + title: {
  831 + text: 'Leaflet扩展Echarts3之模拟迁徙',
  832 + subtext: 'Develop By HuangTao',
  833 + left: 'center',
  834 + textStyle: {
  835 + color: '#fff'
  836 + }
  837 + },
  838 + tooltip: {
  839 + trigger: 'item'
  840 + },
  841 + legend: {
  842 + orient: 'vertical',
  843 + top: 'bottom',
  844 + left: 'right',
  845 + data: ['北京 Top10', '上海 Top10', '广州 Top10'],
  846 + textStyle: {
  847 + color: '#fff'
  848 + },
  849 + selectedMode: 'single'
  850 + },
  851 + lmap: {
  852 + mapOptions: function () {
  853 + return {
  854 + layers:new L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}', {
  855 + attribution: '&copy; <a href="http://www.tianditu.com/">天地图</a> 提供底图服务',
  856 + subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
  857 + }),
  858 + center: [37.550339, 104.114129],
  859 + zoom:4
  860 + };
  861 + }
  862 + },
  863 + series: series
  864 + };
  865 +
  866 +
  867 + myChart2.setOption(option2);
  868 + //var map2 = leafletEcharts2.getLMap();
  869 +
  870 + //map2.addLayer(baseLayer2);
  871 +
  872 +
  873 + </script>
  874 +
  875 +</body>
  876 +</html>
  1 +<!DOCTYPE html>
  2 +<html lang="zh">
  3 +<head>
  4 + <meta charset="UTF-8">
  5 + <title>Leaflet 加载 Echarts3</title>
  6 + <link rel="stylesheet" href="../libs/leaflet/dist/leaflet.css">
  7 + <style>
  8 + html, body, #map {
  9 + height: 100%;
  10 + padding: 0;
  11 + margin: 0;
  12 + }
  13 + </style>
  14 +</head>
  15 +<body>
  16 +<div id="map"></div>
  17 +
  18 +<script src="../libs/echarts/dist/echarts.min.js"></script>
  19 +<script src="../libs/leaflet/dist/leaflet.js"></script>
  20 +<script src="../libs/jquery/dist/jquery.min.js"></script>
  21 +<script src="../src/leaflet-echarts3.js"></script>
  22 +<script>
  23 + var le = LeafletEcharts.initMap('map')
  24 + var map = le.getMap();
  25 + var baseLayers = {
  26 + "高德地图": L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
  27 + subdomains: "1234"
  28 + }),
  29 + '高德影像': L.layerGroup([L.tileLayer('http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}', {
  30 + subdomains: "1234"
  31 + }), L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=cta_w&X={x}&Y={y}&L={z}', {
  32 + subdomains: "1234"
  33 + })]),
  34 + "立体地图": L.tileLayer('https://a.tiles.mapbox.com/v3/examples.c7d2024a/{z}/{x}/{y}.png', {
  35 + attribution: 'Map &copy; Pacific Rim Coordination Center (PRCC). Certain data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
  36 + key: 'BC9A493B41014CAABB98F0471D759707',
  37 + styleId: 22677
  38 + }),
  39 + "Foursquare": L.tileLayer('https://a.tiles.mapbox.com/v3/foursquare.map-0y1jh28j/{z}/{x}/{y}.png', {
  40 + attribution: 'Map &copy; Pacific Rim Coordination Center (PRCC). Certain data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
  41 + key: 'BC9A493B41014CAABB98F0471D759707',
  42 + styleId: 22677
  43 + }),
  44 + 'GeoQ灰色底图': L.tileLayer('http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}').addTo(map)
  45 + };
  46 + L.tileLayer('https://a.tiles.mapbox.com/v3/foursquare.map-0y1jh28j/{z}/{x}/{y}.png', {
  47 + attribution: 'Map &copy; Pacific Rim Coordination Center (PRCC). Certain data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
  48 + key: 'BC9A493B41014CAABB98F0471D759707',
  49 + styleId: 22677
  50 + });
  51 + var layercontrol = L.control.layers(baseLayers,{}, {
  52 + position: "topleft"
  53 + }).addTo(map);
  54 + map.setView(L.latLng(37.550339, 104.114129), 4);
  55 +
  56 + var myChart = le.getEcharts();
  57 +
  58 + var data = [
  59 + {name: '海门', value: 9},
  60 + {name: '鄂尔多斯', value: 12},
  61 + {name: '招远', value: 12},
  62 + {name: '舟山', value: 12},
  63 + {name: '齐齐哈尔', value: 14},
  64 + {name: '盐城', value: 15},
  65 + {name: '赤峰', value: 16},
  66 + {name: '青岛', value: 18},
  67 + {name: '乳山', value: 18},
  68 + {name: '金昌', value: 19},
  69 + {name: '泉州', value: 21},
  70 + {name: '莱西', value: 21},
  71 + {name: '日照', value: 21},
  72 + {name: '胶南', value: 22},
  73 + {name: '南通', value: 23},
  74 + {name: '拉萨', value: 24},
  75 + {name: '云浮', value: 24},
  76 + {name: '梅州', value: 25},
  77 + {name: '文登', value: 25},
  78 + {name: '上海', value: 25},
  79 + {name: '攀枝花', value: 25},
  80 + {name: '威海', value: 25},
  81 + {name: '承德', value: 25},
  82 + {name: '厦门', value: 26},
  83 + {name: '汕尾', value: 26},
  84 + {name: '潮州', value: 26},
  85 + {name: '丹东', value: 27},
  86 + {name: '太仓', value: 27},
  87 + {name: '曲靖', value: 27},
  88 + {name: '烟台', value: 28},
  89 + {name: '福州', value: 29},
  90 + {name: '瓦房店', value: 30},
  91 + {name: '即墨', value: 30},
  92 + {name: '抚顺', value: 31},
  93 + {name: '玉溪', value: 31},
  94 + {name: '张家口', value: 31},
  95 + {name: '阳泉', value: 31},
  96 + {name: '莱州', value: 32},
  97 + {name: '湖州', value: 32},
  98 + {name: '汕头', value: 32},
  99 + {name: '昆山', value: 33},
  100 + {name: '宁波', value: 33},
  101 + {name: '湛江', value: 33},
  102 + {name: '揭阳', value: 34},
  103 + {name: '荣成', value: 34},
  104 + {name: '连云港', value: 35},
  105 + {name: '葫芦岛', value: 35},
  106 + {name: '常熟', value: 36},
  107 + {name: '东莞', value: 36},
  108 + {name: '河源', value: 36},
  109 + {name: '淮安', value: 36},
  110 + {name: '泰州', value: 36},
  111 + {name: '南宁', value: 37},
  112 + {name: '营口', value: 37},
  113 + {name: '惠州', value: 37},
  114 + {name: '江阴', value: 37},
  115 + {name: '蓬莱', value: 37},
  116 + {name: '韶关', value: 38},
  117 + {name: '嘉峪关', value: 38},
  118 + {name: '广州', value: 38},
  119 + {name: '延安', value: 38},
  120 + {name: '太原', value: 39},
  121 + {name: '清远', value: 39},
  122 + {name: '中山', value: 39},
  123 + {name: '昆明', value: 39},
  124 + {name: '寿光', value: 40},
  125 + {name: '盘锦', value: 40},
  126 + {name: '长治', value: 41},
  127 + {name: '深圳', value: 41},
  128 + {name: '珠海', value: 42},
  129 + {name: '宿迁', value: 43},
  130 + {name: '咸阳', value: 43},
  131 + {name: '铜川', value: 44},
  132 + {name: '平度', value: 44},
  133 + {name: '佛山', value: 44},
  134 + {name: '海口', value: 44},
  135 + {name: '江门', value: 45},
  136 + {name: '章丘', value: 45},
  137 + {name: '肇庆', value: 46},
  138 + {name: '大连', value: 47},
  139 + {name: '临汾', value: 47},
  140 + {name: '吴江', value: 47},
  141 + {name: '石嘴山', value: 49},
  142 + {name: '沈阳', value: 50},
  143 + {name: '苏州', value: 50},
  144 + {name: '茂名', value: 50},
  145 + {name: '嘉兴', value: 51},
  146 + {name: '长春', value: 51},
  147 + {name: '胶州', value: 52},
  148 + {name: '银川', value: 52},
  149 + {name: '张家港', value: 52},
  150 + {name: '三门峡', value: 53},
  151 + {name: '锦州', value: 54},
  152 + {name: '南昌', value: 54},
  153 + {name: '柳州', value: 54},
  154 + {name: '三亚', value: 54},
  155 + {name: '自贡', value: 56},
  156 + {name: '吉林', value: 56},
  157 + {name: '阳江', value: 57},
  158 + {name: '泸州', value: 57},
  159 + {name: '西宁', value: 57},
  160 + {name: '宜宾', value: 58},
  161 + {name: '呼和浩特', value: 58},
  162 + {name: '成都', value: 58},
  163 + {name: '大同', value: 58},
  164 + {name: '镇江', value: 59},
  165 + {name: '桂林', value: 59},
  166 + {name: '张家界', value: 59},
  167 + {name: '宜兴', value: 59},
  168 + {name: '北海', value: 60},
  169 + {name: '西安', value: 61},
  170 + {name: '金坛', value: 62},
  171 + {name: '东营', value: 62},
  172 + {name: '牡丹江', value: 63},
  173 + {name: '遵义', value: 63},
  174 + {name: '绍兴', value: 63},
  175 + {name: '扬州', value: 64},
  176 + {name: '常州', value: 64},
  177 + {name: '潍坊', value: 65},
  178 + {name: '重庆', value: 66},
  179 + {name: '台州', value: 67},
  180 + {name: '南京', value: 67},
  181 + {name: '滨州', value: 70},
  182 + {name: '贵阳', value: 71},
  183 + {name: '无锡', value: 71},
  184 + {name: '本溪', value: 71},
  185 + {name: '克拉玛依', value: 72},
  186 + {name: '渭南', value: 72},
  187 + {name: '马鞍山', value: 72},
  188 + {name: '宝鸡', value: 72},
  189 + {name: '焦作', value: 75},
  190 + {name: '句容', value: 75},
  191 + {name: '北京', value: 79},
  192 + {name: '徐州', value: 79},
  193 + {name: '衡水', value: 80},
  194 + {name: '包头', value: 80},
  195 + {name: '绵阳', value: 80},
  196 + {name: '乌鲁木齐', value: 84},
  197 + {name: '枣庄', value: 84},
  198 + {name: '杭州', value: 84},
  199 + {name: '淄博', value: 85},
  200 + {name: '鞍山', value: 86},
  201 + {name: '溧阳', value: 86},
  202 + {name: '库尔勒', value: 86},
  203 + {name: '安阳', value: 90},
  204 + {name: '开封', value: 90},
  205 + {name: '济南', value: 92},
  206 + {name: '德阳', value: 93},
  207 + {name: '温州', value: 95},
  208 + {name: '九江', value: 96},
  209 + {name: '邯郸', value: 98},
  210 + {name: '临安', value: 99},
  211 + {name: '兰州', value: 99},
  212 + {name: '沧州', value: 100},
  213 + {name: '临沂', value: 103},
  214 + {name: '南充', value: 104},
  215 + {name: '天津', value: 105},
  216 + {name: '富阳', value: 106},
  217 + {name: '泰安', value: 112},
  218 + {name: '诸暨', value: 112},
  219 + {name: '郑州', value: 113},
  220 + {name: '哈尔滨', value: 114},
  221 + {name: '聊城', value: 116},
  222 + {name: '芜湖', value: 117},
  223 + {name: '唐山', value: 119},
  224 + {name: '平顶山', value: 119},
  225 + {name: '邢台', value: 119},
  226 + {name: '德州', value: 120},
  227 + {name: '济宁', value: 120},
  228 + {name: '荆州', value: 127},
  229 + {name: '宜昌', value: 130},
  230 + {name: '义乌', value: 132},
  231 + {name: '丽水', value: 133},
  232 + {name: '洛阳', value: 134},
  233 + {name: '秦皇岛', value: 136},
  234 + {name: '株洲', value: 143},
  235 + {name: '石家庄', value: 147},
  236 + {name: '莱芜', value: 148},
  237 + {name: '常德', value: 152},
  238 + {name: '保定', value: 153},
  239 + {name: '湘潭', value: 154},
  240 + {name: '金华', value: 157},
  241 + {name: '岳阳', value: 169},
  242 + {name: '长沙', value: 175},
  243 + {name: '衢州', value: 177},
  244 + {name: '廊坊', value: 193},
  245 + {name: '菏泽', value: 194},
  246 + {name: '合肥', value: 229},
  247 + {name: '武汉', value: 273},
  248 + {name: '大庆', value: 279}
  249 +];
  250 +var geoCoordMap = {
  251 + '海门':[121.15,31.89],
  252 + '鄂尔多斯':[109.781327,39.608266],
  253 + '招远':[120.38,37.35],
  254 + '舟山':[122.207216,29.985295],
  255 + '齐齐哈尔':[123.97,47.33],
  256 + '盐城':[120.13,33.38],
  257 + '赤峰':[118.87,42.28],
  258 + '青岛':[120.33,36.07],
  259 + '乳山':[121.52,36.89],
  260 + '金昌':[102.188043,38.520089],
  261 + '泉州':[118.58,24.93],
  262 + '莱西':[120.53,36.86],
  263 + '日照':[119.46,35.42],
  264 + '胶南':[119.97,35.88],
  265 + '南通':[121.05,32.08],
  266 + '拉萨':[91.11,29.97],
  267 + '云浮':[112.02,22.93],
  268 + '梅州':[116.1,24.55],
  269 + '文登':[122.05,37.2],
  270 + '上海':[121.48,31.22],
  271 + '攀枝花':[101.718637,26.582347],
  272 + '威海':[122.1,37.5],
  273 + '承德':[117.93,40.97],
  274 + '厦门':[118.1,24.46],
  275 + '汕尾':[115.375279,22.786211],
  276 + '潮州':[116.63,23.68],
  277 + '丹东':[124.37,40.13],
  278 + '太仓':[121.1,31.45],
  279 + '曲靖':[103.79,25.51],
  280 + '烟台':[121.39,37.52],
  281 + '福州':[119.3,26.08],
  282 + '瓦房店':[121.979603,39.627114],
  283 + '即墨':[120.45,36.38],
  284 + '抚顺':[123.97,41.97],
  285 + '玉溪':[102.52,24.35],
  286 + '张家口':[114.87,40.82],
  287 + '阳泉':[113.57,37.85],
  288 + '莱州':[119.942327,37.177017],
  289 + '湖州':[120.1,30.86],
  290 + '汕头':[116.69,23.39],
  291 + '昆山':[120.95,31.39],
  292 + '宁波':[121.56,29.86],
  293 + '湛江':[110.359377,21.270708],
  294 + '揭阳':[116.35,23.55],
  295 + '荣成':[122.41,37.16],
  296 + '连云港':[119.16,34.59],
  297 + '葫芦岛':[120.836932,40.711052],
  298 + '常熟':[120.74,31.64],
  299 + '东莞':[113.75,23.04],
  300 + '河源':[114.68,23.73],
  301 + '淮安':[119.15,33.5],
  302 + '泰州':[119.9,32.49],
  303 + '南宁':[108.33,22.84],
  304 + '营口':[122.18,40.65],
  305 + '惠州':[114.4,23.09],
  306 + '江阴':[120.26,31.91],
  307 + '蓬莱':[120.75,37.8],
  308 + '韶关':[113.62,24.84],
  309 + '嘉峪关':[98.289152,39.77313],
  310 + '广州':[113.23,23.16],
  311 + '延安':[109.47,36.6],
  312 + '太原':[112.53,37.87],
  313 + '清远':[113.01,23.7],
  314 + '中山':[113.38,22.52],
  315 + '昆明':[102.73,25.04],
  316 + '寿光':[118.73,36.86],
  317 + '盘锦':[122.070714,41.119997],
  318 + '长治':[113.08,36.18],
  319 + '深圳':[114.07,22.62],
  320 + '珠海':[113.52,22.3],
  321 + '宿迁':[118.3,33.96],
  322 + '咸阳':[108.72,34.36],
  323 + '铜川':[109.11,35.09],
  324 + '平度':[119.97,36.77],
  325 + '佛山':[113.11,23.05],
  326 + '海口':[110.35,20.02],
  327 + '江门':[113.06,22.61],
  328 + '章丘':[117.53,36.72],
  329 + '肇庆':[112.44,23.05],
  330 + '大连':[121.62,38.92],
  331 + '临汾':[111.5,36.08],
  332 + '吴江':[120.63,31.16],
  333 + '石嘴山':[106.39,39.04],
  334 + '沈阳':[123.38,41.8],
  335 + '苏州':[120.62,31.32],
  336 + '茂名':[110.88,21.68],
  337 + '嘉兴':[120.76,30.77],
  338 + '长春':[125.35,43.88],
  339 + '胶州':[120.03336,36.264622],
  340 + '银川':[106.27,38.47],
  341 + '张家港':[120.555821,31.875428],
  342 + '三门峡':[111.19,34.76],
  343 + '锦州':[121.15,41.13],
  344 + '南昌':[115.89,28.68],
  345 + '柳州':[109.4,24.33],
  346 + '三亚':[109.511909,18.252847],
  347 + '自贡':[104.778442,29.33903],
  348 + '吉林':[126.57,43.87],
  349 + '阳江':[111.95,21.85],
  350 + '泸州':[105.39,28.91],
  351 + '西宁':[101.74,36.56],
  352 + '宜宾':[104.56,29.77],
  353 + '呼和浩特':[111.65,40.82],
  354 + '成都':[104.06,30.67],
  355 + '大同':[113.3,40.12],
  356 + '镇江':[119.44,32.2],
  357 + '桂林':[110.28,25.29],
  358 + '张家界':[110.479191,29.117096],
  359 + '宜兴':[119.82,31.36],
  360 + '北海':[109.12,21.49],
  361 + '西安':[108.95,34.27],
  362 + '金坛':[119.56,31.74],
  363 + '东营':[118.49,37.46],
  364 + '牡丹江':[129.58,44.6],
  365 + '遵义':[106.9,27.7],
  366 + '绍兴':[120.58,30.01],
  367 + '扬州':[119.42,32.39],
  368 + '常州':[119.95,31.79],
  369 + '潍坊':[119.1,36.62],
  370 + '重庆':[106.54,29.59],
  371 + '台州':[121.420757,28.656386],
  372 + '南京':[118.78,32.04],
  373 + '滨州':[118.03,37.36],
  374 + '贵阳':[106.71,26.57],
  375 + '无锡':[120.29,31.59],
  376 + '本溪':[123.73,41.3],
  377 + '克拉玛依':[84.77,45.59],
  378 + '渭南':[109.5,34.52],
  379 + '马鞍山':[118.48,31.56],
  380 + '宝鸡':[107.15,34.38],
  381 + '焦作':[113.21,35.24],
  382 + '句容':[119.16,31.95],
  383 + '北京':[116.46,39.92],
  384 + '徐州':[117.2,34.26],
  385 + '衡水':[115.72,37.72],
  386 + '包头':[110,40.58],
  387 + '绵阳':[104.73,31.48],
  388 + '乌鲁木齐':[87.68,43.77],
  389 + '枣庄':[117.57,34.86],
  390 + '杭州':[120.19,30.26],
  391 + '淄博':[118.05,36.78],
  392 + '鞍山':[122.85,41.12],
  393 + '溧阳':[119.48,31.43],
  394 + '库尔勒':[86.06,41.68],
  395 + '安阳':[114.35,36.1],
  396 + '开封':[114.35,34.79],
  397 + '济南':[117,36.65],
  398 + '德阳':[104.37,31.13],
  399 + '温州':[120.65,28.01],
  400 + '九江':[115.97,29.71],
  401 + '邯郸':[114.47,36.6],
  402 + '临安':[119.72,30.23],
  403 + '兰州':[103.73,36.03],
  404 + '沧州':[116.83,38.33],
  405 + '临沂':[118.35,35.05],
  406 + '南充':[106.110698,30.837793],
  407 + '天津':[117.2,39.13],
  408 + '富阳':[119.95,30.07],
  409 + '泰安':[117.13,36.18],
  410 + '诸暨':[120.23,29.71],
  411 + '郑州':[113.65,34.76],
  412 + '哈尔滨':[126.63,45.75],
  413 + '聊城':[115.97,36.45],
  414 + '芜湖':[118.38,31.33],
  415 + '唐山':[118.02,39.63],
  416 + '平顶山':[113.29,33.75],
  417 + '邢台':[114.48,37.05],
  418 + '德州':[116.29,37.45],
  419 + '济宁':[116.59,35.38],
  420 + '荆州':[112.239741,30.335165],
  421 + '宜昌':[111.3,30.7],
  422 + '义乌':[120.06,29.32],
  423 + '丽水':[119.92,28.45],
  424 + '洛阳':[112.44,34.7],
  425 + '秦皇岛':[119.57,39.95],
  426 + '株洲':[113.16,27.83],
  427 + '石家庄':[114.48,38.03],
  428 + '莱芜':[117.67,36.19],
  429 + '常德':[111.69,29.05],
  430 + '保定':[115.48,38.85],
  431 + '湘潭':[112.91,27.87],
  432 + '金华':[119.64,29.12],
  433 + '岳阳':[113.09,29.37],
  434 + '长沙':[113,28.21],
  435 + '衢州':[118.88,28.97],
  436 + '廊坊':[116.7,39.53],
  437 + '菏泽':[115.480656,35.23375],
  438 + '合肥':[117.27,31.86],
  439 + '武汉':[114.31,30.52],
  440 + '大庆':[125.03,46.58]
  441 +};
  442 +
  443 +var convertData = function (data) {
  444 + var res = [];
  445 + for (var i = 0; i < data.length; i++) {
  446 + var geoCoord = geoCoordMap[data[i].name];
  447 + if (geoCoord) {
  448 + res.push({
  449 + name: data[i].name,
  450 + value: geoCoord.concat(data[i].value)
  451 + });
  452 + }
  453 + }
  454 + return res;
  455 +};
  456 +
  457 +option = {
  458 + // backgroundColor: '#404a59',
  459 + title: {
  460 + text: 'Leaflet扩展Echarts3之全国主要城市空气质量',
  461 + subtext: 'Data from PM25.in, Develop By HuangTao',
  462 + sublink: 'http://www.pm25.in',
  463 + left: 'center',
  464 + textStyle: {
  465 + color: '#fff'
  466 + }
  467 + },
  468 + tooltip : {
  469 + trigger: 'item'
  470 + },
  471 + legend: {
  472 + orient: 'vertical',
  473 + y: 'bottom',
  474 + x:'right',
  475 + data:['pm2.5'],
  476 + textStyle: {
  477 + color: '#fff'
  478 + }
  479 + },
  480 + lmap: {
  481 +
  482 + },
  483 + series : [
  484 + {
  485 + name: 'pm2.5',
  486 + type: 'scatter',
  487 + coordinateSystem: 'geo',
  488 + data: convertData(data),
  489 + symbolSize: function (val) {
  490 + return val[2] / 10;
  491 + },
  492 + label: {
  493 + normal: {
  494 + formatter: '{b}',
  495 + position: 'right',
  496 + show: false
  497 + },
  498 + emphasis: {
  499 + show: true
  500 + }
  501 + },
  502 + itemStyle: {
  503 + normal: {
  504 + color: '#ddb926'
  505 + }
  506 + }
  507 + },
  508 + {
  509 + name: 'Top 5',
  510 + type: 'effectScatter',
  511 + coordinateSystem: 'geo',
  512 + data: convertData(data.sort(function (a, b) {
  513 + return b.value - a.value;
  514 + }).slice(0, 6)),
  515 + symbolSize: function (val) {
  516 + return val[2] / 10;
  517 + },
  518 + showEffectOn: 'render',
  519 + rippleEffect: {
  520 + brushType: 'stroke'
  521 + },
  522 + hoverAnimation: true,
  523 + label: {
  524 + normal: {
  525 + formatter: '{b}',
  526 + position: 'right',
  527 + show: true
  528 + }
  529 + },
  530 + itemStyle: {
  531 + normal: {
  532 + color: '#f4e925',
  533 + shadowBlur: 10,
  534 + shadowColor: '#333'
  535 + }
  536 + },
  537 + zlevel: 1
  538 + }
  539 + ]
  540 +};
  541 + // 使用刚指定的配置项和数据显示图表。
  542 + myChart.setOption(option);
  543 +</script>
  544 +</body>
  545 +</html>
  1 +/// <binding Clean='clean' />
  2 +"use strict";
  3 +
  4 +var gulp = require("gulp"),
  5 + rimraf = require("rimraf"),
  6 + concat = require("gulp-concat"),
  7 + cssmin = require("gulp-cssmin"),
  8 + uglify = require("gulp-uglify");
  9 +
  10 +var dist = "./dist/";
  11 +
  12 +var paths = {
  13 + js: "src/**/*.js",
  14 + minJs: "src/**/*.min.js",
  15 + concatJsDest: dist + "leaflet-echarts3.min.js"
  16 +};
  17 +
  18 +
  19 +gulp.task("clean:js", function (cb) {
  20 + rimraf(paths.concatJsDest, cb);
  21 +});
  22 +
  23 +gulp.task("clean", ["clean:js"]);
  24 +
  25 +gulp.task("min:js", function () {
  26 + return gulp.src([paths.js, "!" + paths.minJs])
  27 + .pipe(gulp.dest(dist))
  28 + .pipe(concat(paths.concatJsDest))
  29 + .pipe(uglify())
  30 + .pipe(gulp.dest("."));
  31 +});
  32 +
  33 +gulp.task("min", ["min:js"]);
  34 +
  1 +{
  2 + "name": "leaflet-echarts",
  3 + "version": "0.1.0",
  4 + "private": true,
  5 + "devDependencies": {
  6 + "gulp": "3.9.1",
  7 + "gulp-concat": "2.6.0",
  8 + "gulp-cssmin": "0.1.7",
  9 + "gulp-uglify": "1.5.3",
  10 + "rimraf": "2.5.2"
  11 + }
  12 +}
@@ -15,10 +15,18 @@ @@ -15,10 +15,18 @@
15 }(this, function(L, echarts) { 15 }(this, function(L, echarts) {
16 var LeafletMap; //Leaflet Map 16 var LeafletMap; //Leaflet Map
17 var EchartInstance; //Echart Instance 17 var EchartInstance; //Echart Instance
  18 + var maps = {};
  19 + var MAP_ATTRIBUTE_KEY = '_lmap_';
  20 + var mapidBase = new Date() - 0;
18 21
19 //define LMapModel 22 //define LMapModel
20 var LMapModel = echarts.extendComponentModel({ 23 var LMapModel = echarts.extendComponentModel({
21 type: 'lmap', 24 type: 'lmap',
  25 +
  26 + getLMap : function() {
  27 + return this.__lmap;
  28 + },
  29 +
22 30
23 defaultOption: { 31 defaultOption: {
24 mapOptions : { 32 mapOptions : {
@@ -41,19 +49,23 @@ @@ -41,19 +49,23 @@
41 includes:[L.Mixin.Events], 49 includes:[L.Mixin.Events],
42 _echartsContainer:null, 50 _echartsContainer:null,
43 _map:null, 51 _map:null,
44 - _ec:null, 52 + _api:null,
45 _ecModel:null, 53 _ecModel:null,
46 _resizing:false, 54 _resizing:false,
47 55
48 - initialize:function(ec, root) {  
49 - this._ec = ec;  
50 - this._echartsContainer= root ? root: ec.getDom(); 56 + initialize:function(api, root) {
  57 + this._api = api;
  58 + this._echartsContainer= root ? root: api.getDom();
51 }, 59 },
52 60
53 getMap: function() { 61 getMap: function() {
54 return this._map; 62 return this._map;
55 }, 63 },
56 64
  65 + getOverLayer : function() {
  66 + return this.__overlayer;
  67 + },
  68 +
57 setModel:function(ecModel) { 69 setModel:function(ecModel) {
58 this._ecModel = ecModel; 70 this._ecModel = ecModel;
59 }, 71 },
@@ -89,9 +101,10 @@ @@ -89,9 +101,10 @@
89 if (this._resizing == true) 101 if (this._resizing == true)
90 { 102 {
91 this._resizing = false; 103 this._resizing = false;
92 - this._ec.resize(); 104 + var ec = echarts.getInstanceByDom(this._api.getDom());
  105 + ec.resize();
93 } else { 106 } else {
94 - this._ec.dispatchAction({ 107 + this._api.dispatchAction({
95 type: 'mapMoveEnd' 108 type: 'mapMoveEnd'
96 }); 109 });
97 } 110 }
@@ -154,7 +167,6 @@ @@ -154,7 +167,6 @@
154 // For deciding which dimensions to use when creating list data 167 // For deciding which dimensions to use when creating list data
155 LMapCoordSys.dimensions = LMapCoordSys.prototype.dimensions; 168 LMapCoordSys.dimensions = LMapCoordSys.prototype.dimensions;
156 169
157 - var OverLayer;  
158 LMapCoordSys.create = function (ecModel, api) { 170 LMapCoordSys.create = function (ecModel, api) {
159 var lmapCoordSys; 171 var lmapCoordSys;
160 172
@@ -163,15 +175,18 @@ @@ -163,15 +175,18 @@
163 throw new Error('Only one lmap component can exist'); 175 throw new Error('Only one lmap component can exist');
164 } 176 }
165 177
  178 + var root = api.getDom();
  179 + var key = root.getAttribute(MAP_ATTRIBUTE_KEY);
166 var viewportRoot; 180 var viewportRoot;
167 - if (!LeafletMap) {  
168 - var root = api.getDom(); 181 +
  182 + if (!key) {
  183 +
169 viewportRoot = api.getZr().painter.getViewportRoot(); 184 viewportRoot = api.getZr().painter.getViewportRoot();
170 if (typeof L === 'undefined') { 185 if (typeof L === 'undefined') {
171 throw new Error('LMap api is not loaded'); 186 throw new Error('LMap api is not loaded');
172 } 187 }
173 - var root = api.getDom();  
174 - // Not support IE8 188 +
  189 + // Not support IE8
175 var lmapRoot = root.querySelector('.ec-extension-lmap'); 190 var lmapRoot = root.querySelector('.ec-extension-lmap');
176 if (lmapRoot) { 191 if (lmapRoot) {
177 // Reset viewport left and top, which will be changed 192 // Reset viewport left and top, which will be changed
@@ -186,33 +201,48 @@ @@ -186,33 +201,48 @@
186 lmapRoot.classList.add('ec-extension-lmap'); 201 lmapRoot.classList.add('ec-extension-lmap');
187 root.appendChild(lmapRoot); 202 root.appendChild(lmapRoot);
188 var opts = lmapModel.get('mapOptions'); 203 var opts = lmapModel.get('mapOptions');
189 - LeafletMap = lmapModel.__lmap = new L.map(lmapRoot, opts); 204 + if (typeof opts == "function")
  205 + opts = opts();
  206 + var lmap = lmapModel.__lmap = new L.map(lmapRoot, opts);
  207 +
  208 + var mapid = 'map_' + mapidBase++;
  209 + maps[mapid] = lmap;
  210 + root.setAttribute && root.setAttribute(MAP_ATTRIBUTE_KEY, mapid);
  211 + } else {
  212 + lmapModel.__lmap = maps[key];
190 } 213 }
191 214
192 - if (!OverLayer) 215 +
  216 + if (!lmapModel.__overlayer)
193 { 217 {
194 - var overlayer = OverLayer = new L.EchartLayer(EchartInstance, viewportRoot);  
195 - LeafletMap.addLayer(overlayer); 218 + var overlayer = lmapModel.__overlayer = new L.EchartLayer(api, viewportRoot);
  219 + lmapModel.__lmap.addLayer(overlayer);
  220 + lmapModel.__overlayer.setModel(lmapModel);
196 } 221 }
197 - OverLayer.setModel(lmapModel);  
198 222
199 - lmapCoordSys = new LMapCoordSys(LeafletMap, api); 223 + lmapCoordSys = new LMapCoordSys(lmapModel.__lmap, api);
200 lmapCoordSys.setMapOffset(lmapModel.__mapOffset || [0, 0]); 224 lmapCoordSys.setMapOffset(lmapModel.__mapOffset || [0, 0]);
201 lmapModel.coordinateSystem = lmapCoordSys; 225 lmapModel.coordinateSystem = lmapCoordSys;
202 }); 226 });
203 227
204 ecModel.eachComponent('geo', function (geoModel) { 228 ecModel.eachComponent('geo', function (geoModel) {
  229 + var root = api.getDom();
  230 + var key = root.getAttribute(MAP_ATTRIBUTE_KEY);
  231 + if (!key)
  232 + throw new Error('Must Init LeafletMap First!');
  233 +
  234 + var leafletMap = geoModel.__lmap = maps[key];
205 if (!lmapCoordSys) { 235 if (!lmapCoordSys) {
206 - lmapCoordSys = new LMapCoordSys(LeafletMap, api); 236 + lmapCoordSys = new LMapCoordSys(leafletMap, api);
207 lmapCoordSys.setMapOffset(geoModel.__mapOffset || [0, 0]); 237 lmapCoordSys.setMapOffset(geoModel.__mapOffset || [0, 0]);
208 } 238 }
209 239
210 - if (!OverLayer) 240 + if (!geoModel.__overlayer)
211 { 241 {
212 - var overlayer = OverLayer = new L.EchartLayer(EchartInstance);  
213 - LeafletMap.addLayer(overlayer); 242 + var overlayer = geoModel.__overlayer = new L.EchartLayer(api);
  243 + leafletMap.addLayer(overlayer);
  244 + overlayer.setModel(geoModel);
214 } 245 }
215 - OverLayer.setModel(geoModel);  
216 }); 246 });
217 247
218 ecModel.eachSeries(function (seriesModel) { 248 ecModel.eachSeries(function (seriesModel) {
@@ -240,35 +270,102 @@ @@ -240,35 +270,102 @@
240 }); 270 });
241 }); 271 });
242 272
243 - return { 273 + function LEResult(ec, dom, map)
  274 + {
  275 + this._ec = ec;
  276 + this._dom = dom;
  277 + this._map = map;
  278 + }
  279 +
  280 + LEResult.prototype.getMap = function() {
  281 + if (this._map)
  282 + return this._map;
  283 + var mapid = this._dom.getAttribute(MAP_ATTRIBUTE_KEY);
  284 + return maps[mapid];
  285 + }
  286 +
  287 + LEResult.prototype.getEcharts = function() {
  288 + return this._ec;
  289 + }
  290 +
  291 + LEResult.prototype.getEchartLayer = function() {
  292 + var ec = this.getEcharts();
  293 + var mapModel = ec.getModel().getComponent('lmap');
  294 + if (!mapModel)
  295 + mapModel = ec.getModel().getComponent('geo');
  296 + return mapModel.__overlayer;
  297 + }
  298 +
  299 + LEResult.prototype.setOption = function(option, notMerge, lazyUpdate) {
  300 + this._ec.setOption(option,notMerge, lazyUpdate);
  301 + }
  302 +
  303 + /*
  304 + L.LeafletEcharts = L.Class.extend({
244 //init leaflet map, return map 305 //init leaflet map, return map
245 initMap : function(id, options) { 306 initMap : function(id, options) {
246 - var map = LeafletMap = L.map(id, options);  
247 - var div = document.createElement('div');  
248 - var size = map.getSize(); 307 + this.map = LeafletMap = L.map(id, options);
  308 + var mapid = 'map_' + mapidBase++;
  309 + maps[mapid] = this.map;
  310 + var div = this.echartDom = document.createElement('div');
  311 + var size = this.map.getSize();
249 div.style.position = "absolute"; 312 div.style.position = "absolute";
250 div.style.height = size.y + 'px'; 313 div.style.height = size.y + 'px';
251 div.style.width = size.x + 'px'; 314 div.style.width = size.x + 'px';
252 div.style.top = 0; 315 div.style.top = 0;
253 div.style.left = 0; 316 div.style.left = 0;
254 var ec = EchartInstance = echarts.init(div); 317 var ec = EchartInstance = echarts.init(div);
255 - return map; 318 + div.setAttribute && div.setAttribute(MAP_ATTRIBUTE_KEY, mapid);
  319 + return this.map;
256 }, 320 },
257 //get echart instance 321 //get echart instance
258 getEcharts:function() { 322 getEcharts:function() {
259 - return EchartInstance; 323 + if (this.echartDom)
  324 + return echarts.getInstanceByDom(this.echartDom); //EchartInstance;
  325 + else
  326 + return null;
260 }, 327 },
261 //get leaflet Layer for echart 328 //get leaflet Layer for echart
262 getEchartLayer:function() { 329 getEchartLayer:function() {
263 - return OverLayer; 330 + var ec = this.getEcharts();
  331 + var mapModel = ec.getModel().getComponent('lmap');
  332 + if (!mapModel)
  333 + mapModel = ec.getModel().getComponent('geo');
  334 + return mapModel.__overlayer;
264 }, 335 },
265 getLMap:function() { 336 getLMap:function() {
266 - return LeafletMap; 337 + if (this.map)
  338 + return this.map;
  339 + var mapid = this.echartDom.getAttribute(MAP_ATTRIBUTE_KEY);
  340 + return maps[mapid];
267 }, 341 },
268 initEcharts:function(dom) { 342 initEcharts:function(dom) {
  343 + this.echartDom = dom;
269 var ec = EchartInstance = echarts.init(dom); 344 var ec = EchartInstance = echarts.init(dom);
270 return ec; 345 return ec;
271 } 346 }
272 - }; 347 + }); */
  348 + return {
  349 + initMap : function(id, options) {
  350 + var map = L.map(id, options);
  351 + var mapid = 'map_' + mapidBase++;
  352 + maps[mapid] = map;
  353 + var div = document.createElement('div');
  354 + var size = map.getSize();
  355 + div.style.position = "absolute";
  356 + div.style.height = size.y + 'px';
  357 + div.style.width = size.x + 'px';
  358 + div.style.top = 0;
  359 + div.style.left = 0;
  360 + var ec = echarts.init(div);
  361 + div.setAttribute && div.setAttribute(MAP_ATTRIBUTE_KEY, mapid);
  362 + return new LEResult(ec, div, map);
  363 + },
  364 + initEcharts:function(dom) {
  365 + var ec = echarts.init(dom);
  366 + return new LEResult(ec, dom);
  367 + },
  368 + version: "1.0.0"
  369 + };
273 370
274 })); 371 }));
请 注册 或 登录 后发表评论