mapbox 实现气泡牵引线

mapbox只提供简单的气泡样式，如果想要最一些美化处理，需要自己进行二次创作

原理： mapox的popup支持html字符串，这就为我们做自定义优化提供了基础

关键：使用svg绘制牵引线

关键代码：

创建popup

new mapboxgl.Popup({
  maxWidth:'600px',
  anchor: 'bottom',
  closeOnClick:false,
  closeButton:false,
  offset: [0, -210]
})

'<table border="0" cellpadding="0" cellspacing="0">'+
  '<tr>'+
  '<td style="border:none;width:150px">'+

  '</td>'+
  '<td style="border:none;width:100px">'+

  '</td>' +
  '<td style="border:none;width:50px">' +
    '<div style="display:inline-block;width:50px;height:200px">'+
    '<svg xmlns="http://www.csnd.org/2000/svg" version="1.1" height="200" width="50">'+
    '<polyline points="0,200 25,100 50,100" style="fill:none;stroke:#49cbad;stroke-width:2px;"/>'+
    //  '<path d="M0 200 L80 50 L100 50 Z"  />'+
    '</svg>'+
    '</div>' +
  '</td>'+
  '<td style="border:none;width:200px">' +
  '<div style="text-align: left;vertical-align: top;display:inline-block;">' +
    '<div class="popConStyle">' +
    item.html +
    '</div>' +
  '</div>' +
  '</td>'+
  '</tr>'+
  '</table>'

pop.setLngLat([po.lgtd,po.lttd])
  .setHTML(this.getPopup(po))
this.popups.push(pop)
pop.addTo(this.map);

效果：

svg 右x轴方向  下y轴方向