map & scale bug

map & scale

TW bug

https://antv.alipay.com/zh-cn/g2/3.x/demo/map/drill-down.html

import React, { useEffect } from 'react';
import PropTypes from 'prop-types';

import { bindActionCreators } from 'redux';
import { connect } from 'dva';

import G2 from '@antv/g2';
import DataSet from '@antv/data-set';

import numeral from 'numeral';

import {
  // Spin,
  Tooltip,
  Button,
  // message,
} from 'antd';

import { formatAdcode, isSpecialArea, getAreaNode } from '@/utils/regionUtils';

import dashboardRegionActions from '../actions/dashboard.region.action';

let chart;

const mapStateToProps = ({ dashboard }) => ({
  regionData: dashboard.regionData,
  // mapLoading: dashboard?.mapLoading,
});

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(dashboardRegionActions, dispatch),
});

// export default connect(
//   mapStateToProps,
//   mapDispatchToProps,
// )(RegionChart);
// @connect(mapStateToProps, mapDispatchToProps,)

const RegionChart = ({
  regionData,
  actions: {
    changeRegion,
  }
}) => {
  let _drawChart;
  const { adcode, regions = [] } = regionData;
  let scaleHeight = 520;
  let scaleWidth = 700;
  let paddingLeft = 100;
  useEffect(() => {
    getAreaNode(adcode).then(_drawChart);
  }, [_drawChart, adcode, regionData]);

  const _dataSource = geoJSON => {
    const data = [];
    for (let i = 0; i < geoJSON.length; i++) {
      // if (i === 0) {
      //   console.log(`geoJSON[i]`, geoJSON[i]);
      // }
      const { name, adcode } = geoJSON[i].properties;
      // 可以与后端沟通改数据格式
      const target = regions.find(({ code }) => formatAdcode(code) === adcode) || {};
      const { code, totalUv } = target;
      data.push({
        adcode,
        code,
        name,
        totalUv,
      });
    }
    return data;
  };

  _drawChart = areaNode => {
    if (!areaNode) return;

    const geoJSON = isSpecialArea(adcode)
      ? [areaNode.getParentFeature()]
      : areaNode.getSubFeatures();

    chart && chart.destroy();

    const ds = new DataSet();
    const geoDataView = ds.createView().source(
      {
        type: 'FeatureCollection',
        features: geoJSON,
      },
      {
        type: 'GeoJSON',
      },
    );
    const dvData = ds.createView().source(_dataSource(geoJSON));
    // 构造 mock 数据
    if (adcode === "71") {
      dvData.origin.push({
        adcode: 710000,
        code: undefined,
        name: "台湾省",
        totalUv: undefined,
      });
      dvData.rows.push({
        adcode: 710000,
        code: undefined,
        name: "台湾省",
        totalUv: undefined,
        lat: [0],
        lng: [0],
      });
    }

    dvData.transform({
      type: 'geo.region',
      field: 'name',
      geoDataView,
      as: ['lng', 'lat'],
    });
    window.$$ = (uid = ``) => document.querySelector(uid);
    if (adcode === "71") {
      // skip 台湾 bug
      scaleHeight = 0;
      scaleWidth = 0;
      setTimeout(() => {
        let TW = window.$$(".region-map-chart-tw");
        if (TW) {
          TW.style.display = "block";
        }
      }, 0);
    } else {
      setTimeout(() => {
        let TW = window.$$(".region-map-chart-tw");
        if (TW) {
          TW.style.display = "none";
        }
      }, 0);
      // start: 计算地图的最佳宽高
      let longitudeRange = dvData.range('lng');
      let lantitudeRange = dvData.range('lat');
      let chartBox = window.$$(".region-container");
      let ratio = (longitudeRange[1] - longitudeRange[0]) / (lantitudeRange[1] - lantitudeRange[0]);
      if (ratio > chartBox.clientWidth / chartBox.clientHeight) {
        scaleWidth = chartBox.clientWidth;
        scaleHeight = scaleWidth / ratio;
      } else {
        scaleWidth = chartBox.clientHeight * ratio;
        scaleHeight = chartBox.clientHeight;
      }

      // if (scaleWidth > scaleHeight) {
      //   paddingLeft = (scaleWidth - scaleHeight) * ratio;
      // } else {
      //   paddingLeft = (scaleHeight - scaleWidth);
      // }
      // end: 计算地图的最佳宽高
    }

    chart = new G2.Chart({
      container: 'region_chart',
      height: scaleHeight,
      width: scaleWidth,
      // padding: 0,
      padding: {
        left: paddingLeft,
        top: 0,
      },
      // padding: {
      //   left: 100,
      //   top: 0,
      // },
    });

    chart.source(dvData);

    chart.tooltip({
      title: 'name',
    });

    // chart.scale([0, 0.5]);
    // chart.scale([0, 1]);

    chart
    .legend(false)
    .axis(false)
    .polygon()
    .position('lng*lat')
    .label('name', {
      type: 'map',
      textStyle: {
        fill: '#333',
        fontSize: 12,
      },
    })
    .style({
      stroke: '#fff',
      lineWidth: 1,
    })
    // 渐变色, 颜色串(start -> end)
    .color('totalUv', '#6882FFFF-#898bf2FF-#c3c4f8FF')
    // .color('totalUv', '#BAE7FF-#1890FF-#0050B3')
    .tooltip('name*totalUv', (name, totalUv) => ({
      name: '累计用户数',
      value: totalUv ? numeral(totalUv).format('0,0') + '人' : '- -',
    }));

    // 文字
    if (adcode === "71") {
      // 不好使???
      chart
      .guide()
      .text({
        // position: ['min', 'max'],
        position: [0, 0],
        offsetX: 100 - paddingLeft,
        offsetY: 100,
        content: "台湾省",
        style: {
          fontSize: 14,
          fontWeight: 'bold',
        },
      });
    } else {
      chart
      .guide()
      .text({
        position: ['min', 'max'],
        offsetX: 30 - paddingLeft,
        offsetY: 20,
        content: areaNode.getName(),
        // content: "台湾省",
        style: {
          fontSize: 14,
          fontWeight: 'bold',
        },
      });
    }

    chart.render();
    // if (adcode === 'all') {
    //   chart.on('click', ev => {
    //     if (ev?.data?._origin) {
    //       if (ev.data._origin.code) {
    //         changeRegion(ev.data._origin.code);
    //       } else {
    //         message.warning('暂无数据');
    //       }
    //     }
    //   });
    // }
  };

  return (
    <>
      {adcode !== 'all' && (
        <Tooltip title="点击返回全国">
          <Button
            size="small"
            className="region-map-tooltip"
            icon="left"
            onClick={() => changeRegion('all')}
          />
        </Tooltip>
      )}
      <div id="region_chart" className="region-map-chart" />
      <div className="region-map-chart-legend"></div>
      <div className="region-map-chart-tw">
        台湾省
      </div>
    </>
  );
};

RegionChart.propTypes = {
  regionData: PropTypes.object,
};

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(RegionChart);

// export {
//   RegionChart,
// };
// export default RegionChart;

---

https://www.yuque.com/antv/g2-docs/api-scale

https://www.yuque.com/antv/g2-docs/tutorial-scale

---

[
  {
    "name": "全国数据",
    "key": "all",
    "alias": 10,
    "group": "Q"
  },
  {
    "name": "北京市",
    "key": 11,
    "group": "B"
  },
  {
    "name": "天津市",
    "key": 12,
    "group": "T"
  },
  {
    "name": "河北省",
    "key": 13,
    "group": "H"
  },
  {
    "name": "山西省",
    "key": 14,
    "group": "S"
  },
  {
    "name": "内蒙古自治区",
    "key": 15,
    "group": "N"
  },
  {
    "name": "辽宁省",
    "key": 21,
    "group": "L"
  },
  {
    "name": "吉林省",
    "key": 22,
    "group": "J"
  },
  {
    "name": "黑龙江省",
    "key": 23,
    "group": "H"
  },
  {
    "name": "上海市",
    "key": 31,
    "group": "S"
  },
  {
    "name": "江苏省",
    "key": 32,
    "group": "J"
  },
  {
    "name": "浙江省",
    "key": 33,
    "group": "Z"
  },
  {
    "name": "安徽省",
    "key": 34,
    "group": "A"
  },
  {
    "name": "福建省",
    "key": 35,
    "group": "F"
  },
  {
    "name": "江西省",
    "key": 36,
    "group": "J"
  },
  {
    "name": "山东省",
    "key": 37,
    "group": "S"
  },
  {
    "name": "河南省",
    "key": 41,
    "group": "H"
  },
  {
    "name": "湖北省",
    "key": 42,
    "group": "H"
  },
  {
    "name": "湖南省",
    "key": 43,
    "group": "H"
  },
  {
    "name": "广东省",
    "key": 44,
    "group": "G"
  },
  {
    "name": "广西壮族自治区",
    "key": 45,
    "group": "G"
  },
  {
    "name": "海南省",
    "key": 46,
    "group": "H"
  },
  {
    "name": "重庆市",
    "key": 50,
    "group": "C"
  },
  {
    "name": "四川省",
    "key": 51,
    "group": "S"
  },
  {
    "name": "贵州省",
    "key": 52,
    "group": "G"
  },
  {
    "name": "云南省",
    "key": 53,
    "group": "Y"
  },
  {
    "name": "西藏自治区",
    "key": 54,
    "group": "X"
  },
  {
    "name": "陕西省",
    "key": 61,
    "group": "S"
  },
  {
    "name": "甘肃省",
    "key": 62,
    "group": "G"
  },
  {
    "name": "青海省",
    "key": 63,
    "group": "Q"
  },
  {
    "name": "宁夏回族自治区",
    "key": 64,
    "group": "N"
  },
  {
    "name": "新疆维吾尔自治区",
    "key": 65,
    "group": "X"
  },
  {
    "name": "台湾省",
    "key": 71,
    "group": "T"
  },
  {
    "name": "香港特别行政区",
    "key": 81,
    "group": "X"
  },
  {
    "name": "澳门特别行政区",
    "key": 82,
    "group": "A"
  }
]

城市编码表

https://lbs.amap.com/api/webservice/download

cdn

https://a.amap.com/lbs/static/file/AMap_adcode_citycode.xlsx.zip

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---