0%

Posted on

一个完整的版本

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);

Posted on

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"]
],

Posted on

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");

Posted on

简单说，就是允许碰撞

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)

Posted on

最大化

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

全屏

ctrl+command+f

Posted on 
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')

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

关掉 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

Posted on

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 = { [field.toLowerCase()]: heat } 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