省份地图

import styles from './modalMap.scss';// 样式
import React, { Component } from 'react';
import BBDMapChinaDataRange from 'components/common/echarts/BBDMapChinaDataRange';
import {cityDistribute} from 'services/screenDisplay/monitorRisking.js';         
import {isNotEmpty}  from 'utils/util.js';

//地图上高亮label的图片
const iconJG = 'image://data:image/png;base64,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';
export default class Map extends Component {
    constructor(props){
        super(props);
        this.state = {
            mapOption: null,
            provinceJson: require('../../../../../data/map/' + `${props.provinceName}` + '.json')   //引入地图的json数据
        };
    }
    
    componentDidMount() {
       
        let params = {
            province: this.props.provinceName,
            type: this.props.type
        };
        this.getMapData(params);
      
    }
    getMapData = async (params) => {
        let geoCoordMap = {};
        
        this.state.provinceJson.features.forEach((v) => {
            var name = v.properties.name;
            geoCoordMap[name] = v.properties.cp;
        });
        let resData = await cityDistribute(params);
        let data = resData.map(line =>{if(isNotEmpty(line.region)){return  [{ name: line.region, value: line.companyNum }];} });
        data = [...data].filter(p=>{if(isNotEmpty(p)){return p;}});
        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i];
                var fromCoord = geoCoordMap[dataItem[0].name];
                data[i][0]['value'] = [...fromCoord, data[i][0]['value']];
                res.push(data[i][0]);
            }
            return res;
        };
        data = await convertData(data);
        // 过滤数据，从json数据中找出亮点的坐标
        this.setChart(data, params);
    }
    setChart = async (data, params) => {
        const mapType = this.props.provinceName;// "四川省"

        let option = {
            // backgroundColor: '#FAFAFC',
            tooltip: {
                show: false
               
            },
            geo: {
                type: 'map',
                map: mapType,        // "四川省"
                show: true,
                roam: false, // 不允许平移
                label: {
                    normal: {
                        show: false,
                        textStyle: {
                            color: '#FFFFFF'
                        }
                    },
                    emphasis: {
                        textStyle: {
                            color: '#FE8E5C'
                        }
                    }
                },
                zoom: '0.9',
                aspectScale: 0.75,
                zlevel: 1,
                itemStyle: {
                    normal: {
                        areaColor: '#2747CB',
                        borderColor: '#0A2965',
                        borderWidth: 1, 
                        shadowColor: '#0A2965',
                        // shadowBlur: 10,
                        shadowOffsetY: 10,      //阴影偏移的位置 上下
                        shadowOffsetX: 0       //阴影偏移的位置 左右
                    },
                    emphasis: {
                        borderColor: '#FFFFFF', 
                        areaColor: '#1359B3'
                    }
                }
            },
            series: [
                {
                    type: 'map',
                    map: mapType,
                    show: true,
                    roam: false, // 不允许平移
                    symbolSize: 10,
                    label: {
                        normal: {
                            show: true,
                            position: 'bottom',
                            formatter: e=>{

                                if(e.value){
                                    return `\r\r\n\n\n${e.name}`;
                                }else{
                                    return e.name;
                                }
                            },
                            textStyle: {
                                color: '#1FF1FF'
                            }
                        },
                        emphasis: {
                            textStyle: {
                                color: '#FE8E5C'
                            }
                        }
                    },
                    zoom: '0.9',
                    aspectScale: 0.75,
                    zlevel: 1,
                    itemStyle: {
                        normal: {
                            areaColor: '#2747CB',
                            borderColor: '#0A2965',
                            borderWidth: 1, 
                            shadowColor: '#0A2965',
                            // shadowBlur: 10,
                            shadowOffsetY: 0
                        },
                        emphasis: {
                            borderColor: 'transparent', 
                            areaColor: '#1359B3'
                        }
                    },
                    data: data
                },
                {
                    name: '',
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    aspectScale: 0.75,
                    zoom: 0.9,
                    // symbol: `image://${mapIcon}`,
                    symbolOffset: [0, 0],  // 标记相对于原本位置的偏移。默认情况下，标记会居中置放在数据对应的位置
                 
                    tooltip: {
                        show: true,
                        backgroundColor: 'transparent',
                        formatter: (item, index) => {
                            return `<div class=${styles.mapToolTip}>
                                <h3>${item.name}</h3>
                                <p><i class=${styles.iconDot}></i>${params.type === 'source' ? '被传导企业数量' : '源头企业数'}：${item.value[2]}家</p>
                            </div>`;
                        }
                        
                    },
                    show: true,
                    roam: false,
                    data: data,
                    symbolSize: 20,
                    symbol: iconJG,
                    showEffectOn: 'render',
                    rippleEffect: {
                        brushType: 'stroke'
                    },
                    hoverAnimation: true,
                    label: {
                        normal: {
                            formatter: (e)=>{
                                return e.value[2];
                            },
                            position: 'top',
                            show: true,
                            textStyle: {
                                color: '#E6AB05'
                            }
                        },
                        
                        emphasis: {
                            textStyle: {
                                color: '#FE8E5C'
                            }
                        }
                    },
                    
                    itemStyle: {   // 圆点
                        normal: {
                            color: '#FBDA35',
                            shadowBlur: 10,
                            shadowColor: '#FF5F03'
                        },
                        emphasis: {
                            color: '#FE8E5C',
                            shadowColor: '#FF5F03'
                        }
                    },
                    zlevel: 2
                }
            ]
        };
      
        this.setState({ mapOption: { geoJson: this.state.provinceJson, mapType, option } });

    }
    render() {
        let { mapOption } = this.state;
        return (
            <div  style={{width: '100%', height: '100%'}}  >
                    {
                        mapOption ? !mapOption.option ? null : 
                        <BBDMapChinaDataRange option={mapOption} />
                         : null
                    }
            </div>
        );
    }
}

image.png

下载json 数据的 网址：
ttps://gallery.echartsjs.com/editor.html?c=xmCAi_XNuJ

image.png

备注：监测预警-风险传导-点击图标-弹窗-点全国地图，下钻到省份地图