自定义画布上方的 Mapbox 测量工具

如何解决自定义画布上方的 Mapbox 测量工具

我正在使用 mapBox 构建自定义地图。

我有一个放置在地图上方的自定义画布：

mapBoxgl.accesstoken = '......';
let map = new mapBoxgl.Map({
    container: 'map',// container id
    style: 'mapBox://styles/mapBox/streets-v11',center: [0,0],zoom: 13,minZoom: 10,maxZoom: 15
});

let bBox = document.body.getBoundingClientRect();
let container = map.getCanvasContainer()
let canvas = d3.select(container).append("canvas").node()

canvas.width = bBox.width;
canvas.height = bBox.height;
let ctx = canvas.getContext('2d');

我的所有标记都被绘制到 ctx 对象上。

现在我添加了从地图框示例中测量距离的功能：
https://docs.mapbox.com/mapbox-gl-js/example/measure/

用于测量的图层添加到地图的加载事件中：

var geojson = {
    'type': 'FeatureCollection','features': []
};
 
var linestring = {
    'type': 'Feature','geometry': { 'type': 'Linestring','coordinates': [] }
};

map.addSource('geojson',{
    'type': 'geojson','data': geojson
});

// Add styles to the map
map.addLayer({
    id: 'measure-points',type: 'circle',source: 'geojson',paint: { 'circle-radius': 5,'circle-color': '#000' },filter: ['in','$type','Point']
});
map.addLayer({
    id: 'measure-lines',type: 'line',layout: { 'line-cap': 'round','line-join': 'round' },paint: { 'line-color': '#000','line-width': 2.5 },'Linestring']
});

一切都很好，但我想在我的自定义画布上方有测量层。我该怎么做？
检查 html 显示我的自定义画布已添加到地图上方的 DOM，但看不到新的 2 个测量层。