由于geoJson获取的渠道不同,数据可能也有差异,有些geoJson数据没有center,这导致我们在渲染地图的时候,因为没有center导致地名加载的时候报错。
但是自己手动一个一个添加center点就太累人了,这里提供的方法是通过js对json数据进行循环处理,根据现有的数据自动计算获取中心点并添加,有些地区可能会有偏差,但大部分还是比较准确的。
在线地址
关键代码
<script>
export default {
data() {
return {
fileName: '',
};
},
methods: {
getCenter(data) {
let centerLonLat = []
var newArr = []
if (data.type == 'Polygon') {
newArr = data.coordinates[0]
if (data.coordinates[0][0][0][0]) {
newArr = data.coordinates[0][0]
}
}
if (data.type == 'GeometryCollection') {
newArr = data.geometries[0].coordinates[0]
}
// console.log(newArr)
var arr = newArr
// if (newArr[0][0][0]) {
// arr = newArr[0]
// }
console.log(arr.length)
if (arr.length) {
const lon = []
const lat = []
const poly = [];
for (let i = 0, len = arr.length; i < len; i++) {
lon.push(arr[i][0])
lat.push(arr[i][1])
}
for (let i = 0, len = lon.length; i < len; i++) {
poly.push({
x: parseFloat(lon[i]),
y: parseFloat(lat[i]),
z: 0
});
}
const sortedLongitudeArray = poly.map(item => item.x).sort();
const sortedLatitudeArray = poly.map(item => item.y).sort();
const centerLongitude = ((parseFloat(sortedLongitudeArray[0]) + parseFloat(sortedLongitudeArray[sortedLongitudeArray.length - 1])) / 2).toFixed(14);
const centerLatitude = ((parseFloat(sortedLatitudeArray[0]) + parseFloat(sortedLatitudeArray[sortedLatitudeArray.length - 1])) / 2).toFixed(14);
// console.log(centerLongitude, centerLatitude);
centerLonLat = [Number(centerLongitude), Number(centerLatitude)]
}
return centerLonLat;
},
// 显示文件名
showFileName() {
const fileInput = this.$refs.fileInput;
const file = fileInput.files[0];
if (file) {
this.fileName = file.name;
}
},
// 添加 center 到 GeoJSON
addCenterToGeoJson() {
const fileInput = this.$refs.fileInput;
const file = fileInput.files[0];
if (!file) {
alert('请先选择GeoJSON文件');
return;
}
const reader = new FileReader();
reader.readAsText(file);
reader.onload = (event) => {
const dataStr = event.target.result;
const newData = this.getCenterData(dataStr);
this.saveFile(newData);
};
},
// 获取带有 center 的新数据
getCenterData(dataStr) {
const data = JSON.parse(dataStr);
data.features.forEach((v, index) => { // 使用箭头函数以便能访问外面的 this
if (!v.properties.hasOwnProperty('center') || v.properties.center === null) { // 检查 center 字段是否存在或者为空
const center = this.getCenter(v.geometry); // 使用 this.getCenter
if (center && center.length > 0) { // 确保 center 是有效的
v.properties.center = center;
}
}
});
// 返回处理后的新数据
return JSON.stringify(data);
},
// 保存文件
saveFile(data) {
const blob = new Blob([data], {type: "application/json"});
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'new_' + this.fileName;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
};
</script>