需要定义一个类，然后至少重写实现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>
