0%

1
Array.prototype.push.apply(a, [1,2]))

a.push(1, 2, 3);

1
2
3
4
var arr = [1];
var newItems = [2, 3];
arr.push(...newItems);
console.log(arr);

思路如下(console中有三个数据)

  • 后台请求(adss类型的)物理光缆 wlgl
  • 获得(界面中)铁路数据 railway
  • 计算 railway 和 wlgl 交叉点
  • groupBy 业务光缆,items push 所有点。然后去重为 items2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}

async function demo() {
console.log('Taking a break...');
await sleep(2000);
console.log('Two seconds later, showing sleep in a loop...');

// Sleep in loop
for (let i = 0; i < 5; i++) {
if (i === 3)
await sleep(2000);
console.log(i);
}
}

demo();

via https://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep

layer chnage source

其实是重建

1
2
3
4
5
6
7
8
9
10
11
12
function setLayerSource (layerId, source, sourceLayer) {
const oldLayers = map.getStyle().layers;
const layerIndex = oldLayers.findIndex(l => l.id === layerId);
const layerDef = oldLayers[layerIndex];
const before = oldLayers[layerIndex + 1] && oldLayers[layerIndex + 1].id;
layerDef.source = source;
if (sourceLayer) {
layerDef['source-layer'] = sourceLayer;
}
map.removeLayer(layerId);
map.addLayer(layerDef, before);
}

https://github.com/mapbox/mapbox-gl-js/issues/1722

  • 为对象添加属性
  • 为对象添加方法
  • 浅克隆
  • 合并多个对象
  • 属性指定默认值
1
2
3
4
5
6
7
const DEFAULTS = {
logLevel: 0,
outputFormat: 'html'
};
function processContent(options) {
let options = Object.assign({}, DEFAULTS, options);
}

Object.create()、new Object()和{}的区别

直接字面量创建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var objA = {};
objA.name = 'a';
objA.sayName = function() {
console.log(`My name is ${this.name} !`);
}
// var objA = {
// name: 'a',
// sayName: function() {
// console.log(`My name is ${this.name} !`);
// }
// }
objA.sayName();
console.log(objA.__proto__ === Object.prototype); // true
console.log(objA instanceof Object); // true

new关键字创建

1
2
3
4
5
6
7
8
9
var objB = new Object();
// var objB = Object();
objB.name = 'b';
objB.sayName = function() {
console.log(`My name is ${this.name} !`);
}
objB.sayName();
console.log(objB.__proto__ === Object.prototype); // true
console.log(objB instanceof Object); // true

Object.create 创建

一个完整的版本

https://ouyangresume.github.io/2019/12/19/mapbox%E7%9A%84Popup%E4%B8%8EVue%E6%A1%86%E6%9E%B6%E8%9E%8D%E5%90%88%E4%BD%BF%E7%94%A8/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import StarRating from 'vue-star-rating'

// ...

var starRating = new Vue({
...StarRating,
parent: this,
propsData: { /* pass props here*/ }
}).$mount()

starRating.$on('someEvent', (value) => {
// listen to events emitted from the component
})
var popup = new mapboxgl.Popup()
.setDOMContent(startRating.$el)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import InfoWindowContent from '../InfoWindowContent.vue'

L.popup({maxWidth: 600,
className: 'leaflet-info-window'})
.setLatLng(latlng)
.setContent('<div id="info-window"></div>')
.openOn(this.map)
const InfoWindow = Vue.extend(InfoWindowContent)
const infoWindow = new InfoWindow({
propsData: {
windowData: this.infoWindowData,
windowType: this.infoWindowType
},
store: this.$store
})
infoWindow.$mount("#info-window")
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
// 添加Popup对象
const popup = new mapboxgl.Popup({
anchor: "bottom",
offset: offset || [1, -15],
className: "popup"
});
popup.on("close", function(p) {
if (p && p.target && p.target._vue) {
p.target._vue.$destroy();
}
});
const dom = document.createElement("div");
dom.className = "popup-content-wrapper";

popup.setLngLat(coordinates).setDOMContent(dom).addTo(map);
// 渲染局部Vue组件(mappopupwrapper)
popup._vue = new Vue({
render: h =>
h(MapPopupWrapper, {
props: {
width: "700px",
type: "resource",
target: {
feature
}
}
})
}).$mount(dom);

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');
1
2
3
4
5
6
7
8
"icon-color": [
"case",
["boolean", ["feature-state", "hover"], false],
"#F89806",
["boolean", ["==", ["get", "state"], 0], false],
"#2363F8",
["get", "color"]
],

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