turf topojson three lodash

1
2
3
4
5
6
7
8
9
10
11

import { onMounted, onUnmounted, nextTick, ref } from "vue";
import * as turf from "@turf/turf";
import mymap from "./../../views/dmap/components/sgmap/index.vue";
// import mymap from "./components/mapbox/index.vue";
// import mapboxgl from "mapbox-gl";
// import * as THREE from "three";
// import { debounce } from "lodash";
// import _ from 'lodash';

import * as d3 from "d3";
import * as topojson from "topojson";

d3

1

npm install --save d3

if TypeScript

1

npm install --save-dev @types/d3

1

import * as d3 from "d3";

map style

Mapbox-owned style:

• mapbox://styles/mapbox/standard
• mapbox://styles/mapbox/streets-v12
• mapbox://styles/mapbox/outdoors-v12
• mapbox://styles/mapbox/light-v11
• mapbox://styles/mapbox/dark-v11
• mapbox://styles/mapbox/satellite-v9
• mapbox://styles/mapbox/satellite-streets-v12
• mapbox://styles/mapbox/navigation-day-v1
• mapbox://styles/mapbox/navigation-night-v1.

1

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

查看

1

nvm ls

使用最新

1

nvm use node

设置默认

1

nvm alias default v12.13.0

1
2
3
4
5
6
7
8
9
10
11
12

$ nvm use 16
Now using node v16.9.1 (npm v7.21.1)
$ node -v
v16.9.1
$ nvm use 14
Now using node v14.18.0 (npm v6.14.15)
$ node -v
v14.18.0
$ nvm install 12
Now using node v12.22.6 (npm v6.14.5)
$ node -v
v12.22.6

1

git clone -b 'vue(v2)' http://192.168.251.11/yanchangyong/workflow-web.git

change vue page title

https://stackoverflow.com/questions/62023604/where-to-find-or-how-to-set-htmlwebpackplugin-options-title-in-project-created-w

阅读内容 录音

1

say -f 1.txt -o 1.aiff

转 mp3

1

lame -m m 1.aiff 1.mp3

1
2
3
4
5
6

let i = 0;

while (i < scores.length) {
    console.log(scores[i]);
    i++;
}

1
2
3
4
5
6

let i = 0;

do {
    console.log(scores[i]);
    i++;
} while (i < scores.length);

1
2
3

for (let i = 0; i < scores.length; i++) {
    console.log(scores[i]);
}

1
2
3

for (i in scores) {
    console.log(scores[i]);
}

1
2
3

for (score of scores) {
    console.log(score);
}

forEach

map

reduce

reduceRight

flatMap

filter

every

some

indexOf

lastIndexOf

find

findIndex

keys

entries

includes

Spread …

via https://www.w3schools.com/js/js_array_iteration.asp

via https://www.w3schools.com/jsref/jsref_obj_array.asp

at

1
2

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.at(-2);

array.slice(start, end)

The slice() method does not change the original array.

array.splice(index, howmany, item1, ….., itemX)

The splice() method overwrites the original array.

copyWithin

array.copyWithin(target, start, end)

Tools -> Developer -> New Snippet…

1
2
3
4
5
6

<snippet>
    <content><![CDATA[console.log($1);$0]]></content>
    <tabTrigger>log</tabTrigger>
    <scope>text.plain,source.js,source.ts</scope>
    <description>console.log()</description>
</snippet>

保存为 log.sublime-snippet

使用：

log+回车

npm –save 和–save-dev的区别

使用–save 安装的包是项目发布之后还需要依赖的包， 如axiox , express等包，等项目上线以后还需使用。

使用–save-dev 安装的包则是开发时依赖的包，等项目上线则不会使。

npm install 和 npm i 是一样

–save 和 -S 是一样
–save-dev 和 -D 是一样的

tsc

1
2
3
4

npm i tsc -D
npx tsc --init

npx tsc -w

任何 1.ts 生成 1.js

也可以修改 tsconfig.json 配置

1
2

// "outFile":"./",
// "outDir": "./",   

类型

• boolean

• number

• string

• Explicit

• Implicit

1

let firstName: string = "Dylan";

unknown 比 any 安全

1
2
3

let w: unknown = 1;

let v: any = true;

date 性能

1
2
3

Date.now()  // 最快
new Date().getTime();
+new Date // 最慢

via https://www.measurethat.net/Benchmarks/Show/9412/0/new-date-vs-new-dategettime-vs-datenow-100k

interface 和 type 区别

• 接口是通过继承的方式来扩展，类型别名是通过 & 来扩展。
• 接口可以自动合并，而类型别名不行

https://zhuanlan.zhihu.com/p/351213183

到底应该用 type 还是 interface ？
Because an interface more closely maps how JavaScript objects work by being open to extension, we recommend using an interface over a type alias when possible.
On the other hand, if you can’t express some shape with an interface and you need to use a union or tuple type, type aliases are usually the way to go.

意思是说能用 interface 的地方就用 interface，否则用 type，其实这个解释官方说的也比较明确，这样使用的原因是因为更贴合 JavaScript 对象的工作方式，再清晰一些，如果我们是定义一个 object，那么最好是使用 interface 去做类型声明，什么时候用 type 呢，当定义一个 function 的时候，用 type 会更好一些

1
2
3
4

// the `?` operator here marks parameter `c` as optional
function add(a: number, b: number, c?: number) {
  return a + b + (c || 0);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

class Person {
  private name: string;

  public constructor(a: string) {
    this.name = a;
  }

  public getName(): string {
    return this.name;
  }
}
      
const person = new Person('david');

console.log(person)

//console.log(person.name)

console.log(person.getName())

class Property ‘’ has no initializer and is not definitely assigned in the constructor

1. tsconfig.json 关掉严格

1
2
3

"compilerOptions": {
  "strictPropertyInitialization":false
}

2. undefined

1

employees : Employee[] | undefined;

3. definite assignment assertion

1

employees!: Employee[];

4. init

1

employees: Employee[] = [];

5. Assignment in the Constructor

employees: Employee[];

constructor() {
this.employees=[];
}

super

父级构造函数

?? 对比 ||

使用 ?? 时，只有当值1为null或undefined时才返回值2；

使用 || 时，值1会转换为布尔值判断，为true返回值1，false 返回值2

0: Main button pressed, usually the left button or the un-initialized state

1: Auxiliary button pressed, usually the wheel button or the middle button (if present)

2: Secondary button pressed, usually the right button

3: Fourth button, typically the Browser Back button

4: Fifth button, typically the Browser Forward button

下载的美剧是1目录1集，想考出来

即

a1/a1.mp4
a2/a2.mp4

->

a1.mp4
a2.mp4

1

find . -type f -exec mv {} ./ \;

报错！重名！

a1.mp4/a1.mp4
a2.mp4/a2.mp4

1

find . -type f -exec mv {} ../ \;

那就往上一层（然后删除空目录，再考回去）

command+shift+p （mac）运行

show rendering

== 或者

• 或者 右侧 … 里 more tools 都有 rendering

里面可以切换 黑白主题