mapbox添加自定义控件

需要定义一个类，然后至少重写实现onAdd、onRemove方法，示例如下

<template>
  <div ref="changeViewRef" @click="changeView" class="changeView mapboxgl-ctrl">
    <el-tooltip
      class="box-item"
      effect="dark"
      :content="`${mapStore.mode}视图`"
      placement="left"
    >
      <el-icon><Refresh /></el-icon>
    </el-tooltip>
  </div>
</template>

<script setup>
import G from "@/config";
import useMapStore from "@/store/modules/map";
const mapStore = useMapStore();
const changeViewRef = ref();
onMounted(() => {
  G.map.addControl(new MyCustomControl(changeViewRef.value), "bottom-right");
});
const changeView = () => {
  if (mapStore.mode == "2D") {
    G.map.setProjection("globe");
    mapStore.mode = "3D";
  } else {
    G.map.setProjection("mercator");
    mapStore.mode = "2D";
  }
};
class MyCustomControl {
  constructor(ref) {
    this.container = ref;
  }
  onAdd() {
    return this.container;
  }
  onRemove() {
    this.container.parentNode.removeChild(this.container);
  }
}
</script>

<style lang="scss" scoped>
.changeView {
  width: 29px;
  height: 29px;
  padding: 5px;
  border-radius: 4px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.changeView:hover {
  opacity: 0.8;
}
</style>

箴言：因为这些东西是非常简单的。不要抱怨自己学不会，那是因为你没有足够用心。