《Leaflet 基础知识点》- 原生控件 - 缩放控件、属性控件、图层控件、比例尺控件

官网 写此文章时，使用的 1.7.1 

一、缩放控件

Control.Zoom   option.zoomcontrol

在初始化 L.map 时，默认显示 true。效果在 属性控件 中有。

二、属性控件

Control.Attribution   option.attributioncontrol

在初始化 L.map 时，默认显示 true。 

三、图层控件

Control.Layers

示例中使用天地图矢量和影像切换，先创建天地图对象，将天地图矢量作为底图。

// 创建天地图基础组
function createTdtLayerGroup(layerTypes) {
    // 天地图 token
    let tdtToken = '你的天地图token'
    // 图层组
    let layers = [];
    layerTypes.forEach(layerType => {
        let tdtUrl = `http://t0.tianditu.gov.cn/DataServer?T=${layerType}_c&x={x}&y={y}&l={z}&tk=${tdtToken}`;
        let layer = L.tileLayer(tdtUrl, {
            zoomOffset: 1,
            noWrap: true,
            bounds: [[-90, -180], [90, 180]]
        });
        layers.push(layer);
    });
    return L.layerGroup(layers);
}
 // 矢量天地图
let vecTdtLayer = createTdtLayerGroup(['vec' , 'cva']);
// 影像天地图
let imgTdtLayer = createTdtLayerGroup(['img' , 'cia']);
// 矢量天地图添加为第一个图层
vecTdtLayer.addTo(map);

默认样式，右下角有一个小图标。 

 方式一

只有基础底图的切换（参数一），没有可叠加的地图（参数二）。

// 矢量天地图
let vecTdtLayer = this.createTdtLayerGroup(['vec' , 'cva']);
// 影像天地图
let imgTdtLayer = this.createTdtLayerGroup(['img' , 'cia']);
// 基础图层对象组
let baseLayers = {// 可设置多个，但仅一个可显示，注意界面上是单选按钮
    '矢量图层': vecTdtLayer,
    '影像图层': imgTdtLayer
};
// 可叠加的图层
let overlays = {}
// 添加控件，放在右下角
L.control.layers(baseLayers, overlays, {position: 'bottomright'}).addTo(map);

方式二

 基础底图（参数一），可叠加的地图（参数二）。

// 基础图层对象组
let baseLayers = {// 可设置多个，但仅一个可显示，注意界面上是单选按钮
    '矢量图层': vecTdtLayer    
};
// 可叠加的图层
let overlays = {// 可设置多个，可叠加显示，注意界面上是多选按钮
    '影像图层': imgTdtLayer
}
// 添加控件
L.control.layers(baseLayers, overlays, {position: 'bottomright'}).addTo(map);

四、比例尺控件

Control.Scale

添加

// 1、默认样式（下图左侧）
let scaleCtrl = L.control.scale(option).addTo(map);

// 2、可设置，去除英尺缩放（下图右侧）
let option = {
    metric: true, // 显示米
    imperial: false // 不显示英尺
}
let scaleCtrl = L.control.scale(option).addTo(map);

移除 

scaleCtrl.remove();