数据大屏 项目开发中，要渲染中东欧国家的地图，但是手头上并没有这些国家的地图数据，只有一份世界地图，那么怎样才能只渲染需要的渲染的国家呢？
首先要世界地图以及地图中英文对照表
中东欧国家
这里中东欧需要渲染14个国家。因为世界地图默认是英文的，所以我们需要中英文对照表准备好。
[{
name: '波兰',
ename: 'Poland'
}, {
name: '捷克',
ename: 'Czech Rep.'
}, {
name: '匈牙利',
ename: 'Hungary'
}, {
name: '希腊',
ename: 'Greece'
}, {
name: '斯洛伐克',
ename: 'Slovakia'
}, {
name: '罗马尼亚',
ename: 'Romania'
}, {
name: '斯洛文尼亚',
ename: 'Slovenia'
}, {
name: '保加利亚',
ename: 'Bulgaria'
}, {
name: '塞尔维亚',
ename: 'Serbia'
}, {
name: '克罗地亚',
ename: 'Croatia'
}, {
name: '阿尔巴尼亚',
ename: 'Albania'
}, {
name: '马其顿',
ename: 'Macedonia'
}, {
name: '黑山共和国',
ename: 'Montenegro'
}, {
name: '波斯尼亚和黑塞哥维那',
ename: 'Bosnia and Herz.'
}]
处理地图数据
我们有了需要的国家，有了世界地图，接下来就是从世界地图中提取我们需要的国家了。
首先地图数据格式如下，地图边界数据都在features下面，那么只需要遍历地图将数据提取出来就可以了。
{
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features": []
}
遍历数据
首先我们遍历我们需要的国家名称，然后遍历地图数据，当国家名称和遍历的地图中的国家名称一致时，那么这个国家就是我们需要的国家数据。因为世界地图是英文的，但是我们希望将国家名称以中文的方式显示，那么我们需要额外修改一下名称，type2.properties.name = type.name将匹配到的名称改为中文名称。
//提前罗列出来的国家
that.countryList.forEach((type) => {
//世界地图
that.data.features.forEach((type2) => {
if (type.ename == type2.properties.name) {
type2.properties.name = type.name
that.MapData.features.push(type2)
}
});
});
console.log(JSON.stringify(that.MapData))
调试输出复制
将数据进行调试输出，然后复制出来覆盖之前的地图数据，一份新的地图数据就出炉了。
完整代码
getMapData() {
var that = this;
that.MapData = {
"type": "FeatureCollection",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
"features": []
}
that.countryList.forEach((type) => {
that.data.features.forEach((type2) => {
if (type.ename == type2.properties.name) {
type2.properties.name = type.name
console.log(type.name)
that.MapData.features.push(type2)
}
});
});
},
