vue3-mapboxgl-antv-L7开发（二）控件的添加

---

地图中有许多的控件方便用户对地图进行操作。

一、常见的控件都有哪些？

1、mapbox中的控件

（1）、AttributionControl（属性控件）

这个控件可以添加自定义的文字属性到地图中，默认显示在地图的右下方。
customAttribution配置属性：可以是一个字符串或者字符串数组。
options.customAttribution
(string | Array)?

（2）、FullscreenControl（全屏控件）

（3）、GeolocateControl（定位控件）

（4）、NavigationControl（导航栏控件）

（5）、ScaleControl（比例尺控件）

（6）、添加控件的方法(控件的配置属性具体查阅官网 https://docs.mapbox.com/mapbox-gl-js/api/markers/)

//先引入
import {FullscreenControl}  from 'mapbox-gl'
const control = new FullscreenControl();
map.addControl(control,"bottom-right");

（2）、antv-l7控件

（1）、多了一个MapTheme 地图主题控件

MapTheme 会根据当前地图底图类型（如 Mapbox、GaodeMapV2），默认展示相对应的默认主题选项，用于也可以传入自定义的主题选项

import { Scene, MapTheme } from '@antv/l7';

const scene = new Scene({
  // ...
});

scene.on('loaded', () => {
  const mapTheme = new MapTheme({});
  scene.addControl(mapTheme);
});

二、如何使用

1、创建一个MapControl组件

代码如下（示例）：

<script setup>
import { Zoom, Scale, MapTheme, Fullscreen } from '@antv/l7';
import {AttributionControl} from 'mapbox-gl';
//添加常用控件
import { inject, onMounted } from 'vue';
const { map, scene } = inject('$scene_map');
const mapTheme = new MapTheme({
    position: 'righttop'
});//地图样式控件
const zoom = new Zoom({
    position: 'topright'
});//缩放控件
const scale = new Scale({
    position: 'leftbottom'
});//比例尺控件
const fullscreen = new Fullscreen({
    position: 'righttop'
});//全屏控件
const attrControl = new AttributionControl({
    customAttribution: 'hpu-ycc'
});
const addControl = () => {
    scene.addControl(fullscreen);
    scene.addControl(mapTheme);
    scene.addControl(zoom);
    scene.addControl(scale);
    map.addControl(attrControl);

    //地图样式发生改变时的回调函数
    mapTheme.on('selectChange', (e) => {
        console.log('地图样式发生了改变');
        console.log(e);
        if(e != "mapbox://styles/zcxduo/ck241p6413s0b1cpayzldv7x7"){
            map.setProjection('albers');
        }else{
            map.setProjection('globe')
        }
    })
}
onMounted(() => {
    addControl();

})
</script>

<style >
.l7-control-scale .l7-control-scale-line {
    width: 60px !important;
}
</style>

2、出现的问题

比例尺组件会随这缩放宽度发生变化。
解决方案：在调试下找到这个标签的类名，单独设置样式。
代码如下（示例）：

<style >
.l7-control-scale .l7-control-scale-line {
    width: 60px !important;
}
</style>