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>

点击查看代码

import MyCustomControl from "@/utils/mapCustomControl";
onMounted(() => {
  map.addControl(new MyCustomControl(DOM), "bottom-right");
});


export default class MyCustomControl {
    constructor(ref, options) {
        this.container = ref;
        this.controlContainer = null;
        this.addClass = options?.defaultClass ?? true;  // 是否添加默认样式mapboxgl-ctrl&mapboxgl-ctrl-group
    }
    getDefaultPosition() {
        const defaultPosition = "top-right";
        return defaultPosition;
    }
    onAdd() {
        if (this.addClass) {
            this.controlContainer = document.createElement("div");
            this.controlContainer.classList.add("mapboxgl-ctrl");
            this.controlContainer.classList.add("mapboxgl-ctrl-group");
            this.controlContainer.appendChild(this.container);
            return this.controlContainer;
        } else {
            return this.container;
        }

    }
    onRemove() {
        if (this.addClass) {
            this.controlContainer.parentNode.removeChild(this.controlContainer);
        } else {
            this.container.parentNode.removeChild(this.container);
        }
    }
}