前言
公司业务，需要做一个地图显示门店位置
需要根据门店位置来选择合适的地图，全国、省、市。
拿到这个 需求以后，
第一个问题是从哪里找到这些地图数据，地图数据要是错乱，后果巨大，甚至可能还有法律责任。
地图数据
这个问题推给你需求方。最后的结论是就用echarts官方的数据，可是 没有市级的数据，市级数据这个功能就被砍掉了。
怎么动态加载不同的地图呢？
用import全部导入？ 比较蠢
首先我们需要先了解下echartsAPI
// data为对应的地图数据
echarts.registerMap(param, data);
map.setOption({
geo: {
// map: 'china' | '四川'
// 必须要先引入了对应地图的js文件或者json文件，在这一步的时候，echarts会自动将对应的JS文件注入，地图才会显示.
map: param,
}
})
我们在这里导入不同的地图信息即可
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 = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾'];
// 判断当前要加载的地图是不是省？
const isProvince = (name) => {
return provincesText.some((province) => {
return province === name;
})
}
// 定义方法加载某个省的地图文件
const loadScriptMap = (name, callback) => {
// 获取这个省的拼音名字 name = '四川' => pinyinName = 'sichuan'
const pinyinName = provinces[provincesText.indexOf(name)]
// 引入这个对应的地图JSON，如果是在项目中要打包，请将这些文件提取出来，放在静态资源中
// build的时候这些文件不会被打包，无可加载资源地图是不会显示的！！！！
callback(name, require(`@/map/province/${pinyinName}`));
}
if (isProvince(mapName)) {
// 从外部加载这个省的地图文件
loadScriptMap(mapName, loadMap)
} else {
// 否则切换中国地图
loadMap(mapName, require(`@/map/china.json`));
}
完整代码
class MapComponent extends React.Component {
drawMap(mapName, Data) {
/*获取地图数据*/
const color = '#FFF';//航线的颜色
// 初始化echarts
const map = echarts.init(document.getElementById('map'));
// 定义初始加载的地图区域,中国地图
// 定义加载地图的方法
// 参数为要显示地图区域的名字
const loadMap = (param, data) => {
echarts.registerMap(param, data);
// echarts.getMap(mapName).geoJson.features.forEach(function (v) {
// // 地区经纬度
// geoCoordMap[v.properties.name] = v.properties.cp;
// });
map.setOption({
geo: {
// map: 'china' | '四川'
// 必须要先引入了对应地图的js文件或者json文件，在这一步的时候，echarts会自动将对应的JS文件注入，地图才会显示.
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);
}
// 判断当前要加载的地图是不是省？
const isProvince = (name) => {
return provincesText.some((province) => {
return province === name;
})
}
// 定义方法加载某个省的地图文件
const loadScriptMap = (name, callback) => {
// 获取这个省的拼音名字 name = '四川' => pinyinName = 'sichuan'
const pinyinName = provinces[provincesText.indexOf(name)]
// 引入这个对应的地图JSON，如果是在项目中要打包，请将这些文件提取出来，放在静态资源中
// build的时候这些文件不会被打包，无可加载资源地图是不会显示的！！！！
callback(name, require(`@/map/province/${pinyinName}`));
}
if (isProvince(mapName)) {
// 从外部加载这个省的地图文件
loadScriptMap(mapName, loadMap)
} else {
// 否则切换中国地图
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.6rem",
width: "10.05rem",
marginLeft: ".26rem",
float: "left",
position: "relative",
zIndex: 0
}}>
<MapBox id="map" />
</div>
)
}
}
总结
如果你也有类似的需求，那么希望对你有点点帮助。
