add leaflet 1.x and echart 4.0.4 support

@@ -4,7 +4,7 @@
   "dependencies": {
   "dependencies": {
     "bootstrap": "3.3.6",
     "bootstrap": "3.3.6",
     "jquery": "2.2.3",
     "jquery": "2.2.3",
-     "leaflet": "0.7.7",
-     "echarts": "3.2.2"
+     "leaflet": "1.3.4",
+     "echarts": "4.0.4"
   }
   }
 }
 }

+
+bou2_4px

+//LeafletEcharts Created by HuangTao.
+(function(root, factory) {
+    if (typeof define === 'function' && define.amd) {
+      // AMD. Register as an anonymous module.
+      define(['leaflet'], factory);
+    } else if (typeof module === 'object' && module.exports) {
+      // Node. Does not work with strict CommonJS, but
+      // only CommonJS-like environments that support module.exports,
+      // like Node.
+      module.exports = factory(require('leaflet'), require('echarts'));
+    } else if (typeof root !== 'undefined' && root.L && root.echarts) {
+      // Browser globals (root is window)
+      LeafletEcharts = factory(L, echarts);
+    }
+  }(this, function(L, echarts) {
+      var LeafletMap; //Leaflet Map 
+      var EchartInstance; //Echart Instance
+      var maps = {};
+      var MAP_ATTRIBUTE_KEY = '_lmap_';
+      var mapidBase = new Date() - 0;
+  
+      //define LMapModel
+      var LMapModel = echarts.extendComponentModel({
+          type: 'lmap',
+  
+          getLMap : function() {
+              return this.__lmap;
+          },
+          
+                  
+          defaultOption: {
+              mapOptions : {
+                  center: [37.550339,104.114129],
+                  zoom: 5
+              }
+          }
+      });
+      
+      //define LMapView
+      var LMapView = echarts.extendComponentView({
+          type: 'lmap',
+  
+          render: function (lMapModel, ecModel, api) {
+          }
+      });
+      
+      //define EchartLayer
+      L.EchartLayer = L.Class.extend({
+          includes: [L.Evented.prototype],
+          _echartsContainer:null,
+          _map:null,
+          _api:null,
+          _ecModel:null,
+          _resizing:false,
+          
+          initialize:function(api, root) {
+              this._api = api;
+              this._echartsContainer= root ? root: api.getDom();
+          },
+          
+          getMap: function() {
+              return this._map;
+          },
+  
+          getOverLayer : function() {
+              return this.__overlayer;
+          },
+          _layerAdd: function (t) {
+              var i = t.target;
+              if (i.hasLayer(this)) {
+                  if (this._map = i,
+                      this._zoomAnimated = i._zoomAnimated,
+                      this.getEvents) {
+                      var e = this.getEvents();
+                      i.on(e, this),
+                          this.once("remove", function () {
+                              i.off(e, this)
+                          }, this)
+                  }
+                  this.onAdd(i),
+                      this.getAttribution && i.attributionControl && i.attributionControl.addAttribution(this.getAttribution()),
+                      this.fire("add"),
+                      i.fire("layeradd", {
+                          layer: this
+                      })
+              }
+          },
+          setModel: function(ecModel) {
+              this._ecModel = ecModel;
+          },
+          addTo: function (map) {
+              this.onAdd(map);
+          },
+          onAdd: function (map) {
+              this._map = map;
+              var size = map.getSize();
+              
+              map.getPanes().overlayPane.appendChild(this._echartsContainer);
+              
+              map.on('moveend', this._moveend, this);
+              map.on('resize', this._resize, this);
+          },
+          
+          _resize:function() {
+              var domPosition = this._map._getMapPanePos();
+              this._mapOffset = [-parseInt(domPosition.x) || 0, -parseInt(domPosition.y) || 0];
+              this._echartsContainer.style.left = this._mapOffset[0] + 'px';
+              this._echartsContainer.style.top = this._mapOffset[1] + 'px';
+              var size = this._map.getSize();
+              this._echartsContainer.style.height = size.y + 'px';
+              this._echartsContainer.style.width = size.x + 'px';
+              //resize over will moveend;
+              this._resizing=true;
+          },
+          
+  
+          _moveend : function() {
+              var domPosition = this._map._getMapPanePos();
+              this._mapOffset = [-parseInt(domPosition.x) || 0, -parseInt(domPosition.y) || 0];
+              this._echartsContainer.style.left = this._mapOffset[0] + 'px';
+              this._echartsContainer.style.top = this._mapOffset[1] + 'px';
+              if (this._resizing == true)
+              {
+                  this._resizing = false;
+                  var ec = echarts.getInstanceByDom(this._api.getDom());
+                  ec.resize();
+              } else {
+                  this._api.dispatchAction({
+                      type: 'mapMoveEnd'
+                  });
+              }
+          },
+          
+          onRemove: function (map) {
+              // remove layer's DOM elements and listeners
+              map.getPanes().overlayPane.removeChild(this._root);
+              map.off('viewreset', this._viewreset, this);
+              map.off('resize', this._resize, this);
+          }
+          
+      });
+          
+  
+      function LMapCoordSys(lmap, api) {
+          this._lmap = lmap;
+          this.dimensions = ['lng', 'lat'];
+          this._mapOffset = [0, 0];
+  
+          this._api = api;
+      }
+      
+      LMapCoordSys.prototype.dimensions = ['lng', 'lat'];
+  
+      LMapCoordSys.prototype.setMapOffset = function (mapOffset) {
+          this._mapOffset = mapOffset;
+      };
+  
+      LMapCoordSys.prototype.getLMap = function () {
+          return this._lmap;
+      };
+  
+      LMapCoordSys.prototype.dataToPoint = function (data) {
+          var point = new L.latLng(data[1], data[0]);
+          // TODO pointToOverlayPixel is toooooooo slow, cache the transform
+          var px = this._lmap.latLngToContainerPoint(point);
+          var mapOffset = this._mapOffset;
+          return [px.x - mapOffset[0], px.y - mapOffset[1]];
+      };
+  
+      LMapCoordSys.prototype.pointToData = function (pt) {
+          var mapOffset = this._mapOffset;
+          var pt = this._lmap.containerPointToLatLng({
+              x: pt[0] + mapOffset[0],
+              y: pt[1] + mapOffset[1]
+          });
+          return [pt.lat, pt.lng];
+      };
+  
+      LMapCoordSys.prototype.getViewRect = function () {
+          var api = this._api;
+          return new echarts.graphic.BoundingRect(0, 0, api.getWidth(), api.getHeight());
+      };
+  
+      LMapCoordSys.prototype.getRoamTransform = function () {
+          return echarts.matrix.create();
+      };
+      
+      // For deciding which dimensions to use when creating list data
+      LMapCoordSys.dimensions = LMapCoordSys.prototype.dimensions;
+      
+      LMapCoordSys.create = function (ecModel, api) {
+          var lmapCoordSys;
+  
+          ecModel.eachComponent('lmap', function (lmapModel) {
+              if (lmapCoordSys) {
+                  throw new Error('Only one lmap component can exist');
+              }
+  
+              var root = api.getDom();
+              var key = root.getAttribute(MAP_ATTRIBUTE_KEY);
+              var viewportRoot;
+  
+              if (!key) {
+                  
+                  viewportRoot = api.getZr().painter.getViewportRoot();
+                  if (typeof L === 'undefined') {
+                      throw new Error('LMap api is not loaded');
+                  }
+  
+                  // Not support IE8
+                  var lmapRoot = root.querySelector('.ec-extension-lmap');
+                  if (lmapRoot) {
+                      // Reset viewport left and top, which will be changed
+                      // in moving handler in BMapView
+                      viewportRoot.style.left = '0px';
+                      viewportRoot.style.top = '0px';
+                      root.removeChild(lmapRoot);
+                  }
+                  lmapRoot = document.createElement('div');
+                  lmapRoot.style.cssText = 'width:100%;height:100%';
+                  // Not support IE8
+                  lmapRoot.classList.add('ec-extension-lmap');
+                  root.appendChild(lmapRoot);
+                  var opts = lmapModel.get('mapOptions');
+                  if (typeof opts == "function")
+                      opts = opts();
+                  var lmap = lmapModel.__lmap = new L.map(lmapRoot, opts);
+  
+                  var mapid = 'map_' + mapidBase++;
+                  maps[mapid] = lmap;
+                  root.setAttribute && root.setAttribute(MAP_ATTRIBUTE_KEY, mapid);
+              } else {
+                  lmapModel.__lmap = maps[key];
+              }
+  
+  
+              if (!lmapModel.__overlayer)
+              {
+                  var overlayer = lmapModel.__overlayer = new L.EchartLayer(api, viewportRoot);
+                  lmapModel.__lmap.addLayer(overlayer);
+                  lmapModel.__overlayer.setModel(lmapModel);
+              }
+  
+              lmapCoordSys = new LMapCoordSys(lmapModel.__lmap, api);
+              lmapCoordSys.setMapOffset(lmapModel.__mapOffset || [0, 0]);
+              lmapModel.coordinateSystem = lmapCoordSys;
+          });
+          
+          ecModel.eachComponent('geo', function (geoModel) {
+              var root = api.getDom();
+              var key = root.getAttribute(MAP_ATTRIBUTE_KEY);
+              if (!key)
+                  throw new Error('Must Init LeafletMap First!');
+              
+              var leafletMap = geoModel.__lmap = maps[key];
+              if (!lmapCoordSys) {
+                 lmapCoordSys = new LMapCoordSys(leafletMap, api);
+                 lmapCoordSys.setMapOffset(geoModel.__mapOffset || [0, 0]);
+              }
+              
+              if (!geoModel.__overlayer)
+              {
+                  var overlayer = geoModel.__overlayer = new L.EchartLayer(api);
+                  leafletMap.addLayer(overlayer);
+                  overlayer.setModel(geoModel);
+              }
+          });
+          
+          ecModel.eachSeries(function (seriesModel) {
+              var coordSys = seriesModel.get('coordinateSystem');
+              //series Lines only support geo coordSys;
+              if (coordSys === 'geo' || coordSys === 'lmap') {
+                  seriesModel.coordinateSystem = lmapCoordSys;
+              }
+          });
+          
+      };
+      
+      //register lmap coordinateSystem
+      echarts.registerCoordinateSystem(
+          'lmap', LMapCoordSys
+      );
+      
+      //register map moveend Action to UpdateLayout
+      echarts.registerAction({
+          type: 'mapMoveEnd',
+          event: 'mapMoveEnd',
+          update: 'updateLayout'
+      }, function (payload, ecModel) {
+          ecModel.eachComponent('lmap', function (lmapModel) {
+          });
+      });
+      
+      function LEResult(ec, dom, map)
+      {
+          this._ec = ec;
+          this._dom = dom;
+          this._map = map;
+      }
+  
+      LEResult.prototype.getMap = function() {
+          if (this._map)
+                  return this._map;
+          var mapid = this._dom.getAttribute(MAP_ATTRIBUTE_KEY);    
+          return maps[mapid];
+      } 
+  
+      LEResult.prototype.getEcharts = function() {
+          return this._ec;
+      }
+  
+      LEResult.prototype.getEchartLayer = function() {
+          var ec = this.getEcharts();
+          var mapModel = ec.getModel().getComponent('lmap');
+          if (!mapModel)
+              mapModel = ec.getModel().getComponent('geo');
+          return mapModel.__overlayer;
+      } 
+  
+      LEResult.prototype.setOption = function(option, notMerge, lazyUpdate) { 
+          this._ec.setOption(option,notMerge, lazyUpdate);
+      }
+
+   /* 
+   L.LeafletEcharts = L.Class.extend({
+        //init leaflet map, return map
+		initMap : function(id, options) {
+			this.map = LeafletMap = L.map(id, options);
+            var mapid = 'map_' + mapidBase++;
+            maps[mapid] = this.map;
+			var div =  this.echartDom = document.createElement('div');
+			var size = this.map.getSize();
+			div.style.position = "absolute";
+			div.style.height = size.y + 'px';
+			div.style.width = size.x + 'px';
+			div.style.top = 0;
+			div.style.left = 0;
+			var ec = EchartInstance = echarts.init(div);
+            div.setAttribute && div.setAttribute(MAP_ATTRIBUTE_KEY, mapid);
+			return this.map;
+		},
+        //get echart instance
+		getEcharts:function() {
+            if (this.echartDom)
+			    return echarts.getInstanceByDom(this.echartDom); //EchartInstance;
+            else
+                return null;
+		},
+        //get leaflet Layer for echart
+        getEchartLayer:function() {
+            var ec = this.getEcharts();
+            var mapModel = ec.getModel().getComponent('lmap');
+            if (!mapModel)
+                mapModel = ec.getModel().getComponent('geo');
+            return mapModel.__overlayer;
+        },
+        getLMap:function() {
+            if (this.map)
+                return this.map;
+            var mapid = this.echartDom.getAttribute(MAP_ATTRIBUTE_KEY);    
+            return maps[mapid];
+        },
+        initEcharts:function(dom) {
+            this.echartDom = dom;
+            var ec = EchartInstance = echarts.init(dom);
+            return ec;
+        }
+    }); */
+	return {
+        initMap : function(id, options) {
+			var map = L.map(id, options);
+            var mapid = 'map_' + mapidBase++;
+            maps[mapid] = map;
+			var div =  document.createElement('div');
+			var size = map.getSize();
+			div.style.position = "absolute";
+			div.style.height = size.y + 'px';
+			div.style.width = size.x + 'px';
+			div.style.top = 0;
+			div.style.left = 0;
+			var ec =  echarts.init(div);
+            div.setAttribute && div.setAttribute(MAP_ATTRIBUTE_KEY, mapid);
+			return new LEResult(ec, div, map);
+		},
+        initEcharts:function(dom) {
+            var ec = echarts.init(dom);
+            return new LEResult(ec, dom);
+        },
+        version: "2.0.0"
+    };
+
+}));

+!function(t,e){"function"==typeof define&&define.amd?define(["leaflet"],e):"object"==typeof module&&module.exports?module.exports=e(require("leaflet"),require("echarts")):"undefined"!=typeof t&&t.L&&t.echarts&&(LeafletEcharts=e(L,echarts))}(this,function(t,e){function i(t,e){this._lmap=t,this.dimensions=["lng","lat"],this._mapOffset=[0,0],this._api=e}function n(t,e,i){this._ec=t,this._dom=e,this._map=i}var o={},a="_lmap_",r=new Date-0;e.extendComponentModel({type:"lmap",getLMap:function(){return this.__lmap},defaultOption:{mapOptions:{center:[37.550339,104.114129],zoom:5}}}),e.extendComponentView({type:"lmap",render:function(t,e,i){}});return t.EchartLayer=t.Class.extend({includes:[t.Evented.prototype],_echartsContainer:null,_map:null,_api:null,_ecModel:null,_resizing:!1,initialize:function(t,e){this._api=t,this._echartsContainer=e?e:t.getDom()},getMap:function(){return this._map},getOverLayer:function(){return this.__overlayer},_layerAdd:function(t){var e=t.target;if(e.hasLayer(this)){if(this._map=e,this._zoomAnimated=e._zoomAnimated,this.getEvents){var i=this.getEvents();e.on(i,this),this.once("remove",function(){e.off(i,this)},this)}this.onAdd(e),this.getAttribution&&e.attributionControl&&e.attributionControl.addAttribution(this.getAttribution()),this.fire("add"),e.fire("layeradd",{layer:this})}},setModel:function(t){this._ecModel=t},addTo:function(t){this.onAdd(t)},onAdd:function(t){this._map=t;t.getSize();t.getPanes().overlayPane.appendChild(this._echartsContainer),t.on("moveend",this._moveend,this),t.on("resize",this._resize,this)},_resize:function(){var t=this._map._getMapPanePos();this._mapOffset=[-parseInt(t.x)||0,-parseInt(t.y)||0],this._echartsContainer.style.left=this._mapOffset[0]+"px",this._echartsContainer.style.top=this._mapOffset[1]+"px";var e=this._map.getSize();this._echartsContainer.style.height=e.y+"px",this._echartsContainer.style.width=e.x+"px",this._resizing=!0},_moveend:function(){var t=this._map._getMapPanePos();if(this._mapOffset=[-parseInt(t.x)||0,-parseInt(t.y)||0],this._echartsContainer.style.left=this._mapOffset[0]+"px",this._echartsContainer.style.top=this._mapOffset[1]+"px",1==this._resizing){this._resizing=!1;var i=e.getInstanceByDom(this._api.getDom());i.resize()}else this._api.dispatchAction({type:"mapMoveEnd"})},onRemove:function(t){t.getPanes().overlayPane.removeChild(this._root),t.off("viewreset",this._viewreset,this),t.off("resize",this._resize,this)}}),i.prototype.dimensions=["lng","lat"],i.prototype.setMapOffset=function(t){this._mapOffset=t},i.prototype.getLMap=function(){return this._lmap},i.prototype.dataToPoint=function(e){var i=new t.latLng(e[1],e[0]),n=this._lmap.latLngToContainerPoint(i),o=this._mapOffset;return[n.x-o[0],n.y-o[1]]},i.prototype.pointToData=function(t){var e=this._mapOffset,t=this._lmap.containerPointToLatLng({x:t[0]+e[0],y:t[1]+e[1]});return[t.lat,t.lng]},i.prototype.getViewRect=function(){var t=this._api;return new e.graphic.BoundingRect(0,0,t.getWidth(),t.getHeight())},i.prototype.getRoamTransform=function(){return e.matrix.create()},i.dimensions=i.prototype.dimensions,i.create=function(e,n){var s;e.eachComponent("lmap",function(e){if(s)throw new Error("Only one lmap component can exist");var p,h=n.getDom(),f=h.getAttribute(a);if(f)e.__lmap=o[f];else{if(p=n.getZr().painter.getViewportRoot(),"undefined"==typeof t)throw new Error("LMap api is not loaded");var l=h.querySelector(".ec-extension-lmap");l&&(p.style.left="0px",p.style.top="0px",h.removeChild(l)),l=document.createElement("div"),l.style.cssText="width:100%;height:100%",l.classList.add("ec-extension-lmap"),h.appendChild(l);var m=e.get("mapOptions");"function"==typeof m&&(m=m());var _=e.__lmap=new t.map(l,m),c="map_"+r++;o[c]=_,h.setAttribute&&h.setAttribute(a,c)}if(!e.__overlayer){var d=e.__overlayer=new t.EchartLayer(n,p);e.__lmap.addLayer(d),e.__overlayer.setModel(e)}s=new i(e.__lmap,n),s.setMapOffset(e.__mapOffset||[0,0]),e.coordinateSystem=s}),e.eachComponent("geo",function(e){var r=n.getDom(),p=r.getAttribute(a);if(!p)throw new Error("Must Init LeafletMap First!");var h=e.__lmap=o[p];if(s||(s=new i(h,n),s.setMapOffset(e.__mapOffset||[0,0])),!e.__overlayer){var f=e.__overlayer=new t.EchartLayer(n);h.addLayer(f),f.setModel(e)}}),e.eachSeries(function(t){var e=t.get("coordinateSystem");"geo"!==e&&"lmap"!==e||(t.coordinateSystem=s)})},e.registerCoordinateSystem("lmap",i),e.registerAction({type:"mapMoveEnd",event:"mapMoveEnd",update:"updateLayout"},function(t,e){e.eachComponent("lmap",function(t){})}),n.prototype.getMap=function(){if(this._map)return this._map;var t=this._dom.getAttribute(a);return o[t]},n.prototype.getEcharts=function(){return this._ec},n.prototype.getEchartLayer=function(){var t=this.getEcharts(),e=t.getModel().getComponent("lmap");return e||(e=t.getModel().getComponent("geo")),e.__overlayer},n.prototype.setOption=function(t,e,i){this._ec.setOption(t,e,i)},{initMap:function(i,s){var p=t.map(i,s),h="map_"+r++;o[h]=p;var f=document.createElement("div"),l=p.getSize();f.style.position="absolute",f.style.height=l.y+"px",f.style.width=l.x+"px",f.style.top=0,f.style.left=0;var m=e.init(f);return f.setAttribute&&f.setAttribute(a,h),new n(m,f,p)},initEcharts:function(t){var i=e.init(t);return new n(i,t)},version:"2.0.0"}});

+<html>
+<head>
+    <title>Basic</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+     <link rel="stylesheet" href="../libs/leaflet/dist/leaflet.css"/>
+    <style>
+        #map {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            width: 100%;
+        }
+    </style>
+</head>
+<body>
+<div id="map"></div>
+<script src="../libs/jquery/dist/jquery.min.js"></script>
+<script src="../libs/leaflet/dist/leaflet.js"></script>
+
+<script src="../node_modules/pbf/dist/pbf.js"></script>
+<script src="../src/point-geometry.js"></script>
+
+<script src="../src/vectorTileFeature.js"></script>
+<script src="../src/vectorTileLayer.js"></script>
+<script src="../src/vector-tile.js"></script>
+
+<script src="../src/MVTUtil.js"></script>
+<script src="../src/StaticLabel.js"></script>
+<script src="../src/MVTFeature.js"></script>
+<script src="../src/MVTLayer.js"></script>
+<script src="../src/MVTSource.js"></script>
+<script>
+    var debug = {};
+
+var map = L.map('map').setView([0, 0], 1); // africa
+
+L.tileLayer('http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
+  maxZoom: 18,
+  id: 'examples.map-i86knfo3'
+}).addTo(map);
+
+
+var mvtSource = new L.TileLayer.MVTSource({
+  //url: "http://spatialserver.spatialdev.com/services/vector-tiles/GAUL_FSP/{z}/{x}/{y}.pbf",
+  url: "http://172.26.60.12/osm08/{z}/{x}/{y}.pbf",
+  debug: false,
+  clickableLayers: ["GAUL0"],
+  getIDForLayerFeature: function(feature) {
+    return feature.properties.id;
+  },
+
+  /**
+   * The filter function gets called when iterating though each vector tile feature (vtf). You have access
+   * to every property associated with a given feature (the feature, and the layer). You can also filter
+   * based of the context (each tile that the feature is drawn onto).
+   *
+   * Returning false skips over the feature and it is not drawn.
+   *
+   * @param feature
+   * @returns {boolean}
+   */
+  filter: function(feature, context) {
+    if (feature.layer.name === 'water') {
+      return true;
+    }
+    return true;
+  },
+
+  style: function (feature) {
+    var style = {};
+
+    var type = feature.type;
+    switch (type) {
+      case 1: //'Point'
+        style.color = 'rgba(49,79,79,1)';
+        style.radius = 5;
+        style.selected = {
+          color: 'rgba(255,255,0,0.5)',
+          radius: 6
+        };
+        break;
+      case 2: //'LineString'
+        style.color = 'rgba(161,217,155,0.8)';
+        style.size = 3;
+        style.selected = {
+          color: 'rgba(255,25,0,0.5)',
+          size: 4
+        };
+        break;
+      case 3: //'Polygon'
+        style.color = fillColor;
+        style.outline = {
+          color: strokeColor,
+          size: 1
+        };
+        style.selected = {
+          color: 'rgba(255,140,0,0.3)',
+          outline: {
+            color: 'rgba(255,140,0,1)',
+            size: 2
+          }
+        };
+        break;
+    }
+    return style;
+  }
+
+});
+debug.mvtSource = mvtSource;
+
+//Globals that we can change later.
+var fillColor = 'rgba(149,139,255,0.4)';
+var strokeColor = 'rgb(20,20,20)';
+
+//Add layer
+map.addLayer(mvtSource);
+</script>
+</body>
+</html>