leaflet-echarts的地图

Posted 2020-07-08 时光飞仔

参考http://wandergis.com/leaflet-echarts/src/leaflet-echarts.js

(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‘));
  } else if (typeof root !== ‘undefined‘ && root.L) {
    // Browser globals (root is window)
    root.L.echartsLayer = factory(L);
  }
}(this, function(L) {
  L.EchartsLayer = L.Class.extend({
    includes: [L.Mixin.Events],
    _echartsContainer: null,
    _map: null,
    _ec: null,
    _option: null,
    _geoCoord: [],
    _mapOffset: [0, 0],
    _delta: 0,
    _startTime: null,
    _lastMousePos: null,
    initialize: function(map, ec) {
      this._map = map;
      map.scrollWheelZoom.disable();
      var size = map.getSize();
      var div = this._echartsContainer = document.createElement(‘div‘);
      div.style.position = ‘absolute‘;
      div.style.height = size.y + ‘px‘;
      div.style.width = size.x + ‘px‘;
      div.style.top = 0;
      div.style.left = 0;
      map.getPanes().overlayPane.appendChild(div);
      this._init(map, ec);
    },
    _init: function(map, ec) {
      var self = this;
      self._map = map;
      //初始化mapoverlay
      /**
       * 获取echarts容器
       *
       * @return {htmlElement}
       * @public
       */
      self.getEchartsContainer = function() {
        return self._echartsContainer;
      };

      /**
       * 获取map实例
       *
       * @return {map.Map}
       * @public
       */
      self.getMap = function() {
        return self._map;
      };
      /**
       * 经纬度转换为屏幕像素
       *
       * @param {Array.<number>} geoCoord  经纬度
       * @return {Array.<number>}
       * @public
       */
      self.geoCoord2Pixel = function(geoCoord) {
        var point = new L.latLng(geoCoord[1], geoCoord[0]);
        var pos = self._map.latLngToContainerPoint(point);
        return [pos.x, pos.y];
      };

      /**
       * 屏幕像素转换为经纬度
       *
       * @param {Array.<number>} pixel  像素坐标
       * @return {Array.<number>}
       * @public
       */
      self.pixel2GeoCoord = function(pixel) {
        var point = self._map.containerPointToLatLng(L.point(pixel[0], pixel[1]));
        return [point.lng, point.lat];
      };

      /**
       * 初始化echarts实例
       *
       * @return {ECharts}
       * @public
       */
      self.initECharts = function() {
        self._ec = ec.init.apply(self, arguments);
        self._bindEvent();
        self._addMarkWrap();
        return self._ec;
      };

      // addMark wrap for get position from baidu map by geo location
      // by kener at 2015.01.08
      self._addMarkWrap = function() {
        function _addMark(seriesIdx, markData, markType) {
          var data;
          if (markType == ‘markPoint‘) {
            var data = markData.data;
            if (data && data.length) {
              for (var k = 0, len = data.length; k < len; k++) {
                if (!(data[k].name && this._geoCoord.hasOwnProperty(data[k].name))) {
                  data[k].name = k + ‘markp‘;
                  self._geoCoord[data[k].name] = data[k].geoCoord;
                }
                self._AddPos(data[k]);
              }
            }
          } else {
            data = markData.data;
            if (data && data.length) {
              for (var k = 0, len = data.length; k < len; k++) {
                if (!(data[k][0].name && this._geoCoord.hasOwnProperty(data[k][0].name))) {
                  data[k][0].name = k + ‘startp‘;
                  self._geoCoord[data[k][0].name] = data[k][0].geoCoord;
                }
                if (!(data[k][1].name && this._geoCoord.hasOwnProperty(data[k][1].name))) {
                  data[k][1].name = k + ‘endp‘;
                  self._geoCoord[data[k][1].name] = data[k][1].geoCoord;
                }
                self._AddPos(data[k][0]);
                self._AddPos(data[k][1]);
              }
            }
          }
          self._ec._addMarkOri(seriesIdx, markData, markType);
        }

        self._ec._addMarkOri = self._ec._addMark;
        self._ec._addMark = _addMark;
      };

      /**
       * 获取ECharts实例
       *
       * @return {ECharts}
       * @public
       */
      self.getECharts = function() {
        return self._ec;
      };

      /**
       * 获取地图的偏移量
       *
       * @return {Array.<number>}
       * @public
       */
      self.getMapOffset = function() {
        return self._mapOffset;
      };

      /**
       * 对echarts的setOption加一次处理
       * 用来为markPoint、markLine中添加x、y坐标，需要name与geoCoord对应
       *
       * @public
       * @param option
       * @param notMerge
       */
      self.setOption = function(option, notMerge) {
        self._option = option;
        var series = option.series || {};

        // 记录所有的geoCoord
        for (var i = 0, item; item = series[i++];) {
          var geoCoord = item.geoCoord;
          if (geoCoord) {
            for (var k in geoCoord) {
              self._geoCoord[k] = geoCoord[k];
            }
          }
        }

        // 添加x、y
        for (var i = 0, item; item = series[i++];) {
          var markPoint = item.markPoint || {};
          var markLine = item.markLine || {};

          var data = markPoint.data;
          if (data && data.length) {
            for (var k = 0, len = data.length; k < len; k++) {
              if (!(data[k].name && this._geoCoord.hasOwnProperty(data[k].name))) {
                data[k].name = k + ‘markp‘;
                self._geoCoord[data[k].name] = data[k].geoCoord;
              }
              self._AddPos(data[k]);
            }
          }

          data = markLine.data;
          if (data && data.length) {
            for (var k = 0, len = data.length; k < len; k++) {
              if (!(data[k][0].name && this._geoCoord.hasOwnProperty(data[k][0].name))) {
                data[k][0].name = k + ‘startp‘;
                self._geoCoord[data[k][0].name] = data[k][0].geoCoord;
              }
              if (!(data[k][1].name && this._geoCoord.hasOwnProperty(data[k][1].name))) {
                data[k][1].name = k + ‘endp‘;
                self._geoCoord[data[k][1].name] = data[k][1].geoCoord;
              }
              self._AddPos(data[k][0]);
              self._AddPos(data[k][1]);
            }
          }
        }

        self._ec.setOption(option, notMerge);
      };

      /**
       * 增加x、y坐标
       *
       * @param {Object} obj  markPoint、markLine data中的项，必须有name
       * @param {Object} geoCoord
       */
      self._AddPos = function(obj) {

        var coord = self._geoCoord[obj.name];
        var pos = self.geoCoord2Pixel(coord);
        obj.x = pos[0]; //- self._mapOffset[0];
        obj.y = pos[1]; //- self._mapOffset[1];
      };

      /**
       * 绑定地图事件的处理方法
       *
       * @private
       */
      self._bindEvent = function() {
        self._map.on(‘move‘, _moveHandler(‘moving‘));
        self._map.on(‘moveend‘, _moveHandler(‘moveend‘));
        self._map.on(‘zoomstart‘, function() {
          self._ec.clear();
        });
        self._map.on(‘zoomend‘, _zoomChangeHandler);
        self._ec.getZrender().on(‘dragstart‘, _dragZrenderHandler(true));
        self._ec.getZrender().on(‘dragend‘, _dragZrenderHandler(false));
        self._ec.getZrender().on(‘mouseup‘, function() {
          // self.setOption(self._option);
          //修改了echarts源码解决了这个问题
        });
        self._ec.getZrender().on(‘mousedown‘, function() {
          // self._ec.clear();
          //修改了echarts源码解决了这个问题
        });
        self._ec.getZrender().on(‘mousewheel‘, function(e) {
          self._ec.clear(); //在mousewheel的时候清除echarts内容
          self._lastMousePos = self._map.mouseEventToContainerPoint(e.event);
          var delta = L.DomEvent.getWheelDelta(e.event);
          var map = self._map,
            zoom = map.getZoom();
          delta = delta > 0 ? Math.ceil(delta) : Math.floor(delta);
          delta = Math.max(Math.min(delta, 4), -4);
          delta = map._limitZoom(zoom + delta) - zoom;

          self._delta = 0;
          self._startTime = null;

          if (!delta) {
            return;
          }

          if (map.options.scrollWheelZoom === ‘center‘) {
            map.setZoom(zoom + delta);
          } else {
            map.setZoomAround(self._lastMousePos, zoom + delta);
          }
        });
      };

      /**
       * 地图缩放触发事件
       *
       * @private
       */
      function _zoomChangeHandler() {
        self.setOption(self._option);
      }

      // function _zoomatartChangeHandler() {
      //   self._ec.clear();
      // }

      /**
       * 地图移动、如拖拽触发事件
       *
       * @param {string} type moving | moveend  移动中|移动结束
       * @return {Function}
       * @private
       */
      function _moveHandler(type) {
        return function() {
          var domPosition = self._map._getMapPanePos();
          // 记录偏移量
          self._mapOffset = [-parseInt(domPosition.x) || 0, -parseInt(domPosition.y) || 0];
          self._echartsContainer.style.left = self._mapOffset[0] + ‘px‘;
          self._echartsContainer.style.top = self._mapOffset[1] + ‘px‘;
          //_fireEvent(type);
          if (type == ‘moving‘) {
            self._ec.clear();
          }
          if (type == ‘moveend‘) {
            self.setOption(self._option);
          }
        }
      }

      /**
       * Zrender拖拽触发事件
       *
       * @param {boolean} isStart
       * @return {Function}
       * @private
       */
      function _dragZrenderHandler(isStart) {

        return function() {
          var func = isStart ? ‘disable‘ : ‘enable‘;
          if (isStart) {
            self._ec.clear();
          } else {
            self.setOption(self._option);
          }
          self._map.dragging[func]();
        };
      }
    }
  });
  L.echartsLayer = function(map, ec) {
    return new L.EchartsLayer(map, ec);
  };
  return L.echartsLayer;
}));

 

看了这个源码之后一直有个疑问就是echarts的地图坐标和地图本身的坐标怎么对应上，因为我们在使用echarts时是，传入的坐标都是经纬度，这就说明它本身是有坐标系的，这个怎么和自己地图的坐标系对应起来呢。

后来发现echarts里options参数的series里面有个mapType参数，mapType为undefined时参数坐标的值为经纬度，mapType为none时参数的坐标轴为屏幕像素；

搞明白了这个，就好理解上面的源码了。参考这个源码就可以实现arcgis或者openLayers的扩展。