Mapbox-gl 绘制控件在 Vue 中不显示

Question

我的问题

你好,

我正在尝试在Vue应用程序中使用Mapbox-gl Draw。我已经在用Mapbox-gl了，它工作得很好。

当我尝试使用Mapbox-gl绘制时，显示控件容器，但不显示控件图标。

我正在以建议的方式导入Draw:

import MapboxDraw from "@mapbox/mapbox-gl-draw";
let draw = new MapboxDraw();
map.addControl(draw)

当触发映射事件map-load时调用此代码。放大/缩小和北方重置控件正常显示，但绘制控件没有。

我在找什么

我猜这与Mapbox-gl不与Vue超级兼容有关，但我可能错了。我在StackOverflow或Mapbox-gl Draw问题中没有发现类似的问题，但我不能是唯一一个遇到这种情况的人。也许我是?

如果有人能帮我让这些图标出现，或者甚至用非地图框图标代替它们，那就太好了!

谢谢你，祝你有美好的一天

Answer 1

是否在导入中添加了mapbox-gl-draw.css ?

进口"@mapbox mapbox-gl-draw/dist/mapbox-gl-draw.css";

Answer 2

现在，我在创建控件容器后直接修改它:

document.querySelectorAll(".mapboxgl-ctrl-group").forEach(a => {
let children = a.children;
children.forEach(e => {
let title = e.getAttribute("title");
if (title == "LineString tool (l)") {
e.innerText = "L";
}
if (title == "Polygon tool (p)") {
e.innerText = "P";
}
if (title == "Marker tool (m)") {
e.innerText = "M";
}
if (title == "Delete") {
e.innerText = "🗑️";
}
if (title == "Combine") {
e.innerText = " 🔒";
}
if (title == "Uncombine") {
e.innerText = " 🔓";
}
});
});

但这真的很残酷，所以我仍然对不那么暴力的解决方案感兴趣。