0%

mapbox expression

Posted on 
1
2
3
4
5
6
'fill-color': ['interpolate-hcl', ['linear'], ['feature-state', 'population'], 0, 'red', 1e6, 'blue']


for (const district of districts) {
  map.setFeatureState({ source: 'mysource', sourceLayer: 'mysourcelayer', id: district.id }, { population: district.population});
}
1
2
3
4
5
6
'fill-color': ['match', ['get', 'id'],
  1020, 'red',
  1033, 'green',
  1038, 'red',
  1049, 'white',
  // ...
1
2
3
4
5
6
7
8
"icon-image": [
  "case",
  ["all", ["==", ["get", "matched"], "True"], ["!=", ["get", "vehicle"], ["get", "standstill_vehicle"]]],
  "orangemarker",
  ["==", ["get", "matched"], "True"],
  "greenmarker",
  "redmarker",
]
1
2
3
4
5
this.map.setPaintProperty("somelayer", "fill-color",
    ["case",
        ["==",  ["get", "some_prop"], someval], "#34c0dd",
         "#499bbc"
    ]);
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
const layers = [{
  id: 'countries',
  type: 'fill',
  source: 'countries',
  paint: {
    'fill-color': [
      'match', ['get', 'filter_prop', ['global']],
      'pop_est',
      ['step', ['get', 'pop_est'],
        0, '#f8d5cc',
        1000000, '#f4bfb6',
        5000000, '#f1a8a5',
        10000000, '#ee8f9a',
        50000000, '#ec739b',
        100000000, '#dd5ca8',
        250000000, '#c44cc0',
        500000000, '#9f43d7',
        1000000000, '#6e40e6',
      ],
      'gdp_md_est',
      ['step', ['get', 'gdp_md_est'],
        0, '#f8d5cc',
        1000, '#f4bfb6',
        5000, '#f1a8a5',
        10000, '#ee8f9a',
        50000, '#ec739b',
        100000, '#dd5ca8',
        250000, '#c44cc0',
        5000000, '#9f43d7',
        10000000, '#6e40e6',
      ],
      '#ffffff',
    ],
  },
}];

以下这个未测试！

1
2
3
4
5
6
['step', ['zoom'],
['case', ['all', ['!', ['feature-state', 'hidden']], ['get', 'red'], 1, 0],
10,
['case', ['all', ['!', ['feature-state', 'hidden']], ['any', ['get', 'red'], ['get', 'green']], 1, 0],
15,
['case', [['!', ['feature-state', 'hidden']], 1, 0]],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
map.addLayer({
  id: "cluster-count",
  type: "symbol",
  source: "grundbuch",
  filter: ["has", "point_count"],
  layout: {
    "text-field": "{point_count_abbreviated}",
    "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
    "text-size": 12
  },
  paint: {
    "text-color": "#ffffff"
  }
});

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

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”,

}
]
}