增加echarts的od库 https://github.com/lzxue/echartsLayer/tree/master

cdn/src/libs/echarts/EchartsLayer.js

+/*!
+ *     Copyright (c) 2016 @thinkinggis
+ *     Copyright© 2000-2017 SuperMap Software Co. Ltdnpm
+ *     echartsLayer.
+ *     github: https://github.com/SuperMap/echartsLayer
+ *     license: MIT
+ */
+(function webpackUniversalModuleDefinition(root, factory) {
+	if(typeof exports === 'object' && typeof module === 'object')
+		module.exports = factory(require("echarts"));
+	else if(typeof define === 'function' && define.amd)
+		define(["echarts"], factory);
+	else if(typeof exports === 'object')
+		exports["EchartsLayer"] = factory(require("echarts"));
+	else
+		root["EchartsLayer"] = factory(root["echarts"]);
+})(window, function(__WEBPACK_EXTERNAL_MODULE__0__) {
+return /******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__webpack_require__.t = function(value, mode) {
+/******/ 		if(mode & 1) value = __webpack_require__(value);
+/******/ 		if(mode & 8) return value;
+/******/ 		if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
+/******/ 		var ns = Object.create(null);
+/******/ 		__webpack_require__.r(ns);
+/******/ 		Object.defineProperty(ns, 'default', { enumerable: true, value: value });
+/******/ 		if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
+/******/ 		return ns;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 1);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE__0__;
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports, __webpack_require__) {
+
+__webpack_require__(2)
+var EchartsLayer=__webpack_require__(6)
+module.exports=EchartsLayer;
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var __WEBPACK_AMD_DEFINE_RESULT__;/**
+ * GLMap component extension
+ */
+!(__WEBPACK_AMD_DEFINE_RESULT__ = (function (require) {
+  __webpack_require__(0).registerCoordinateSystem(
+    'GLMap', __webpack_require__(3)
+  )
+  __webpack_require__(4)
+  __webpack_require__(5)
+
+  // Action
+  __webpack_require__(0).registerAction({
+    type: 'GLMapRoam',
+    event: 'GLMapRoam',
+    update: 'updateLayout'
+  }, function (payload, ecModel) {})
+
+  return {
+    version: '1.0.0'
+  }
+}).call(exports, __webpack_require__, exports, module),
+				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__))
+
+
+
+
+/***/ }),
+/* 3 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_RESULT__ = (function (require) {
+    var echarts = __webpack_require__(0)
+
+    function GLMapCoordSys(GLMap, api) {
+        this._GLMap = GLMap
+        this.dimensions = ['lng', 'lat']
+        this._mapOffset = [0, 0]
+
+        this._api = api
+    }
+
+    GLMapCoordSys.prototype.dimensions = ['lng', 'lat']
+
+    GLMapCoordSys.prototype.setMapOffset = function (mapOffset) {
+        this._mapOffset = mapOffset
+    }
+
+    GLMapCoordSys.prototype.getBMap = function () {
+        return this._GLMap
+    }
+
+    GLMapCoordSys.prototype.fixLat=function(lat) {
+        if(lat>=90){
+            return 89.99999999999999;
+        }
+        if(lat<=-90){
+            return -89.99999999999999;
+        }
+        return  lat;
+    }
+
+    GLMapCoordSys.prototype.dataToPoint = function (data) {
+        data[1]= this.fixLat(data[1]);
+        var px = this._GLMap.project(data)
+
+        var mapOffset = this._mapOffset
+
+        return [px.x - mapOffset[0], px.y - mapOffset[1]]
+    }
+
+    GLMapCoordSys.prototype.pointToData = function (pt) {
+        var mapOffset = this._mapOffset
+        var pt = this._bmap.project(
+            [pt[0] + mapOffset[0],
+                pt[1] + mapOffset[1]]
+        )
+        return [pt.lng, pt.lat]
+    }
+
+    GLMapCoordSys.prototype.getViewRect = function () {
+        var api = this._api
+        return new echarts.graphic.BoundingRect(0, 0, api.getWidth(), api.getHeight())
+    }
+
+    GLMapCoordSys.prototype.getRoamTransform = function () {
+        return echarts.matrix.create()
+    }
+
+    GLMapCoordSys.prototype.prepareCustoms = function (data) {
+        var zrUtil = echarts.util;
+
+        var rect = this.getViewRect();
+        return {
+            coordSys: {
+                // The name exposed to user is always 'cartesian2d' but not 'grid'.
+                type: 'GLMap',
+                x: rect.x,
+                y: rect.y,
+                width: rect.width,
+                height: rect.height
+            },
+            api: {
+                coord: zrUtil.bind(this.dataToPoint, this),
+                size: zrUtil.bind(dataToCoordSize, this)
+            }
+        };
+
+        function dataToCoordSize(dataSize, dataItem) {
+            dataItem = dataItem || [0, 0];
+            return zrUtil.map([0, 1], function (dimIdx) {
+                var val = dataItem[dimIdx];
+                var halfSize = dataSize[dimIdx] / 2;
+                var p1 = [];
+                var p2 = [];
+                p1[dimIdx] = val - halfSize;
+                p2[dimIdx] = val + halfSize;
+                p1[1 - dimIdx] = p2[1 - dimIdx] = dataItem[1 - dimIdx];
+                return Math.abs(this.dataToPoint(p1)[dimIdx] - this.dataToPoint(p2)[dimIdx]);
+            }, this);
+        }
+    }
+
+    // For deciding which dimensions to use when creating list data
+    GLMapCoordSys.dimensions = GLMapCoordSys.prototype.dimensions
+
+    GLMapCoordSys.create = function (ecModel, api) {
+        var coordSys;
+
+        ecModel.eachComponent('GLMap', function (GLMapModel) {
+            var viewportRoot = api.getZr().painter.getViewportRoot()
+            var GLMap = echarts.glMap;
+            coordSys = new GLMapCoordSys(GLMap, api)
+            coordSys.setMapOffset(GLMapModel.__mapOffset || [0, 0])
+            GLMapModel.coordinateSystem = coordSys
+        })
+
+        ecModel.eachSeries(function (seriesModel) {
+            if (seriesModel.get('coordinateSystem') === 'GLMap') {
+                seriesModel.coordinateSystem = coordSys
+            }
+        })
+    }
+
+    return GLMapCoordSys
+}).call(exports, __webpack_require__, exports, module),
+				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__))
+
+
+/***/ }),
+/* 4 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_RESULT__ = (function (require) {
+
+    return __webpack_require__(0).extendComponentModel({
+        type: 'GLMap',
+
+        getBMap: function () {
+            // __bmap is injected when creating BMapCoordSys
+            return this.__GLMap;
+        },
+
+        defaultOption: {
+            roam: false
+        }
+    });
+}).call(exports, __webpack_require__, exports, module),
+				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
+
+/***/ }),
+/* 5 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_RESULT__ = (function (require) {
+  return __webpack_require__(0).extendComponentView({
+    type: 'GLMap',
+
+    render: function (GLMapModel, ecModel, api) {
+      var rendering = true
+
+      var glMap = __webpack_require__(0).glMap
+
+
+      var viewportRoot = api.getZr().painter.getViewportRoot()
+      var coordSys = GLMapModel.coordinateSystem
+      var moveHandler = function (type, target) {
+        if (rendering) {
+          return
+        }
+        // var offsetEl = viewportRoot.parentNode.parentNode.parentNode
+        var offsetEl = document.getElementsByClassName('mapboxgl-map')[0];
+
+        var mapOffset = [
+          -parseInt(offsetEl.style.left, 10) || 0,
+          -parseInt(offsetEl.style.top, 10) || 0
+        ]
+        viewportRoot.style.left = mapOffset[0] + 'px'
+        viewportRoot.style.top = mapOffset[1] + 'px'
+
+        coordSys.setMapOffset(mapOffset)
+        GLMapModel.__mapOffset = mapOffset
+
+        api.dispatchAction({
+          type: 'GLMapRoam'
+        })
+      }
+
+      function zoomEndHandler () {
+        if (rendering) {
+          return
+        }
+        api.dispatchAction({
+          type: 'GLMapRoam'
+        })
+      }
+
+      glMap.off('move', this._oldMoveHandler)
+      // FIXME
+      // Moveend may be triggered by centerAndZoom method when creating coordSys next time
+      // glMap.removeEventListener('moveend', this._oldMoveHandler)
+      glMap.off('zoomend', this._oldZoomEndHandler)
+      glMap.on('move', moveHandler)
+      // glMap.addEventListener('moveend', moveHandler)
+      glMap.on('zoomend', zoomEndHandler)
+
+      this._oldMoveHandler = moveHandler
+      this._oldZoomEndHandler = zoomEndHandler
+
+      var roam = GLMapModel.get('roam')
+      if (roam && roam !== 'scale') {
+        // todo 允许拖拽
+      }else {
+        // todo 不允许拖拽
+      }
+      if (roam && roam !== 'move') {
+        // todo 允许移动
+      }else {
+        // todo 不允许允许移动
+      }
+
+
+
+      rendering = false
+    }
+  })
+}).call(exports, __webpack_require__, exports, module),
+				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__))
+
+
+/***/ }),
+/* 6 */
+/***/ (function(module, exports, __webpack_require__) {
+
+function EchartsLayer(map) {
+  var echarts = __webpack_require__(0);
+  const mapContainer = map.getCanvasContainer();
+  this._container = document.createElement('div');
+  this._container.style.width = map.getCanvas().style.width;
+  this._container.style.height = map.getCanvas().style.height;
+  this._container.setAttribute('id', 'echarts');
+  this._container.setAttribute('class', 'echartMap');
+  this._map = map;
+  mapContainer.appendChild(this._container);
+  this.chart = echarts.init(this._container);
+  echarts.glMap = map;
+  this.resize();
+}
+EchartsLayer.prototype.remove = function() {
+  var _this = this;
+  this._map._listeners.move.forEach(function(element) {
+    if (element.name === 'moveHandler') {
+      _this._map.off('move', element);
+    }
+  });
+  this._map._listeners.move.forEach(function(element) {
+    if (element.name === 'zoomEndHandler') {
+      _this._map.off('zoomend', element);
+    }
+  });
+
+  // this._map.off('move', this._map._listeners.move[1]);
+  // this._map.off('zoomend', this._map._listeners.moveend[1]);
+  this.chart.clear();
+  if(this._container.parentNode)
+  this._container.parentNode.removeChild(this._container);
+  this._map = undefined;
+};
+EchartsLayer.prototype.resize = function() {
+  const me = this;
+  window.onresize = function() {
+    me._container.style.width = me._map.getCanvas().style.width;
+    me._container.style.height = me._map.getCanvas().style.height;
+    me.chart.resize();
+  };
+};
+module.exports = EchartsLayer;
+
+
+/***/ })
+/******/ ]);
+});
\ No newline at end of file

cdn/src/libs/echarts/EchartsLayer.min.js

+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e(require("echarts")):"function"==typeof define&&define.amd?define(["echarts"],e):"object"==typeof exports?exports.EchartsLayer=e(require("echarts")):t.EchartsLayer=e(t.echarts)}(window,(function(t){return function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(e,n){e.exports=t},function(t,e,n){n(2);var o=n(6);t.exports=o},function(t,e,n){var o;void 0===(o=function(t){return n(0).registerCoordinateSystem("GLMap",n(3)),n(4),n(5),n(0).registerAction({type:"GLMapRoam",event:"GLMapRoam",update:"updateLayout"},(function(t,e){})),{version:"1.0.0"}}.call(e,n,e,t))||(t.exports=o)},function(t,e,n){var o;void 0===(o=function(t){var e=n(0);function o(t,e){this._GLMap=t,this.dimensions=["lng","lat"],this._mapOffset=[0,0],this._api=e}return o.prototype.dimensions=["lng","lat"],o.prototype.setMapOffset=function(t){this._mapOffset=t},o.prototype.getBMap=function(){return this._GLMap},o.prototype.fixLat=function(t){return t>=90?89.99999999999999:t<=-90?-89.99999999999999:t},o.prototype.dataToPoint=function(t){t[1]=this.fixLat(t[1]);var e=this._GLMap.project(t),n=this._mapOffset;return[e.x-n[0],e.y-n[1]]},o.prototype.pointToData=function(t){var e=this._mapOffset;return[(t=this._bmap.project([t[0]+e[0],t[1]+e[1]])).lng,t.lat]},o.prototype.getViewRect=function(){var t=this._api;return new e.graphic.BoundingRect(0,0,t.getWidth(),t.getHeight())},o.prototype.getRoamTransform=function(){return e.matrix.create()},o.prototype.prepareCustoms=function(t){var n=e.util,o=this.getViewRect();return{coordSys:{type:"GLMap",x:o.x,y:o.y,width:o.width,height:o.height},api:{coord:n.bind(this.dataToPoint,this),size:n.bind((function(t,e){return e=e||[0,0],n.map([0,1],(function(n){var o=e[n],r=t[n]/2,i=[],a=[];return i[n]=o-r,a[n]=o+r,i[1-n]=a[1-n]=e[1-n],Math.abs(this.dataToPoint(i)[n]-this.dataToPoint(a)[n])}),this)}),this)}}},o.dimensions=o.prototype.dimensions,o.create=function(t,n){var r;t.eachComponent("GLMap",(function(t){n.getZr().painter.getViewportRoot();var i=e.glMap;(r=new o(i,n)).setMapOffset(t.__mapOffset||[0,0]),t.coordinateSystem=r})),t.eachSeries((function(t){"GLMap"===t.get("coordinateSystem")&&(t.coordinateSystem=r)}))},o}.call(e,n,e,t))||(t.exports=o)},function(t,e,n){var o;void 0===(o=function(t){return n(0).extendComponentModel({type:"GLMap",getBMap:function(){return this.__GLMap},defaultOption:{roam:!1}})}.call(e,n,e,t))||(t.exports=o)},function(t,e,n){var o;void 0===(o=function(t){return n(0).extendComponentView({type:"GLMap",render:function(t,e,o){var r=!0,i=n(0).glMap,a=o.getZr().painter.getViewportRoot(),s=t.coordinateSystem,p=function(e,n){if(!r){var i=document.getElementsByClassName("mapboxgl-map")[0],p=[-parseInt(i.style.left,10)||0,-parseInt(i.style.top,10)||0];a.style.left=p[0]+"px",a.style.top=p[1]+"px",s.setMapOffset(p),t.__mapOffset=p,o.dispatchAction({type:"GLMapRoam"})}};function c(){r||o.dispatchAction({type:"GLMapRoam"})}i.off("move",this._oldMoveHandler),i.off("zoomend",this._oldZoomEndHandler),i.on("move",p),i.on("zoomend",c),this._oldMoveHandler=p,this._oldZoomEndHandler=c;t.get("roam");r=!1}})}.call(e,n,e,t))||(t.exports=o)},function(t,e,n){function o(t){var e=n(0);const o=t.getCanvasContainer();this._container=document.createElement("div"),this._container.style.width=t.getCanvas().style.width,this._container.style.height=t.getCanvas().style.height,this._container.setAttribute("id","echarts"),this._container.setAttribute("class","echartMap"),this._map=t,o.appendChild(this._container),this.chart=e.init(this._container),e.glMap=t,this.resize()}o.prototype.remove=function(){var t=this;this._map._listeners.move.forEach((function(e){"moveHandler"===e.name&&t._map.off("move",e)})),this._map._listeners.move.forEach((function(e){"zoomEndHandler"===e.name&&t._map.off("zoomend",e)})),this.chart.clear(),this._container.parentNode&&this._container.parentNode.removeChild(this._container),this._map=void 0},o.prototype.resize=function(){const t=this;window.onresize=function(){t._container.style.width=t._map.getCanvas().style.width,t._container.style.height=t._map.getCanvas().style.height,t.chart.resize()}},t.exports=o}])}));
\ No newline at end of file