preface

The business of the company needs to make a map to show the location of stores. It needs to choose the appropriate map according to the location of stores, including the whole country, province and city. The first problem with this requirement was where to find the map data, which could have huge consequences and possibly even legal liabilities.Copy the code

Map data

This problem is pushed to you on the demand side. The final conclusion was to use the official echarts data, but without the municipal data, the municipal data function was cut.

How do I dynamically load different maps?

Import all with import? More stupid

First we need to take a look at the echartsAPI

// data is the corresponding map data echarts.registermap (param, data); map.setOption({ geo: { // map:'china' | 'sichuan'}} map: param,}} map: param,}})Copy the code

We can import different map information here

const provinces = ['shanghai'.'hebei'.'shanxi'.'neimenggu'.'liaoning'.'jilin'.'heilongjiang'.'jiangsu'.'zhejiang'.'anhui'.'fujian'.'jiangxi'.'shandong'.'henan'.'hubei'.'hunan'.'guangdong'.'guangxi'.'hainan'.'sichuan'.'guizhou'.'yunnan'.'xizang'.'shanxi1'.'gansu'.'qinghai'.'ningxia'.'xinjiang'.'beijing'.'tianjin'.'chongqing'.'xianggang'.'aomen'.'taiwan'];
const provincesText = ['Shanghai'.'hebei'.'the shanxi'.Inner Mongolia.'the liaoning'.'jilin'.'Heilongjiang'.'jiangsu'.'zhejiang'.'anhui'.'fujian'.'jiangxi'.'shandong'.'henan'.'hubei'.'in hunan province'.'in guangdong'.'the guangxi'.'hainan'.'sichuan'.'guizhou'.'yunnan'.'Tibet'.'the shaanxi'.'gansu'.'the qinghai'.'the ningxia'.'the xinjiang'.'Beijing'.'tianjin'.'chongqing'.'Hong Kong'.'the'.'Taiwan']; // Check whether the current map to load is provincial. const isProvince = (name) => {return provincesText.some((province) => {
            returnprovince === name; })} const loadScriptMap = (name, callback) =>'sichuan' => pinyinName = 'sichuan'Const pinyinName = provincestext.indexof (name)] // Import the corresponding map JSON, if you want to package in the project, extract the file, These files will not be packaged when placed in a static resource // build, and will not be displayed without a loaded resource map ！！！！ callback(name, require(`@/map/province/${pinyinName}`));
    }
     if(isProvince(mapName)) {// loadScriptMap(mapName, loadMap)}else{// otherwise switch loadMap(mapName, require(' @/map/china.json ')); }Copy the code

The complete code

Class MapComponent extends React.Component {drawMap(mapName, Data) {/* Get map Data */ const color ='#FFF'; Echarts const map = echarts.init(document.getelementById ('map')); Const loadMap = (param, data) => {echarts.registerMap(param, data); const loadMap = (param, data); // echarts.getMap(mapName).geoJson.features.forEach(function(v) {// // region latitude and longitude // geoCoordMap[v.properties.name] = v.properties.cp; / /}); map.setOption({ geo: { // map:'china' | 'sichuan'Map: param, itemStyle: {normal: {areaColor:'#00186E',
                            borderColor: '#195BB9',
                            borderWidth: 1,
                        },
                        emphasis: {
                            areaColor: '#2B91B7'
                        }
                    },
                    emphasis: {
                        label: {
                            color: '#ffffff'
                        }
                    }
                },
                grid: {
                    borderWidth: 0,
                    top: '0%',
                    left: '0%',
                    right: '0%',
                    bottom: '0%'
                },
                tooltip: {
                    formatter: function (e) {
                        if (typeof (e.value)[2] == "undefined") {
                            return e.name;
                        }
                    }
                },
                legend: {
                    show: false
                },
                toolbox: {
                    show: false
                },
                series: [
                    {
                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        zlevel: 2,
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        label: {
                            normal: {
                                show: false,
                                position: 'right',
                                formatter: '{b}'
                            }
                        },
                        symbolSize: fontSize(.1),
                        itemStyle: {
                            normal: {
                                color: color,
                            },
                            emphasis: {
                                areaColor: '#2B91B7'
                            }
                        },
                        data: Data.map(function (dataItem) {
                            return{ name: dataItem.name, value: [dataItem.lng, dataItem.lat] }; }})},],true); } // Check whether the current map to load is province. const isProvince = (name) => {return provincesText.some((province) => {
                returnprovince === name; })} const loadScriptMap = (name, callback) =>'sichuan' => pinyinName = 'sichuan'Const pinyinName = provincestext.indexof (name)] // Import the corresponding map JSON, if you want to package in the project, extract the file, These files will not be packaged when placed in a static resource // build, and will not be displayed without a loaded resource map ！！！！ callback(name, require(`@/map/province/${pinyinName}`));
        }
        if(isProvince(mapName)) {// loadScriptMap(mapName, loadMap)}else{// otherwise switch loadMap(mapName, require(' @/map/china.json ')); } window.addEventListener('resize', () => map.resize());
    }

    componentDidMount() {
        this.drawMap(this.props.store.map_shown_type === 0 ? 'china' :
            provincesText[this.props.store.map_shown_type - 1], this.props.store.storeList);
    }

    componentDidUpdate() {
        this.drawMap(this.props.store.map_shown_type === 0 ? 'china' :
            provincesText[this.props.store.map_shown_type - 1], this.props.store.storeList);
    }

    render() {
        const { store } = this.props;
        return (
            <div style={{
                height: "9.6 rem." ",
                width: "10.05 rem." ",
                marginLeft: ".26rem".float: "left",
                position: "relative",
                zIndex: 0
            }}>
                <MapBox id="map" />
            </div>
        )
    }

}
Copy the code

conclusion

If you have similar needs, then I hope it will help you a little bit.Copy the code