需求:我们在开发过程中会遇到使用中国地图来划分不同区域省份下面的数量统计情况,但是有时候使用Echarts里面地图功能和我们实际业务需求不匹配的,这个时候就需要我们手动自定义进行划分不同区域下面的省份数据。例如大区1下面有哪些省份,大区2对应哪些的省份进行划分显示的。
1,实现效果图如下:
2,关键代码如下:
【1】后端返回数据格式如下:
【2】把需要合并的省份的经纬度数据合并起来。
function mergeProvinces(chinaJson, regionMap) {//合并大区里省份的coordinatesvar oldFeatures = chinaJson.featuresvar featuress = regionMap.map((item) => {var polygonsCoordinates: any[] = []for (var z = 0; z < item.provinces.length; z++) {for (var j = 0; j < oldFeatures.length; j++) {if (oldFeatures[j].properties.name.includes(item.provinces[z].slice(0, 2))) {const coordinates = oldFeatures[j].geometry.coordinatesif (coordinates[0].length !== 1) {polygonsCoordinates = polygonsCoordinates.concat(coordinates)} else {polygonsCoordinates = polygonsCoordinates.concat(coordinates.reduce((r, e) => {return r.concat(e)}, []),)}oldFeatures[j].ok = 1break}}}return {id: 'xx',type: 'MultiPolygon',geometry: {type: 'Polygon',coordinates: polygonsCoordinates,},properties: {name: item.regionName || '',childNum: polygonsCoordinates.length,},}})const others = oldFeatures.filter((item: any) => !item.ok)featuress = featuress.concat(others)chinaJson.features = featuressreturn chinaJson}
3- 具体代码组件如下所示:
<template><div class="chinamapContentbox">