网格地图-数据可视化实现

<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>

const map = new TMap.Map("container", { mapStyleId: 'style2' });

class Map extends PureComponent {    componentDidMount() {        const { mapKey, mapOptions } = this.props;        loadScript(mapKey).then(() => { // 加载地图            // 初始化            this.mapRender = new TMap.Map(this.map, mapOptions);        });    }    // ...    render() {        return (            <React.Fragment>                <div ref={ref => { this.map = ref; }} />                { // 可在此展示图例 }            </React.Fragment>        );      }}Map.propTypes = {    mapKey: PropTypes.string,  // 地图key     mapOptions: PropTypes.object,  // 地图的基础配置    render: PropTypes.func,  // render函数，用于处理数据及渲染图层    data: PropTypes.array,  // 图层数据    formatRender: PropTypes.func,  // render数据计算    onClick: PropTypes.func,  // 点击事件    showTooltip: PropTypes.bool,  // 是否展示tooltip    tooltipRender: PropTypes.func,  // tooltip node    getAreaCallback: PropTypes.func,  // 获取围栏数据    showColorAxis: PropTypes.bool  // 是否展示颜色图例};Map.defaultProps = {};
/** * @description 异步加载js * @param {String} mapKey 申请的腾讯地图的key值 * @param {Func} callback 回调函数 */const loadScript = (mapKey, callback) => new Promise((resolve, reject) => {    const url = `https://map.qq.com/api/gljs?v=1.exp&libraries=visualization&key=${mapKey}`    const script = document.createElement('script');    script.type = 'text/javascript';    if (script.readyState) {        script.onreadystatechange = function () {            if (script.readyState === 'loaded' || script.readyState === 'complete') {                script.onreadystatechange = null;                resolve(callback?.());            }        };    } else {        script.onload = function () {            resolve(callback?.());        };    }    script.src = url;    script.onerror = reject;    document.body.appendChild(script);});

// 围栏数据格式const result = {    "result": [        [            {                "id": "110101",                "fullname": "东城区",                "location": {                    "lat": "39.928353",                    "lng": "116.416357"                },               "polygon": [ // 行政区划轮廓点串                   [116.809403,39.61482,116.780286,39.593196....],                   // 其它项省略（若有）...                 ]            },           // 其它项省略...        ]   ]}

/** * @description 对地图围栏数据、区域或网格数据进行转化 * @param {Object} mapLatLngData 地图围栏数据 * @param {Object} mapDataObj 区域或网格数据*/function mapDataFormatter({ mapLatLngData, mapDataObj }){   mapLatLngData.forEach(({ id, polygon }) => {      const { value } = mapDataObj[id] || {};      const path = [];      /* 将围栏的经纬度进行转化 */      polygon.forEach(coords => {          path.push([coords.reverse().map(coord => Number(coord))]);      });      /* 区域颜色的计算，获取到颜色，细节请看‘热力计算’模块 */      const defaultColor = value && getGradientColor({ valueScope, value, colors: gradientColors(defaultColorLinear) });      /* 设置颜色样式 */      styles[id] = {         fillColor: defaultColor      };      /* 围栏数据、区域或网格数据数据进行计算后的新集合data */      data.push({ path, styles });  });  return data;}

/** * @description 计算两个颜色的区间色，返回steps个区间色，包含起止 * @param {String} start 最浅颜色值，16进制 * @param {String} end 最深颜色值，16进制 * @param {Number} steps 将颜色分为steps个色段*/const gradientColors = ({ start, end, steps = 8 }) => {    steps = Math.min(Math.max(2, steps), 8);    // parseColor函数 将16进制颜色码转化为rgb颜色值    [start, end] = [start, end].map(x => parseColor(x).map(channel => channel / 255));    const output = [], so = [];    for (let i = 0; i < steps; i++) {        const ms = i / (steps - 1);        const me = 1 - ms;        for (let j = 0; j < 3; j++) {            // pad函数 判断是否在字符串前加0，若字符串长度等于1，则加0            so[j] = pad(Math.round((start[j] * me + end[j] * ms) * 255).toString(16));        }        output.push(`#${so.join('')}`);    }    return output;};/** * @description 计算每个数据对应的颜色 * @param {Array} valueScope 数据范围 [min, max] min:最小值，max:最大值 * @param {Number} value 当前的数据值 * @param {Array} colors 需设置的颜色数组*/const getGradientColor = ({ valueScope, value, colors }) => {    if (Number.isNaN(value)) return null;    let [min, max] = valueScope;    const len = colors.length - 2;    if (max < 10) {        min *= 1000;        max *= 1000;        value *= 1000;    }    const unit = Math.floor((max - min) / len);    const colorIndex = unit > 0 ? Math.ceil((value - min + 1) / unit) : 0;    return colors[colorIndex];};

/** * @description 根据段数，计算数据对应的分段数组 * @param {Array} value 当前的数据值范围 * @param {Number} steps 设置的段数*/const getScopeValue = (value, steps = 5) => {    let [min, max] = value;    let base = 1;    let start = 0;    let end = steps;    const values = [];    const level = (max - min) / steps;    for (let i = start; i <= steps; i++) {        let val = level < 1 ? i : min + i * level;        if (i === steps) {            val += 1;        }        values.push(Math.floor(val) / base);    }    return values;};// 网格基础配置信息设置，主要是段数、颜色等const gridStyle = {    styles: {        polygonStyle0: {            color: 'rgba(255, 200, 2, 0.5)' // 填充色        }    },    steps: 5,    formatStyle: params => 'polygonStyle0'};/** * @description 获取数据对应的颜色及基础信息 * @param {Array} data 当前的数据集合 * @param {Func} formatRender 函数，获取用户设置的基础信息，如段数、颜色等*/const getStepValues = ({ data, formatRender }) => {    // 获取数据值的范围scopeValue    const values = data.map(({ value }) => value ?? 0);    const scopeValue = [Math.min(...values), Math.max(...values)];     // 计算新的样式，gridStyle是默认样式    const newStyle = (formatRender && formatRender()) || gridStyle;    const { steps, formatStyle, styles } = { ...gridStyle, ...newStyle };    const defaultValueSteps = getScopeValue(scopeValue, steps);    return {        steps,        formatStyle,        styles,        valueSteps: defaultValueSteps    };};

// 初始化区域图表const paths = [ // 设置区域数据    {        path: [40.044908, 116.28292, 40.045069, 116.283019, 40.045177, 116.283158, 40.04527, 116.283311, 40.045317, 116.283486],        styleId: 'styel1'    }];const area = new TMap.visualization.Area({    styles: { // 设置区域图样式        styel1: {            fillColor: 'rgba(56,124,234,0.8)', // 设置区域填充色            strokeColor: '#6799EA' // 设置区域边线颜色        }    }}).setData(paths).addTo(map)
// 初始化网格图表 const polygonLayout = new TMap.MultiPolygon({   map, // 显示多边形图层的底图   styles: { // 多边形的相关样式       highlight: new TMap.PolygonStyle({           color: 'rgba(255, 255, 0, 0.6)',       })   },   geometries: [ // 多边形数据      {          id: 'polygon1',          paths: [40.044908, 116.28292, 40.045069, 116.283019, 40.045177, 116.283158, 40.04527, 116.283311, 40.045317, 116.283486]      }   ]})

layout.on('click', mapClickCallback); // click事件layout.on('hover', mapHoverCallback); // hover事件// hover函数function mapHoverCallback(res) {    const { lat, lng } = res.latLng;    const { area: info } = res && res.detail;    if (info) {        // 设置当前位置        const currentPosition = new TMap.LatLng(lat, lng);        // 设置弹窗内容        const currentContent = '弹框信息';        if (this.infoWindow) {           this.infoWindow.setPosition(currentPosition);           this.infoWindow.setContent(currentContent);           this.infoWindow.open();        } else {           // 初始化并设置弹窗           this.infoWindow = new TMap.InfoWindow({               map, // （必需）显示信息窗的地图                position: currentPosition,               content: currentContent,               zIndex: 999,               // 信息窗相对于position对应像素坐标的偏移量，x方向向右偏移为正值，y方向向下偏移为正值，默认为{x:0, y:0}               offset: { x: 0, y: 0 }           });       }   } else {      this.infoWindow && this.infoWindow.close();   }}// click函数function mapClickCallback(res) {  this.infoWindow && this.infoWindow.close();  // 执行回调函数}