@alicloud/cloud-charts/es/Wmap/index.js


'use strict';

import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/extends";
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import * as React from 'react'; // DataSet

import { DataSet } from '@antv/data-set/lib/data-set';
import '@antv/data-set/lib/api/statistics';
import '@antv/data-set/lib/api/geo';
import '@antv/data-set/lib/connector/geojson';
import '@antv/data-set/lib/transform/map';
import '@antv/data-set/lib/transform/filter';
import '@antv/data-set/lib/transform/geo/projection';
import '@antv/data-set/lib/transform/geo/region';
import Base, { rootClassName } from '../common/Base';
import errorWrap from '../common/errorWrap'; // @ts-ignore

import chinaGeo from './mapData/chinaGeo.json';
import SouthChinaSea from './mapData/southChinaSea';
import { provinceName, positionMap } from './mapData/chinaGeoInfo';
import themes from '../themes/index';
import rectTooltip from '../common/rectTooltip';
import rectLegend from '../common/rectLegend';
import label from '../common/label';
import geomSize from '../common/geomSize';
import geomStyle from '../common/geomStyle';
import { MapArea, MapPoint, MapHeatMap, MapShoot, MapCustom } from './child';
import "./index.css";
import Wshoot from '../Wshoot';
import { FullCrossName } from '../constants';
import { warn } from '../common/log';
import { filterKey, merge } from '../common/common';
import { getText, getLanguage } from '../ChartProvider'; // 这几个地点太小，需要特殊处理边框颜色

var minArea = ['钓鱼岛', '赤尾屿', '香港', '澳门']; // 这几个地点需要特殊处理标签的文字大小

var minLabel = ['钓鱼岛', '赤尾屿']; // 特殊处理一些地区的label

var fixLngLatMap = {
  甘肃: [104.4948862, 35.0248462],
  河北: [115.5193875, 38.3062153],
  天津: [118.2141694, 38.8206246],
  澳门: [113.2573035, 21.7906005],
  香港: [114.9040905, 21.9265955],
  陕西: [108.5133047, 33.8799429],
  上海: [122.2818331, 31.0480268]
};
export var Map = /*#__PURE__*/function (_Base) {
  _inheritsLoose(Map, _Base);

  function Map() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _Base.call.apply(_Base, [this].concat(args)) || this;
    _this.state = {
      customPointLayer: [],
      shootLayer: [],
      southChinaSeaKey: 0
    };

    _this.convertPosition = function (d) {
      if (!d) {
        return undefined;
      }

      var point = convertPointPosition(_assertThisInitialized(_this), d);
      return _this.bgMapView.getXY(point);
    };

    _this.chartName = 'G2Map';
    _this.convertData = false;
    _this.geoData = null;
    _this.ds = null;
    _this.projection = null;
    _this.bgMapDataView = null;
    _this.bgMapView = null;
    _this.areaMapList = [];
    _this.areaMapDataView = null;
    _this.areaMapView = null;
    _this.pointMapList = [];
    _this.pointMapDataView = null;
    _this.pointMapView = null;
    _this.heatMapList = [];
    _this.heatMapDataView = null;
    _this.heatMapView = null;
    _this.labelMapView = null;
    _this.bgMapRatio = 1;
    _this.bgMapSize = [0, 0];
    return _this;
  }

  var _proto = Map.prototype;

  _proto.componentDidMount = function componentDidMount() {
    _Base.prototype.componentDidMount.call(this);

    this.convertChildren(this.props.children, this.props.config, true);
  };

  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
    if (!this.isReRendering && this.props.children !== prevProps.children) {
      this.convertChildren(this.props.children, this.props.config);
    }

    _Base.prototype.componentDidUpdate.call(this, prevProps);
  };

  _proto.shouldComponentUpdate = function shouldComponentUpdate() {
    return !(this.isReRendering || !this.chart);
  };

  _proto.rerender = function rerender() {
    _Base.prototype.rerender.call(this);

    var config = this.props.config || {}; // fix: 动态切换主题后南海诸岛地图没有更新

    if (config.showSouthChinaSea === undefined || config.showSouthChinaSea) {
      this.setState({
        southChinaSeaKey: this.state.southChinaSeaKey + 1
      });
    }
  };

  _proto.convertChildren = function convertChildren(children, config, isInit) {
    var _this2 = this;

    if (children === void 0) {
      children = this.props.children;
    }

    if (config === void 0) {
      config = this.props.config;
    }

    if (isInit === void 0) {
      isInit = false;
    }

    var customPointLayer = [];
    var shootLayer = [];
    React.Children.forEach(children, function (child, index) {
      if (!child) {
        return;
      } // @ts-ignore


      var props = child.props,
          type = child.type,
          key = child.key;

      if (type.displayName === MapCustom.displayName) {
        var newData = props.data;

        if (Array.isArray(newData)) {
          newData = newData.map(function (d) {
            var position = _this2.convertPosition(d ? _extends({}, d) : null);

            if (!position) {
              return null;
            }

            return _extends({}, d, {
              x: position.x,
              y: position.y
            });
          });
        }

        customPointLayer.push(_extends({}, props, {
          data: newData
        }));
        return;
      }

      if (type.displayName === MapShoot.displayName) {
        // 数据转换在 Shoot 内部完成
        shootLayer.push(props);
        return;
      }

      if (!isInit) {
        var _data = props.data,
            propsConfig = props.config;
        var layerConfig = Object.assign({}, filterKey(config, ['padding']), propsConfig);

        _this2.changeChildData(_this2.chart, layerConfig, type.displayName, _data, key || index);
      }
    });

    if (!isInit) {
      this.chart.render(true);
    }

    this.setState({
      customPointLayer: customPointLayer,
      shootLayer: shootLayer
    });
  };

  _proto.renderCustomPointLayer = function renderCustomPointLayer(layer, layerIndex) {
    if (!this.chart) {
      return null;
    }

    var data = layer.data,
        render = layer.render,
        otherProps = _objectWithoutPropertiesLoose(layer, ["data", "render"]);

    return /*#__PURE__*/React.createElement("div", {
      key: layerIndex,
      className: FullCrossName + "-map-custom-container"
    }, Array.isArray(data) && data.map(function (d, i) {
      if (!d) {
        return null;
      }

      var pointStyle = {
        left: d.x,
        top: d.y
      };
      return /*#__PURE__*/React.createElement("div", {
        key: i,
        className: FullCrossName + "-map-custom-point",
        style: pointStyle
      }, render && render(d, i, otherProps));
    }));
  };

  _proto.renderShootLayer = function renderShootLayer(shootProps, shootIndex) {
    if (!this.chart) {
      return null;
    }

    var className = shootProps.className,
        style = shootProps.style,
        otherShootProps = _objectWithoutPropertiesLoose(shootProps, ["className", "style"]);

    var _this$chart = this.chart,
        chartWidth = _this$chart.width,
        chartHeight = _this$chart.height; // const [width, height] = this.bgMapSize;
    // const layerStyle = {
    //   left: (chartWidth - width) / 2,
    //   top: (chartHeight - height) / 2,
    //   width,
    //   height,
    //   ...(style || {})
    // };

    return /*#__PURE__*/React.createElement(Wshoot, _extends({
      key: shootIndex,
      className: FullCrossName + "-map-shoot " + (className || ''),
      width: chartWidth,
      height: chartHeight,
      style: style,
      getPosition: this.convertPosition
    }, otherShootProps));
  };

  _proto.renderSouthChinaSea = function renderSouthChinaSea(rootConfig) {
    var config = merge({}, this.defaultConfig, rootConfig || {});

    if (config.showSouthChinaSea === undefined || config.showSouthChinaSea) {
      var southChinaSeaKey = this.state.southChinaSeaKey;

      var _ref = config.background || {},
          fill = _ref.fill;

      var mapColor = fill && !(fill !== null && fill !== void 0 && fill.startsWith('p(')) && !fill.startsWith('l(') && !fill.startsWith('r(') ? fill : themes['widgets-map-area-bg'];
      var labelColor = themes['widgets-color-text-3'];
      var currentLanguage = getLanguage() || this.context.language;
      return /*#__PURE__*/React.createElement(SouthChinaSea, {
        key: southChinaSeaKey,
        className: FullCrossName + "-map-south-china-sea",
        fontColor: labelColor,
        landColor: mapColor,
        lineColor: mapColor,
        boxColor: mapColor,
        islandColor: mapColor,
        southSeaText: getText('southsea', this.context.language, this.context.locale),
        southSeaFontSize: currentLanguage === 'zh-cn' || currentLanguage === 'ZH-CN' ? 8 : 4
      });
    } else {
      return null;
    }
  };

  _proto.render = function render() {
    var _this3 = this;

    var _this$props = this.props,
        _this$props$className = _this$props.className,
        className = _this$props$className === void 0 ? '' : _this$props$className,
        style = _this$props.style,
        children = _this$props.children,
        data = _this$props.data,
        width = _this$props.width,
        height = _this$props.height,
        padding = _this$props.padding,
        geoData = _this$props.geoData,
        config = _this$props.config,
        language = _this$props.language,
        event = _this$props.event,
        interaction = _this$props.interaction,
        getChartInstance = _this$props.getChartInstance,
        enableFunctionUpdate = _this$props.enableFunctionUpdate,
        renderer = _this$props.renderer,
        animate = _this$props.animate,
        otherProps = _objectWithoutPropertiesLoose(_this$props, ["className", "style", "children", "data", "width", "height", "padding", "geoData", "config", "language", "event", "interaction", "getChartInstance", "enableFunctionUpdate", "renderer", "animate"]);

    var _this$state = this.state,
        customPointLayer = _this$state.customPointLayer,
        shootLayer = _this$state.shootLayer;
    return /*#__PURE__*/React.createElement("div", _extends({
      ref: function ref(dom) {
        return _this3.chartDom = dom;
      },
      id: this.chartId,
      className: rootClassName + 'G2Map ' + className,
      style: style
    }, otherProps), this.renderSouthChinaSea(config), shootLayer.length > 0 && shootLayer.map(function (shoot, i) {
      return _this3.renderShootLayer(shoot, i);
    }), customPointLayer.length > 0 && customPointLayer.map(function (layer, i) {
      return _this3.renderCustomPointLayer(layer, i);
    }));
  };

  _proto.getDefaultConfig = function getDefaultConfig() {
    return {
      padding: [20, 20, 20, 20],
      background: {
        fill: themes['widgets-map-area-bg'],
        stroke: themes['widgets-map-area-border']
      },
      areaColors: themes.order_10,
      pointColors: themes.category_12,
      heatColors: 'rgb(0,0,255)-rgb(0,255,0)-rgb(255,255,0)-rgb(255,0,0)',
      type: 'china',
      showSouthChinaSea: true,
      projection: null,
      legend: {
        position: 'left',
        align: 'bottom',
        nameFormatter: null // 可以强制覆盖，手动设置label

      },
      tooltip: {
        nameFormatter: null,
        valueFormatter: null
      },
      labels: false,
      label: false
    };
  };

  _proto.beforeInit = function beforeInit(props) {
    var geoData = props.geoData;

    if (geoData) {
      this.geoData = geoData;
    }

    return props;
  };

  _proto.init = function init(chart, config) {
    var _this4 = this;

    // 同步度量
    chart.scale({
      longitude: {
        sync: true
      },
      latitude: {
        sync: true
      },
      x: {
        nice: false,
        sync: true
      },
      y: {
        nice: false,
        sync: true
      }
    }); // 设置了 geo.projection 变换后，几何体的坐标系和图表的坐标系（从左下角到右上角）上下相反，所以设置镜像使地图的坐标正确。

    chart.coordinate().reflect('y');
    chart.axis(false);
    rectTooltip(this, chart, config, {
      showTitle: false
    }, function (ev) {
      if (typeof config.tooltip === 'boolean') {
        return;
      }

      var _config$tooltip = config.tooltip,
          nameFormatter = _config$tooltip.nameFormatter,
          valueFormatter = _config$tooltip.valueFormatter;
      var items = ev.data.items;
      items.forEach(function (item, index) {
        var raw = item.data || {};

        if (valueFormatter) {
          item.value = valueFormatter(item.value, raw, index, items);
        }

        if (nameFormatter) {
          item.name = nameFormatter(item.name, raw, index, items);
        }
      });
    }, {
      showTitle: false,
      showCrosshairs: false,
      // crosshairs: null,
      showMarkers: false
    }); // 设置图例

    rectLegend(this, chart, config, {}, false);
    var ds = new DataSet();
    this.ds = ds;
    drawMapBackground(this, chart, ds, config);
    React.Children.forEach(this.props.children, function (child, index) {
      if (!child) {
        return;
      } // @ts-ignore


      var props = child.props,
          type = child.type,
          key = child.key;

      if (!props || !type) {
        return;
      }

      var layerConfig = Object.assign({}, filterKey(config, ['padding']), props.config); // G2 图层需要转化数据格式

      var data = props.data;

      if (layerConfig.dataType !== 'g2') {
        data = convertMapData(data, type.displayName);
      }

      if (type.displayName === MapArea.displayName) {
        drawMapArea(_this4, chart, ds, layerConfig, data, key || index);
      }

      if (type.displayName === MapPoint.displayName) {
        drawMapPoint(_this4, chart, ds, layerConfig, data, key || index);
      }

      if (type.displayName === MapHeatMap.displayName) {
        drawHeatMap(_this4, chart, ds, layerConfig, data, key || index);
      }
    });

    if (config.labels || config.label) {
      drawMapLabel(this, chart, config);
    } // chart.render();

  } // addLayer(child: MapChild) {
  //   if (child && child.addParent) {
  //     child.addParent(this);
  //   }
  // }

  /** 地图正确的长宽比 */
  ;

  _proto.changeSize = function changeSize(chart, config, chartWidth, chartHeight) {
    var chartRatio = chartWidth / chartHeight;
    var ratio = this.bgMapRatio || chartRatio;
    var width = chartWidth;
    var height = chartHeight;

    if (chartRatio > ratio) {
      width = chartHeight * ratio;
    } else if (chartRatio < ratio) {
      height = chartWidth / ratio;
    }

    if (width !== chartWidth || height !== chartHeight) {
      var p1 = (chartWidth - width) / 2;
      var p2 = (chartHeight - height) / 2;
      chart.appendPadding = [p2, p1, p2, p1];
    }

    this.bgMapSize = [width, height];
    chart.changeSize(chartWidth, chartHeight); // React 版方法

    this.convertChildren(this.props.children, this.props.config, true);
  };

  _proto.changeChildData = function changeChildData(chart, config, viewName, newData, key) {
    var ds = this.ds;
    var data = newData;

    if (config.dataType !== 'g2') {
      data = convertMapData(newData, viewName);
    }

    if (viewName === MapArea.displayName) {
      drawMapArea(this, chart, ds, config, data, key);
    }

    if (viewName === MapPoint.displayName) {
      drawMapPoint(this, chart, ds, config, data, key);
    }

    if (viewName === MapHeatMap.displayName) {
      drawHeatMap(this, chart, ds, config, data, key);
    }
  }
  /** @override Map 使用自定义 changeData 方法，覆盖原方法逻辑 */
  ;

  _proto.changeData = function changeData() {} // 销毁时需要清空 dataView，否则切换主题时，更新会进入到旧的图表实例中
  ;

  _proto.destroy = function destroy() {
    this.bgMapDataView = null;
    this.areaMapDataView = null;
    this.pointMapDataView = null;
    this.heatMapDataView = null;
    this.areaMapList = [];
    this.pointMapList = [];
    this.heatMapList = [];
  };

  return Map;
}(Base); // 绘制地图背景

Map.Area = MapArea;
Map.Point = MapPoint;
Map.HeatMap = MapHeatMap;
Map.Shoot = MapShoot;
Map.Custom = MapCustom;
Map.chinaGeoData = chinaGeo;
Map.provinceName = provinceName;
Map.positionMap = positionMap;
Map.getGeoProjection = DataSet.View.prototype.getGeoProjection;

function drawMapBackground(ctx, chart, ds, config) {
  var geoData = null;

  if (ctx.geoData) {
    // 如果用户有传geoData，优先使用
    geoData = ctx.geoData;
  } else if (config.type === 'china') {
    // 自带中国地图数据
    geoData = chinaGeo;
  } else {
    warn('Wmap', "no geo data, can't draw the map!");
  }

  var bgMapDataView = ds.createView('bgMap').source(geoData, {
    type: 'GeoJSON'
  });
  var _projection = config.projection;

  if (!_projection) {
    _projection = bgMapDataView.getGeoProjection('geoConicEqualArea');

    _projection // @ts-ignore
    .center([0, 36.4]).parallels([25, 47]).scale(1000).rotate([-105, 0]).translate([0, 0]);
  }

  bgMapDataView.transform({
    type: 'geo.projection',
    // 因为G2的投影函数不支持设置投影参数，这里使用自定义的投影函数设置参数
    // @ts-ignore
    projection: function projection() {
      return _projection;
    },
    as: ['x', 'y', 'cX', 'cY']
  });

  if (config.type === 'china') {
    // 过滤掉南海诸岛
    bgMapDataView.transform({
      type: 'filter',
      callback: function callback(row) {
        return row.properties.name !== '南海诸岛';
      }
    });
  } // start: 按照投影后尺寸比例调整图表的真实比例


  var longitudeRange = bgMapDataView.range('x');
  var latitudeRange = bgMapDataView.range('y');
  var ratio = (longitudeRange[1] - longitudeRange[0]) / (latitudeRange[1] - latitudeRange[0]);
  ctx.bgMapRatio = ratio;
  var chartWidth = chart.width,
      chartHeight = chart.height;
  var chartRatio = chartWidth / chartHeight;
  var width = chartWidth;
  var height = chartHeight;

  if (chartRatio > ratio) {
    width = chartHeight * ratio;
  } else if (chartRatio < ratio) {
    height = chartWidth / ratio;
  }

  if (width !== chartWidth || height !== chartHeight) {
    var p1 = (chartWidth - width) / 2;
    var p2 = (chartHeight - height) / 2; // 不设置尺寸，通过padding控制地图形状

    chart.appendPadding = [p2, p1, p2, p1];
  }

  ctx.bgMapSize = [width, height]; // end: 按照投影后尺寸比例调整图表的真实比例

  var _ref2 = config.background || {},
      bgFill = _ref2.fill,
      bgStroke = _ref2.stroke,
      otherBgStyle = _objectWithoutPropertiesLoose(_ref2, ["fill", "stroke"]);

  var bgMapView = chart.createView({
    padding: 0
  });
  bgMapView.data(bgMapDataView.rows);
  bgMapView.tooltip(false);
  bgMapView.polygon().position('x*y').style('name', function (name) {
    var result = _extends({
      fill: bgFill || themes['widgets-map-area-bg'],
      stroke: bgStroke || themes['widgets-map-area-border'],
      lineWidth: 1
    }, otherBgStyle); // 对一些尺寸非常小的形状特殊处理，以显示出来。


    if (minArea.indexOf(name) > -1) {
      result.stroke = bgFill || themes['widgets-map-area-bg'];
    }

    return result;
  });
  ctx.bgMapDataView = bgMapDataView;
  ctx.bgMapView = bgMapView;
  ctx.projection = _projection;
}

function getView(list, key) {
  return list.find(function (item) {
    return item.id === key;
  });
} // 绘制分级统计地图


function drawMapArea(ctx, chart, ds, config, data, key) {
  var areaMap = getView(ctx.areaMapList, key);

  if (areaMap) {
    var areaMapDataView = areaMap.dataView,
        areaMapView = areaMap.view;

    if (areaMapDataView.origin !== data) {
      areaMapDataView.source(data);
      areaMapView.data(areaMapDataView.rows);
    }
  } else {
    var _areaMapDataView = ds.createView().source(data).transform({
      type: 'map',
      callback: function callback(obj) {
        var name = obj.name,
            type = obj.type,
            others = _objectWithoutPropertiesLoose(obj, ["name", "type"]);

        return _extends({
          // @ts-ignore 将省份全称转化为简称
          name: provinceName[name] ? provinceName[name] : name,
          type: String(type)
        }, others);
      }
    }).transform({
      geoDataView: ctx.bgMapDataView,
      field: 'name',
      type: 'geo.region',
      as: ['x', 'y']
    });

    var _areaMapView = chart.createView({
      padding: config.padding || 0
    });

    _areaMapView.data(_areaMapDataView.rows);

    var areaGeom = _areaMapView.polygon().position('x*y') // 如果用连续型颜色，需要对数组倒序，否则颜色对应的数值会从小开始
    .color('areaType', getMapContinuousColor(config.areaColors)) // .opacity('value')
    .tooltip('name*value', function (name, value) {
      return {
        name: name,
        value: value
      };
    });

    geomStyle(areaGeom, config.geomStyle);
    ctx.areaMapList.push({
      id: key,
      view: _areaMapView,
      dataView: _areaMapDataView
    });
  }
} // 绘制散点图


function drawMapPoint(ctx, chart, ds, config, data, key) {
  var pointMap = getView(ctx.pointMapList, key);

  if (pointMap) {
    var pointMapDataView = pointMap.dataView,
        pointMapView = pointMap.view;

    if (pointMapDataView.origin !== data) {
      pointMapDataView.source(data);
      pointMapView.data(pointMapDataView.rows);
    }
  } else {
    var _pointMapDataView = ds.createView().source(data).transform({
      type: 'map',
      callback: function callback(point) {
        var newPoint = Object.assign({}, point);
        newPoint.type = String(newPoint.type);
        return convertPointPosition(ctx, newPoint);
      }
    });

    var _pointMapView = chart.createView({
      padding: config.padding || 0
    });

    _pointMapView.data(_pointMapDataView.rows);

    var pointGeom = _pointMapView.point().position('x*y').shape('circle').color('pointType', config.pointColors).tooltip('name*value', function (name, value) {
      return {
        name: name,
        value: value
      };
    }); // .active(false);


    geomSize(pointGeom, config.size, 4, 'value', 'name*value');
    geomStyle(pointGeom, config.geomStyle);

    if (config.labels) {
      warn('config.labels', '属性已废弃，请使用 config.label');
    }

    label({
      geom: pointGeom,
      config: config,
      field: 'name',
      defaultConfig: {
        // FIXME 默认的动画会导致部分label不显示，暂时关闭动画
        animate: false
      }
    });

    if (config.labels || config.label) {// let labelConfig = {};
      // if (typeof config.labels === 'object') {
      //   labelConfig = config.labels;
      // } else if (typeof config.label === 'object') {
      //   labelConfig = config.label;
      // }
      //
      // const { offset = 0, textStyle = {}, formatter } = labelConfig;
      // pointGeom.label('name', {
      // FIXME 默认的动画会导致部分label不显示，暂时关闭动画
      // animate: false,
      //   offset: `${offset - Number(themes['widgets-font-size-1'].replace('px', ''))}`,
      //   textStyle: {
      //     fill: themes['widgets-map-label'],
      //     // 需要去掉 px 的字符串
      //     fontSize: themes['widgets-font-size-1'].replace('px', ''),
      //     textBaseline: 'middle',
      //     ...textStyle,
      //   },
      //   formatter: formatter || null,
      // });
    }

    ctx.pointMapList.push({
      id: key,
      view: _pointMapView,
      dataView: _pointMapDataView
    });
  }
} // 绘制热力图


function drawHeatMap(ctx, chart, ds, config, data, key) {
  var heatMap = getView(ctx.heatMapList, key);

  if (heatMap) {
    var heatMapDataView = heatMap.dataView,
        heatMapView = heatMap.view;

    if (heatMapDataView.origin !== data) {
      heatMapDataView.source(data);
      heatMapView.data(heatMapDataView.rows);
    }
  } else {
    var _heatMapDataView = ds.createView().source(data).transform({
      type: 'map',
      callback: function callback(point) {
        var newPoint = Object.assign({}, point);
        newPoint.type = String(newPoint.type);
        return convertPointPosition(ctx, newPoint);
      }
    });

    var _heatMapView = chart.createView({
      padding: config.padding || 0
    });

    _heatMapView.data(_heatMapDataView.rows);

    chart.legend('value', false);

    var heatGeom = _heatMapView.heatmap().position('x*y').color('value', config.heatColors).tooltip('name*value', function (name, value) {
      return {
        name: name,
        value: value
      };
    });

    geomSize(heatGeom, config.size, 16, 'value', 'name*value');
    ctx.heatMapList.push({
      id: key,
      view: _heatMapView,
      dataView: _heatMapDataView
    });
  }
} // 绘制背景地图标签


function drawMapLabel(ctx, chart, config) {
  var labelConfig = config.labels || config.label; // 将背景数据集中的中心点坐标(cX, cY)映射为新数据中的x, y。保证scale可以同步这个view的度量。

  var labelData = ctx.bgMapDataView.rows.map(function (row) {
    var localeName = row.properties.locale || row.properties.name || row.name;
    var label = {
      name: getText(localeName, ctx.context.language, ctx.context.locale) || row.properties.name || row.name,
      x: row.cX,
      y: row.cY
    }; // @ts-ignore fix 某些地区label位置不好，需要重新定位

    var fixLngLat = fixLngLatMap[row.name];

    if (fixLngLat) {
      // @ts-ignore 第二个参数支持函数
      var position = ctx.bgMapDataView.geoProjectPosition(fixLngLat, ctx.projection, true);
      label.x = position[0];
      label.y = position[1];
    }

    return label;
  }); // @ts-ignore label 需要函数处理，无法放到 label 工具函数中

  var _ref3 = typeof labelConfig === 'object' ? labelConfig : {},
      _ref3$offset = _ref3.offset,
      offset = _ref3$offset === void 0 ? 0 : _ref3$offset,
      style = _ref3.style,
      textStyle = _ref3.textStyle,
      labelFormatter = _ref3.labelFormatter;

  var labelMapView = chart.createView({
    padding: 0
  });
  labelMapView.data(labelData);
  labelMapView.point().position('x*y').size(0) // 由于需要根据 name 判断小尺寸 label 的字号，这里暂时不能用标准 label 函数处理
  .label('name', function (name) {
    var fontSize = themes['widgets-font-size-1'].replace('px', ''); // 对一些尺寸非常小的形状特殊处理，以显示出来。

    if (minLabel.indexOf(name) > -1) {
      fontSize = String(Number(fontSize) * 2 / 3);
    }

    if (textStyle) {
      warn('Wmap.config.label', 'textStyle 属性已废弃，请使用 style 属性');
    }

    var labelStyle = _extends({
      fill: themes['widgets-color-text-3'],
      // 需要去掉 px 的字符串
      fontSize: fontSize,
      textBaseline: 'middle'
    }, textStyle || {}, style);

    var result = {
      offset: offset,
      style: labelStyle,
      // FIXME 默认的动画会导致部分label不显示，暂时关闭动画
      animate: false
    };

    if (labelFormatter) {
      result.content = function (v, item, index) {
        return labelFormatter(v['name'], item, index);
      };
    }

    return result;
  }).tooltip(false); // .active(false);

  ctx.labelMapView = labelMapView;
}

// 转换地图数据结构，因为和默认结构不同，需要特殊处理。
function convertMapData(data, viewName) {
  if (!Array.isArray(data)) {
    return [];
  }

  var typeName = 'type';

  if (viewName === MapArea.displayName) {
    typeName = 'areaType';
  }

  if (viewName === MapPoint.displayName) {
    typeName = 'pointType';
  } // if (viewName === MapHeatMap.displayName) {
  //   typeName = 'heatmapType';
  // }


  var result = [];
  data.forEach(function (item) {
    var _item$name = item.name,
        name = _item$name === void 0 ? '' : _item$name,
        itemData = item.data;

    if (!Array.isArray(itemData)) {
      return;
    }

    itemData.forEach(function (d) {
      var _extends2;

      result.push(_extends({}, d, (_extends2 = {}, _extends2[typeName] = d.type || name, _extends2)));
    });
  });
  return result;
} // 计算数据的坐标点


export function convertPointPosition(ctx, point) {
  if (point.x && point.y) {
    return point;
  }

  if (!ctx.bgMapDataView) {
    return point;
  }

  var projection = ctx.projection;

  if (point.lng && point.lat) {
    return getProjectionPosition(point, ctx.bgMapDataView, projection, Number(point.lng), Number(point.lat));
  }

  if (point.name) {
    var name = point.name;

    if (!/^\w/.test(name)) {
      if (/^\u963F\u62C9/.test(name) || /^\u5F20\u5BB6/.test(name)) {
        // 阿拉、张家 两个开头的需要截取三个字符
        name = name.slice(0, 3);
      } else if (!/\u7701$/.test(name) && !/\u81ea\u6cbb\u533a$/.test(name)) {
        // 以"省" / "自治区"结尾的不截断
        name = name.slice(0, 2);
      }
    } // @ts-ignore


    var position = positionMap[name];

    if (position) {
      return getProjectionPosition(point, ctx.bgMapDataView, projection, position.lng, position.lat);
    }
  }

  if (!point.x || !point.y) {
    warn('Wmap', '无法定位地点', point);
  }

  return point;
}

function getProjectionPosition(point, view, projection, lng, lat) {
  // @ts-ignore
  var projectedCoord = view.geoProjectPosition([lng, lat], projection, true);
  point.x = projectedCoord[0];
  point.y = projectedCoord[1];
  return point;
} // // 地图的tooltip逻辑
// function mapTooltip(chart, config) {
//   // tooltip
//   if (config.tooltip !== false) {
//     const { nameFormatter, valueFormatter, customConfig } =
//       config.tooltip || {};
//
//     const tooltipCfg = {
//       showTitle: false,
//       crosshairs: null,
//       itemTpl:
//         '<li data-index={index}>' +
//         '<svg viewBox="0 0 6 6" class="g2-tooltip-marker"></svg>' +
//         '<span class="g2-tooltip-item-name">{name}</span>:<span class="g2-tooltip-item-value">{value}</span></li>',
//     };
//
//     if (customConfig) {
//       merge(tooltipCfg, customConfig);
//     }
//
//     chart.tooltip(tooltipCfg);
//
//     if (nameFormatter || valueFormatter) {
//       chart.on('tooltip:change', ev => {
//         ev.items.forEach((item, index) => {
//           const raw = item.point._origin || {};
//
//           if (valueFormatter) {
//             item.value = valueFormatter(item.value, raw, index, ev.items);
//           }
//           if (nameFormatter) {
//             item.name = nameFormatter(item.name, raw, index, ev.items);
//           }
//         });
//       });
//     }
//   } else {
//     chart.tooltip(false);
//   }
// }


function getMapContinuousColor(color) {
  if (Array.isArray(color)) {
    return color.join('-');
  } else {
    return color;
  }
}

var Wmap = errorWrap(Map);
Wmap.Area = Map.Area;
Wmap.Point = Map.Point;
Wmap.HeatMap = Map.HeatMap;
Wmap.Shoot = Map.Shoot;
Wmap.Custom = Map.Custom;
Wmap.chinaGeoData = Map.chinaGeoData;
Wmap.provinceName = Map.provinceName;
Wmap.positionMap = Map.positionMap;
Wmap.getGeoProjection = Map.getGeoProjection;
export default Wmap;