@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";
var _excluded = ["data", "render"],
  _excluded2 = ["className", "style"],
  _excluded3 = ["className", "style", "children", "data", "width", "height", "padding", "geoData", "config", "language", "event", "interaction", "getChartInstance", "enableFunctionUpdate", "renderer", "animate"],
  _excluded4 = ["fill", "stroke"],
  _excluded5 = ["name", "type"];
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.legendField = 'pointType';
    _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;
    // addLayer(child: MapChild) {
    //   if (child && child.addParent) {
    //     child.addParent(this);
    //   }
    // }
    /** 地图正确的长宽比 */
    _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, _excluded);
    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, _excluded2);
    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, _excluded3);
    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, {}, 'multiple');
    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();
  };
  _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, _excluded4);
  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, _excluded5);
        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;