【工具】公用方法抽离——封装共用方法之对象式引入、函数式引入 & 二维数组for循环重新赋值

【工具】公用方法抽离——封装共用方法之对象式引入、函数式引入 & 二维数组for循环重新赋值

原始数据处理

var arr = [[1,2],[3,4],[5,6],[7,8]];
var temp = new Array();  //或  var temp = [];
for(var i= 0 ;i< arr.length; i++){
	//temp[i] = new Array(); // js二维数组 的赋值 要重新定义一个Arrray 
	temp[i] = []; // js二维数组 的赋值 要重新定义一个Arrray 
	temp[i][0] = arr[i][0];
	temp[i][1] = arr[i][1];
}
var data = temp[0][0];
console.log(data);  // 1
console.log(temp)  // [[1, 2], [3, 4], [5, 6], [7, 8]]

方式1：函数式-单独抽离出js文件

第一步：新建方法文件

src/utils/accurate.js

function accurate (arr) {
  let temp = []  // 二维数组赋值--坐标数组
  for (let i = 0; i < arr.length; i++) {
    temp[i] = [];
    temp[i][0] = Number(arr[i][0].toFixed(7));
    temp[i][1] = Number(arr[i][1].toFixed(7));
  }
  return temp;  // 最终坐标
}
export default accurate

第二步：在页面文件引入使用

index.vue

<script>
import accurate from '@/utils/accurate.js';       
// 元数据
attrObj.coordinates[0] =[
    [116.3552164, 39.9893523],
    [116.3573195, 39.9863926],
    [116.3599805, 39.9884973],
    [116.3552164, 39.9893523]
]
attrObj.coordinates[0] = accurate(attrObj.coordinates[0])  // 最终坐标  
</script>

方式2：对象式-集合到方法对象中

第一步：在方法对象中添加方法

src/utils/algorithm.js

class algorithm {
  /**
   * 坐标数据处理——支持7位精度方法
   * @param   {Array} arr 操作坐标数组
   * @return {[]}
   */
  accurate (arr) { // 传入数组
    let temp = []  // 二维数组赋值--坐标数组
    for (let i = 0; i < arr.length; i++) {
      temp[i] = [];
      temp[i][0] = Number(arr[i][0].toFixed(7));
      temp[i][1] = Number(arr[i][1].toFixed(7));
    }
    return temp;  // 最终坐标
  }
    
  /**
 * 编辑平台需求——支持7位精度方法
 * @param   {Object} obj 操作坐标数组所在对象
 * @return {Object}  修改后对象
 */
  accurateData (obj) { // 传入对象
    if (obj.type === 'Point') { //点
      obj.coordinates = obj.coordinates.map(v => Number(v.toFixed(7)))  // 最终坐标
    }
    // 调用当前方法使用 this
    if (obj.type === 'LineString') { //线
      obj.coordinates = this.accurate(obj.coordinates)  // 最终坐标
    }
    if (obj.type === 'Polygon') {  // 面
      obj.coordinates[0] = this.accurate(obj.coordinates[0])  // 最终坐标
    }
    return obj
  }    
}

export default new algorithm();

第二步：在页面文件引入使用

index.vue

<script>
import algorithm from '@/utils/algorithm.js';    
 
// 第一种情况  调用-传入数组
// 元数据
attrObj.coordinates[0] =[
    [116.3552164, 39.9893523],
    [116.3573195, 39.9863926],
    [116.3599805, 39.9884973],
    [116.3552164, 39.9893523]
]
      
// 最终坐标
attrObj.coordinates[0] = algorithm.accurate(attrObj.coordinates[0])  
    
// 第二种情况  调用-传入对象
// 坐标数组所在对象
attrObj = algorithm.accurateData(attrObj)    
</script>