坐标批量转换

时间:2020-9-13 作者:admin

本文基于vue-cli使用proxy代理调用百度第三方接口,使用Excel进行坐标批量转换,遵守自定义tslint规范。

1 表格

效果图:

坐标批量转换

坐标批量转换

在读取成Uint8Array,再转换为Unicode编码时,之前的js中,这样写是没问题的,但是在ts中则会报类型不匹配的错误,需要使用as转换成相匹配的类型。

// js
let bytes = new Uint8Array(reader.result);
// ts
let bytes = new Uint8Array(reader.result as ArrayBuffer);

此外,在导出excel函数中,之前使用ES6语法的const { columns } = this;在ts响应会出现错误。

const { columns } = this;
//等于
const columns = this.columns;

可以使用原生js,当然也可以使用tslint的校验忽略:在代码上一行加上tslint注释// tslint:disable

2 处理坐标

将上传与导出做成按钮组件,在上传文件后,选用vuex进行非关系型组件之间通信。

2.1 vuex模块化

store目录如下:

坐标批量转换

import { StoreDataModuleBase } from '../helper/StoreFactory';
import StoreConst from '../storeConst';
// tslint:disable-next-line: class-name
export class excelData {
  public data: object[] = [];
}
class StateDcvMain {
  public excel_Data: excelData = new excelData();
}
export const StoreData = new StoreDataModuleBase<StateDcvMain, any>(
  new StateDcvMain(),
  // getter
  {
    GetExcelData: (state: StateDcvMain, getters: any) => {
      return state.excel_Data;
    }
  },
  // mutiations
  {
    [StoreConst.UPDATE_DATA]: (state: StateDcvMain, value: excelData) => {
      state.excel_Data = value;
    }
  },
  // actions
  {
    [StoreConst.UPDATE_DATA_COMMIT]: ({ commit }: any, value: any) => {
      return new Promise((resolve, reject) => {
        commit('UpdateData', value);
        resolve();
      });
    }
  }
);
// storeConst.ts
export default class  StoreConst {
  public static UPDATE_DATA = 'UpdateData';
  public static UPDATE_DATA_COMMIT = 'UpdateDataCommit';
}

在index的Vuex中声明modulesStoreData

const Store = new Vuex.Store({
  modules: {
    StoreData
  }
});
export default Store;

在导入文件,获取文件json后,将其写入vuex的excel_Data中。

that.$store.dispatch('UpdateDataCommit', that.upData).then(() => {
  if (that.$store.getters.GetExcelData.length !== 0) {
      alert('上传成功!');
 }
 // 读取
 console.log(this.$store.getters.GetExcelData);

2.2 处理数据

坐标批量转换

查看百度api,可以发现,转换接口一次上限传递100个坐标,此时,就需要考虑上传的json数组长度是否超过100。
将导出excel绑定down方法,

<template>
  <div class="export">
    <button @click="down">
      <slot>导出Excel</slot>
    </button>
  </div>
</template>
private points: object[] = [];
private down() {
    this.points = this.$store.getters.GetExcelData;
    this.points.length <= 100
      ? this.change1(this.points)
      : this.change2(this.points);
    this.ExportExcel();
  }
// 获取到的数据格式:
// [
//    { x: '121.325543', y: '31.763342' },
//    { x: '121.355543', y: '31.463342' },
//    { x: '121.324543', y: '31.763352' }
//  ]
// 需要处理成的格式
// '114.21892734521,29.575429778924;114.21892794521,29.575429778924;114.21892734521,29.579029778924'

此时需要分两种情况讨论:

  • 长度小于100
    使用map遍历数组,进行字符串拼接。
private change1(p: object[]) {
    let str = p.map((_: any) => _.x + ',' + _.y + ';').join('');
    this.changeBd(str.substring(0, str.lastIndexOf(';')));
  }
  • 长度大于100
    使用group方法,将其分成最大长度为100的二维数组,再使用map进行遍历(reduce也可)。
private change2(p: object[]) {
    // tslint:disable
    this.group(p, 100).map(_ => {
      let s = _.map((c: any) => c.x + ',' + c.y + ';').join('');
      this.changeBd(s.substring(0, s.lastIndexOf(';')));
    });
  }
  // 数组变为多维数组
  private group(array: object[], subGroupLength: number) {
    let index = 0;
    let newArray = [];
    while (index < array.length) {
      newArray.push(array.slice(index, (index += subGroupLength)));
    }
    return newArray;
  }

3 调用第三方接口

百度web服务API可查看接口功能介绍。
安装好axios(yarn add axios),采用局部导入即可。
接口调用代码如下,获取到数据后需要将多维转为一维,将一维数组导出成excel。

private changeBd(arg: string) {
    $axios
      .get(
        '/api/geoconv/v1/?coords=' +
          arg +
          '&from=1&to=5&ak=G54LAaflEVRcUG0CfwtdONWRDFuACnWa'
      )
      // tslint:disable
      .then(res => {
        // 拿到后台数据赋值给前端
        this.newArr.push(res.data.result);
        // 降维
        this.newArr = this.newArr.reduce((p: any, c: any) => p.concat(c), []);
      })
      // tslint:disable
      .catch(err => {
        console.log('错误信息:' + err);
      });
  }

在调用的时候,如果直接拼成百度的接口,会出现跨域问题。使用第三方接口的时候可以使用proxy代理,或者后端代理。在此我使用vue的proxy代理。
proxy代理:在项目根目录新建一个vue.config.js文件。

module.exports = {
  publicPath: "/",
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.map.baidu.com',
        changeOrigin: true,//是否跨域 开启代理:在本地创建一个虚拟服务器
        // ws: true,//是否代理websockets
        // secure: false,//如果是https接口,需要配置这个参数
        pathRewrite: { '^/api': '' } //重写路径
      }
    },
    open: true
  },
}

点击clying GitHub可查看源码。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。