###

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

"line-color": [
  'case',
  ['boolean', ['feature-state', 'hover'], false],
  '#c00',

  [
    'case',
    ['!=', ['get', 'color'], null],
    ['get', 'color'],
    '#16e8e9'
  ]

],
````            

###

test.map.showCollisionBoxes = true  // 显示碰撞边界
test.map.showTileBoundaries = true  // 显示tile边界
test.map.showOverdrawInspector = true 

需要很习惯一段时间

### setFeatureState

if (quakeID) {
map.removeFeatureState({
source: “earthquakes”,
id: quakeID
});
}
map.setFeatureState({
source: ‘earthquakes’,
id: quakeID,
}, {
hover: true
});

1
2

map.addLayer({
‘id’: ‘earthquakes-viz’,
‘type’: ‘circle’,
‘source’: ‘earthquakes’,
‘paint’: {
// The feature-state dependent circle-radius expression will render
// the radius size according to its magnitude when
// a feature’s hover state is set to true
‘circle-radius’: [
‘case’,
[‘boolean’,
[‘feature-state’, ‘hover’],
false
],
[
‘interpolate’, [‘linear’],
[‘get’, ‘mag’],
1, 8,
1.5, 10,
2, 12,
2.5, 14,
3, 16,
3.5, 18,
4.5, 20,
6.5, 22,
8.5, 24,
10.5, 26
],
5
],
‘circle-stroke-color’: ‘#000’,
‘circle-stroke-width’: 1,
// The feature-state dependent circle-color expression will render
// the color according to its magnitude when
// a feature’s hover state is set to true
‘circle-color’: [
‘case’,
[‘boolean’,
[‘feature-state’, ‘hover’],
false
],
[
‘interpolate’, [‘linear’],
[‘get’, ‘mag’],
1, ‘#fff7ec’,
1.5, ‘#fee8c8’,
2, ‘#fdd49e’,
2.5, ‘#fdbb84’,
3, ‘#fc8d59’,
3.5, ‘#ef6548’,
4.5, ‘#d7301f’,
6.5, ‘#b30000’,
8.5, ‘#7f0000’,
10.5, ‘#000’
],
‘#000’
]
}
});
````

via https://docs.mapbox.com/help/tutorials/create-interactive-hover-effects-with-mapbox-gl-js/

examples

• drag point
• popup-on-hover

##

var aa = { “type”: “Polygon”,
“coordinates”: [
[
[100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0] ]
]
}

var aa = { “type”: “Polygon”,
“coordinates”: [
[ [100.0, 0.0], [101.0, 0.0], [101.0, 1.0], [100.0, 1.0], [100.0, 0.0] ],
[ [100.2, 0.2], [100.8, 0.2], [100.8, 0.8], [100.2, 0.8], [100.2, 0.2] ]
]
}

test.map.getSource(‘temp_line’).setData(aa)

{
type:’FeatureCollection’,
features:[
{
“geometry”: {
“type”: “MultiPoint”,
“coordinates”: [
[
108.91373500227928,
34.241324229728534
],
]
},
“type”: “Feature”,

}
]
}

options.preserveDrawingBuffer

If true , the map’s canvas can be exported to a PNG using map.getCanvas().toDataURL() . This is false by default as a performance optimization.

1

map.getCanvas().toDataURL()

queryRenderedFeatures

Returns an array of GeoJSON Feature objects representing visible features that satisfy the query parameters.

https://docs.mapbox.com/mapbox-gl-js/api/map/#map#queryrenderedfeatures

1
2
3
4
5

// Find all features within a static bounding box
var features = map.queryRenderedFeatures(
  [[10, 20], [30, 50]],
  { layers: ['my-layer-name'] }
);

1
2
3
4
5
6
7

// Find all features within a bounding box around a point
var width = 10;
var height = 20;
var features = map.queryRenderedFeatures([
  [point.x - width / 2, point.y - height / 2],
  [point.x + width / 2, point.y + height / 2]
], { layers: ['my-layer-name'] });

1
2

// Query all rendered features from a single layer
var features = map.queryRenderedFeatures({ layers: ['my-layer-name'] });

querySourceFeatures

Returns an array of GeoJSON Feature objects representing features within the specified vector tile or GeoJSON source that satisfy the query parameters.

https://docs.mapbox.com/mapbox-gl-js/api/map/#map#querysourcefeatures

1
2
3
4

// Find all features in one source layer in a vector source
var features = map.querySourceFeatures('your-source-id', {
sourceLayer: 'your-source-layer'
});

updateImage

1
2
3

// If an image with the ID 'cat' already exists in the style's sprite,
// replace that image with a new image, 'other-cat-icon.png'.
if (map.hasImage('cat')) map.updateImage('cat', './other-cat-icon.png');

https://stackoverflow.com/questions/17964757/how-to-prune-delete-nodes-in-nested-tree-like-json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

var a =  [
    {
        "label": "node1",
        "children": [
            {
                "label": "Human"
            },
            {
                "label": "Chimpanzee"
            }
        ]
    },
    {
        "label": "node2",
        "children": [
            {
                "label": "node3",
                "children": [
                    {
                        "label": "Rat"
                    },
                    {
                        "label": "Mouse"
                    }
                ]
            },
            {
                "label": "BigRat"
            }
        ]
    }
]

function prune(array, label) {
    for (var i = 0; i < array.length; ++i) {
        var obj = array[i];
        if (obj.label === label) {
            // splice out 1 element starting at position i
            array.splice(i, 1);
            return true;
        }
        if (obj.children) {
            if (prune(obj.children, label)) {
                if (obj.children.length === 0) {
                    // delete children property when empty
                    delete obj.children;

                    // or, to delete this parent altogether
                    // as a result of it having no more children
                    // do this instead
                    array.splice(i, 1);
                }
                return true;
            }
        }
    }
}

var wasItPruned = prune(tree, "node3");

###

简单说，就是允许碰撞

1
2
3
4
5

"icon-ignore-placement": true, //  不管下面
"icon-allow-overlap": true, // 允许被覆盖

"text-ignore-placement": true,
"text-allow-overlap": true,

polygon 多维数组是 “挖洞”

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

var aa =  { "type": "Polygon",
  "coordinates": [
    
    [ [108.9093384209429, 34.25000258545077],[108.90846464854332, 34.24677914297165],[108.91640950499936, 34.24612373914805],[108.91687875313949, 34.249801959853556],[108.9093384209429, 34.25000258545077]],

    [ [108.91183029038228, 34.24663201194514] ,[108.91448396952353, 34.24651163182365], [108.91482376990217, 34.247608422127456],[108.91183029038228, 34.24663201194514]],

    [[108.91026413410287, 34.24909755966851],[108.90994051469443, 34.24858930176197],[108.9122058505489, 34.248442173900116],[108.91243238413387, 34.24909755966851]]

  ]
}

test.map.getSource('temp_polygon').setData(aa)

MultiPolygon

最外面多一层

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

var aa =  { "type": "MultiPolygon",
  "coordinates": [[
    
    [ [108.9093384209429, 34.25000258545077],[108.90846464854332, 34.24677914297165],[108.91640950499936, 34.24612373914805],[108.91687875313949, 34.249801959853556],[108.9093384209429, 34.25000258545077]],

    [ [108.91183029038228, 34.24663201194514] ,[108.91448396952353, 34.24651163182365], [108.91482376990217, 34.247608422127456],[108.91183029038228, 34.24663201194514]],


  [[108.91026413410287, 34.24909755966851],[108.90994051469443, 34.24858930176197],[108.9122058505489, 34.248442173900116],[108.91243238413387, 34.24909755966851]]

  ]]
}

test.map.getSource(‘temp_polygon’).setData(aa)

多个 polygon

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

var aa = {
  "type": "MultiPolygon",
  "coordinates": [
    [

      [[108.9093384209429, 34.25000258545077], [108.90846464854332, 34.24677914297165], [108.91640950499936, 34.24612373914805], [108.91687875313949, 34.249801959853556], [108.9093384209429, 34.25000258545077]],
    ],
    [
      [[108.91183029038228, 34.24663201194514], [108.91448396952353, 34.24651163182365], [108.91482376990217, 34.247608422127456], [108.91183029038228, 34.24663201194514]],
    ],
    [
      [[108.91026413410287, 34.24909755966851], [108.90994051469443, 34.24858930176197], [108.9122058505489, 34.248442173900116], [108.91243238413387, 34.24909755966851]]
    ]
  ],
}

test.map.getSource('temp_polygon').setData(aa)

（从世界中）只显示 xxx

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

var aa =  {
  "type": "Polygon",
  "coordinates": [
    [[-180, -90], [-180, 90], [180, 90], [180, -90], [-180, -90]],

    要删掉的部分

    
  ]
}

test.map.getSource('temp_polygon').setData(aa)

最大化

option(alt) 点击左上角绿色按钮 最大化（不是全屏）

全屏

ctrl+command+f

1
2

var clone = Object.assign({}, {a: 1, b: 2, c: 3});
delete clone.b;

这个不完美

1

var clone2 = Object.assign({}, {a: 1, b: 2, c: 3}, {b: undefined});

1
2
3
4
5
6
7
8
9

const x = {a: 1, b: 2, c: 3, z:26};

const objectWithoutKey = (object, key) => {
  const {[key]: deletedKey, ...otherKeys} = object;
  return otherKeys;
}

console.log(objectWithoutKey(x, 'b')); // {a: 1, c: 3, z:26}
console.log(x); // {a: 1, b: 2, c: 3, z:26};

1
2
3

const obj = { a: 1, b: 2, c: 3, d: 4 }
const clone = (({ b, c, ...o }) => o)(obj) // remove b and c
console.log(clone)

lodash

1

_.omit(x, 'b')

• 早安，所有善良而勇敢的人们
• 坏人们，颤抖吧

关掉 vue has been registered but not used

package.json 的 eslintConfig（如果已经有 eslintrc.js ）

1
2
3

"rules": {
  "vue/no-unused-components": "off"
}

clone object 三种

1
2
3
4
5
6
7

let a = {a:1,b:{c:{d:2}}}

{...a}

Object.assign({},a)

JSON.parse(JSON.stringify(food))

via https://www.samanthaming.com/tidbits/70-3-ways-to-clone-objects/

padStart

1
2
3
4
5
6
7
8
9
10

const purchase = [
  ['Masks', '9.99'],
  ['Shirt', '20.00'],
  ['Jacket', '200.00'],
  ['Gloves', '10.00'],
];

purchase.forEach(([item, price]) => {
  console.log(item + price.padStart(20 - item.length));
});

两头对齐

1
2
3
4

Masks           9.99
Shirt          20.00
Jacket        200.00
Gloves         10.00

1
2
3
4
5

const bankNumber = '2222 2222 2222 2222';
const last4Digits = bankNumber.slice(-4);

last4Digits.padStart(bankNumber.length, '*');
// ***************2222

类似滴：

• trimStart(trimLeft) 去除前空格
• trimEnd(trimRight) 去除后空格
• trim() 去除前后空格

shadow copy

• spread operator {…} […]
• array slice
• Object.assign
• Array.from

deep copy

deep copy (or deep clone): lodash _.cloneDeep, Ramda, a custom function, JSON.parse() / JSON.stringify(), and rfdc

For the best performance, the library rfdc (Really Fast Deep Clone) will deep copy about 400% faster than lodash’s _.cloneDeep

https://medium.com/javascript-in-plain-english/how-to-deep-copy-objects-and-arrays-in-javascript-7c911359b089

const a = new Object();

对象字面量

const a = {};

属性增强写法

es5

const a = '123' const obj = { a:a }

es6

const a = '123' const obj = { a } // 属性从同名变量找

函数增强写法

es5

`
const a = {
a:function(){

}
}
`

es6

`
const a = {
a(){

}
}
`

字符串模版

const skill = '安邦' const david =文能${skill}

ES6对象键计算表达式

`
var heat = ‘50%’;
var field = ‘Rock and Roll’;
var music = {

}
console.log(music); // Object {rock and roll: “50%”}
`

对象解构

let music = { type: 'rock', heat: '50%' }; let { type, heat } = music; console.log(type, heat); // rock 50%

对象解构 重命名

let music = { type: 'rock', heat: '50%' } let { type: aaa, heat: bbb } = music; console.log(aaa, bbb); // rock 50%

数组解构

let people = [20, 25, 30] let [young, oldYoung] = people; console.log(young, oldYoung) // 20 25