mapbox绘制实践

1、new mapboxgl.Popup 的两种绘制方式

let popup = new mapboxgl.Popup({ closeOnClick: false, closeButton: false })
  .setDOMContent(document.createElement('div'))
  .setOffset([0, -20]);

export const addPop = (lnglat, map, data) => {
  popup.setLngLat(lnglat).addTo(map);
  const element = React.createElement(() => Component({ data }));
  ReactDOM.render(element, popup.getElement());
  return {
    clear: () => popup?.remove(),
  };
};

const popup = new mapboxgl.Popup({
        closeButton: true,
        closeOnClick: true,
      });
popup
.setLngLat([Number(coordinates[0]), Number(coordinates[1])])
.setHTML('<div>abc</div>')
.addTo(map);

2、mapbox画虚线

map.addLayer({
    id: 'id',
    type: 'line',
    source: {
       type: 'geojson',
       data: data,
    },
    layout: {
       'line-miter-limit': 2,
       'line-join': 'miter',
    },
    paint: {
        'line-color': ['get', 'color'],
        'line-width': 1,
        'line-dasharray': [2, 2], //画虚线
     },
});

3、实践踩坑

不支持rgba设置透明度，支持line-opacity设置整个图层透明度。

同一图层不能同时支持，实线 和 虚线

map.setPaintProperty('图层ID','key','value') 

 4、题外话

k8s新司用的这个开源部署网站平台，刚来时一直听说这个，但是直到现在为了配置nginx才正正经经地百度了下什么是k8s Kubernetes

前司一直用的自研的平台，内核是啥，也没关注过。也算是长了见识了。