vue3-coordtransform-tool

v1.0.2

Published

6 months ago

基于vue3封装的参数计算及坐标转换工具

Downloads

0High
0Medium
0Low

marsy

coordinate transform

vue3-coordtransform-tool

基于vue3封装的参数计算及坐标转换工具

使用方式一：组件式

方法

| 方法名 | 描述 | 传入参数 | 返回值 | | ----------- | ------------------------ | --------------------------------------------------------- | -------------------------------------- | | getParams | 获取组件所填写的转换参数回调参数：TransformOptions | callback: Function | - | | setParams | 为组件设置转换参数 | TransformOptions | - | | transform | 根据组件填写的参数进行转换输入：源坐标系下的坐标数组, 回调方法回调参数：Cartesian3[ ] | Cartesian3[ ], callback: Function | - |

使用例子

依赖安装

npm install @smart/vue3-coordtransform-tool --registry http://172.16.11.21:4873

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus';
import coordTool from '@smart/vue3-coordtransform-tool';

import 'element-plus/dist/index.css'
import '@smart/vue3-coordtransform-tool/style.css';

const app = createApp(App);
app
  .use(ElementPlus)
  .use(coordTool)
  .mount('#app');

App.vue

<template>
  <coord-tool ref="coordRef" />
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  const coordRef = ref();

  //list 的值，请设置成对应项目的数据
  const list = ref([
    { x: -11382.33518, y: 27929.50971, z: 4.5558 },//七参数数据
    { x: -13243.42816, y: 29166.53724, z: 3.78935 },//七参数数据
  ])

  //步骤一：在组件填写转换参数 或者 调用方法'getParams'为组件设置参数
  //options 的参数值，请设置成对应项目的参数值
  const options = {
    prjStr: 'PROJCS["Transverse_Mercator",GEOGCS["GCS_00",DATUM["D_00",SPHEROID["Krassovsky", 6378245, 298.2999999999998]],PRIMEM["Greenwich", 0],UNIT["Degree", 0.017453292519943295]],PROJECTION["Transverse_Mercator"],PARAMETER["scale_factor", 1],PARAMETER["central_meridian", 121.4666666666998],PARAMETER["latitude_of_origin", 31.23418348890005],PARAMETER["false_easting", -47.868],PARAMETER["false_northing", -136.531],UNIT["Meter", 1]]',
    sevenDTO: {
      dx: 121.98138094123294,
      dy: 31.21903279119547,
      dz: 31.024740258242275,
      m: -0.00000001346888431,
      rx: 0.0005299067413320523,
      ry: 0.00006102303984873141,
      rz: -0.000007629079567432108,
      sourceCoor: 4,
      sourceCoorFormat: 1,
      targetCoor: 1,
      targetCoorFormat: 0,
    },
    modelType: 'sevenParam',
    paramType: 'proj4',
    name: '上海城建坐标系',
  };
  coordRef.value && coordRef.value.setParams(options);

  //步骤二：调用方法'transform',根据组件所填的参数进行坐标转换计算
  coordRef.value.transform(list.value, (res: any) => {
     // 根据计算结果res, 进行一系列业务需求开发...
  });

  //补充方法：如果业务需求：需要保存转换参数, 可以调用方法'getParams'获取参数
  coordRef.value.getParams((res: any) => {
    // TODO
  });

</script>

使用方式二：工具类

方法

| 方法名 | 描述 | 参数 | 返回值 | | ----------------| ------------------------ | ------------------- | ------------------- | | coordTransform | 根据组件填写的参数进行转换输入：源坐标系下的坐标数组, 转换参数, 回调方法回调参数：Cartesian3[ ]| Cartesian2[ ] | data: Cartesian3[ ] | Cartesian2[ ], params: TransformOptions, callback: Function | - | | paramsCalculate | 七参数/四参数计算输入：同名点对(≥4对), 转换坐标系统参数, 转换模型类型, 回调方法回调参数：SevenParam | FourParam | data: Homonym[ ], params: CoordSysItem, type: modelType, callback: Function | - |

使用例子

依赖安装

npm install @smart/vue3-coordtransform-tool --registry http://172.16.11.21:4873

App.vue

<script setup lang="ts">
  import { CoordTool } from 'vue3-coordtransform-tool';

  // 坐标转换：传入原始数据数组，转换参数，回调方法
  const list = ref([
    { x: -11382.33518, y: 27929.50971, z: 4.5558 },//七参数数据
    { x: -13243.42816, y: 29166.53724, z: 3.78935 },//七参数数据
  ]);

  const options = {
    prjStr: 'PROJCS["Transverse_Mercator",GEOGCS["GCS_00",DATUM["D_00",SPHEROID["Krassovsky", 6378245, 298.2999999999998]],PRIMEM["Greenwich", 0],UNIT["Degree", 0.017453292519943295]],PROJECTION["Transverse_Mercator"],PARAMETER["scale_factor", 1],PARAMETER["central_meridian", 121.4666666666998],PARAMETER["latitude_of_origin", 31.23418348890005],PARAMETER["false_easting", -47.868],PARAMETER["false_northing", -136.531],UNIT["Meter", 1]]',
    sevenDTO: {
      dx: 121.98138094123294,
      dy: 31.21903279119547,
      dz: 31.024740258242275,
      m: -0.00000001346888431,
      rx: 0.0005299067413320523,
      ry: 0.00006102303984873141,
      rz: -0.000007629079567432108,
      sourceCoor: 4,
      sourceCoorFormat: 1,
      targetCoor: 1,
      targetCoorFormat: 0,
    },
    modelType: 'sevenParam',
    paramType: 'math',
  };

  CoordTool?.coordTransform(list.value, options, (res: any) => {
    // 根据计算结果res, 进行一系列业务需求开发...
  });

  //七/四参数计算:
  const sysVal = {
    sourceCoor: 4,
    sourceCoorFormat: 1,
    targetCoor: 1,
    targetCoorFormat: 0,
  } as any;

  //七参数计算
  const sevenList = [
    { y1: 27929.50971, x1: -11382.33518, z1: 4.5558, z2: 15.2636, x2: 121.759994336111, y2: 31.1324492527778 },
    { y1: 29166.53724, x1: -13243.42816, z1: 3.78935, z2: 14.5594, x2: 121.772910338889, y2: 31.1156331055556 },
    { y1: 28600.03601, x1: -10741.81385, z1: 4.80531, z2: 15.5283, x2: 121.767043205556, y2: 31.1382099611111 },
    { y1: 28180.6689, x1: -15133.02329, z1: 4.56354, z2: 15.3219, x2: 121.762521988889, y2: 31.0986145861111 }
  ] as any;
  
  CoordTool?.paramsCalculate(sevenList, sysVal, 'sevenParam', (res: any) => {
    //TODO:
  }); 

  //四参数计算
  const fourList = [
    { x1: 395721.7, y1: 3318293, x2: 492230.8, y2: 3317864 },
    { x1: 400548, y1: 3314017, x2: 497093.3, y2: 3313629 },
    { x1: 3340043, y1: 431033.8, x2: 527349.1, y2: 3339919 }
  ] as any;

  CoordTool?.paramsCalculate(fourList, sysVal, 'fourParam', (res: any) => {
    //TODO:
  }); 
</script>

类型

| 类型名称 | 说明 | 取值 | |---------|------------------------------------------|---------------------------| |modelType|转换模型参数类型(属于七参数或四参数) |'sevenParam' | 'fourParam'| |paramType|转换方式类型(选用数学转换模型或选用proj4方式)|'math' | 'proj4' |

Cartesian3

export interface Cartesian3 {
    x: number;
    y: number;
    z: number;
}

Cartesian2

export interface Cartesian2 {
    x: number;
    y: number;
}

Homonym 同名点对

export interface Homonym {
    x1: number;
    y1: number;
    z1?: number;
    x2: number;
    y3: number;
    z2?: number;
}

CoordSysItem

export interface CoordSysItem {
    sourceCoor: number; //源坐标系 取值详见下 [坐标系值]表格
    sourceCoorFormat: number; //源坐标格式 取值详见下 [坐标格式值]表格
    targetCoor: number; //目标坐标系 取值详见下 [坐标系值]表格
    targetCoorFormat: number; //目标坐标格式 取值详见下 [坐标格式值]表格
};

坐标系值

| 坐标系 | 对应值 |
| ------------------- | ---------|
| 2000国家大地坐标系 | 0 |
| WGS84世界坐标系 | 1 | | 1980国家大地坐标系 | 2 | | 1954北京坐标系 | 3 | | 地方坐标系 | 4 |

坐标格式值

| 坐标格式 | 对应值 | | -------------------|----------| | 大地坐标BLH | 0 | | 平面直角坐标xyh | 1 | | 空间直角坐标XYZ | 2 |

SevenParam

export interface SevenParam {
    dx?: number;
    dy?: number;
    dz?: number;
    m?: number;
    rx?: number;
    ry?: number;
    rz?: number;
};

FourParam

export interface FourParam {
    dx?: number;
    dy?: number;
    k?: number;
    r?: number;
};

SevenItem

export interface SevenItem {
    dx?: number;
    dy?: number;
    dz?: number;
    m?: number;
    rx?: number;
    ry?: number;
    rz?: number;
    sourceCoor?: number;
    sourceCoorFormat?: number;
    targetCoor?: number;
    targetCoorFormat?: number;
}

FourItem

export interface FourItem {
  dx?: number;
  dy?: number;
  k?: number;
  r?: number;
  sourceCoor?: number;
  sourceCoorFormat?: number;
  targetCoor?: number;
  targetCoorFormat?: number;
}

TransformOptions

export interface TransformOptions {
  prjStr?: string;
  sevenDTO?: SevenItem;
  fourDTO?: FourItem;
  modelType?: modelType;
  paramType?: paramType;
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

vue3-coordtransform-tool

使用方式一：组件式

方法

使用例子

依赖安装

main.ts

App.vue

使用方式二：工具类

方法

使用例子

依赖安装

App.vue

类型

Cartesian3

Cartesian2

Homonym 同名点对

CoordSysItem

坐标系值

坐标格式值

SevenParam

FourParam

SevenItem

FourItem

TransformOptions