背景

该项目是基于ts实现的 涵盖js通用函数库 js libs 集成WebGL地图函数库 三维地图-3DMap

该函数库特性

• 基于ts
• 打包模式为 ES Module 模式
• 集成webgl地图lib

使用

适用于 vue 或 react 基于 ES 规范

项目目录介绍

    |_ _ _  lib // tsc编译后的目录
    |
    |_ _ _  src // 源码
    |       |
    |_ _ _  |__ tilemap // webgl地图lib
    |       |     |
    |       |     |
    |       |     |_ _ MapTile //地图切片类
    |       |
    |       |
    |       |
    |_ _ _  |__ utils // 数组类的函数集合
    |       |     | array // 数组类的函数集合
    |       |     |
    |       |     |_ _ _arrayUnique.ts // 数组去重函数
    |       |     | gis // GIS工具类函数集合
    |       |     |
    |       |     |_ _ _coordinate.ts // 坐标转换函数，百度-WGS84-火星坐标系
    |       |
    |       |_ _ _ index.ts // 函数的总入口
    |       |
    |       |
    |_ _ _  test // mocha 测试代码
    |       |
    |       |_ _ _ arrayUnique.test.ts // 单元测试代码
    |
    |_ _ _  tsconfig.json // typescript 编译配置文件
    |
    |_ _ _  tsconfig.test.json // 单元测试的配置

arrayUnique.ts 代码如下

/**
 * 数组去重
 * @param arr {array} 数组
 * @returns {array} array
 */
export default function arrayUnique(arr: Array<any>): Array<any> {
  return [...new Set(arr)];
}

arrayUnique.test.ts 代码如下

import 'mocha';
import { expect } from 'chai';
import arrayUnique from '../src/array/arrayUnique';

describe('arrayUnique函数', function(){
  it('arrayUnique', function() {
    expect(arrayUnique([1,2,2,3,3])).to.deep.equal([1,2,3]);
  });
});

script 命令介绍

"build": "npm run clean && tsc -p tsconfig.json", 
"clean": "rimraf ./dist",
"test": "env TS_NODE_PROJECT=\"tsconfig.test.json\" mocha --require ts-node/register test/*.test.ts"

• build 是编译typescript 代码为 es5 的代码
• clean 是删除 dist 目录
• test 是运行单元测试

tsconfig.json 内容如下

{
  "compilerOptions": {
    "outDir": "dist",
    // esnext 是标准的 es module 格式
    "module": "esnext",
    // 编译后符合什么es版本
    "target": "es5",
    // 为每个ts文件 生成一个对应的 .d.ts 文件; 获得 ts 提示
    "declaration": true,
    "downlevelIteration": true,
    "noImplicitAny": true,
    "lib":["es5", "dom", "dom.iterable", "es2015", "es2016", "es2017"],
    "jsx": "react",
  },
  "include": [
    "src"
  ],
  "exclude": [
    "src/**/*.test.tsx",
  ]
}

发布npm流程

npm publish

使用方法

安装依赖: npm i cmiot-map-libs -S

import { isEmpty } from 'cmiot-map-libs';
import { Coordinate } from 'cmiot-map-libs';

//百度经纬度坐标转国测局坐标
let coordinate01 = Coordinate.BD09toGCJ02(32.33, 112.23);
//国测局坐标转百度经纬度坐标
let coordinate02 = Coordinate.GCJ02toBD09(32.33, 112.23);
//wgs84转国测局坐标
let coordinate03 = Coordinate.WGS84toGCJ02(32.33, 112.23);
//国测局坐标转wgs84坐标
let coordinate04 = Coordinate.GCJ02toWGS84(32.33, 112.23);

console.log(coordinate01)

export default () => {
  console.log(isEmpty([1, 2, 3])) 
};

函数库开发过程中遇到的问题汇总

问题一

npm run test 如下报错：

import * as chai from 'chai';

^^^^^^

SyntaxError: Cannot use import statement outside a module

补充说明

这里只是把ts代码编译为es5 的代码，并且采用的是 es module 模式, 如果想把函数库打包为umd 模式的代码，可以使用 webpack 或者 rollup 进行打包

参考

mocha 官网