《Leaflet 基础知识点》- 天地图添加、删除和透明度设置

最新推荐文章于 2024-09-24 10:47:04 发布

AvatarGiser

最新推荐文章于 2024-09-24 10:47:04 发布

阅读量3.3k

点赞数 2

分类专栏： Leaflet 基础知识点文章标签： leaflet

本文链接：https://blog.csdn.net/sinat_31213021/article/details/114581664

版权

Leaflet 基础知识点专栏收录该内容

21 篇文章 38 订阅

订阅专栏

一. 地图容器初始化

let map = L.map('map', {
    //参考坐标系
    crs: L.CRS.EPSG4326,
    // 中心点(这里是武汉)
    center: [30.59, 114.32],
    //最小显示等级
    minZoom: 1,
    //最大显示等级
    maxZoom: 18,
    //当前显示等级
    zoom: 10,
    //不添加属性说明控件
    attributionControl: false,
    //限制显示地理范围
    maxBounds: L.latLngBounds(L.latLng(-180, -180), L.latLng(180, 180)),
});

知识点

1. 第 3 行代码，设置的 crs (坐标参考系) 是 EPSG 43626，默认是 EPSG 3857。

二. 添加

矢量 + 注记

function addLayer() {
    // 矢量图+注记
    let mapTypes = ['vec_c', 'cva_c'];  
    // 天地图 token
    let tdtToken = '你的天地图 token';
    let layers = [];
    for(let i = 0, len = mapTypes.length; i < len; i++) {
        let tdtUrl = `http://t0.tianditu.gov.cn/DataServer?T=${mapTypes[i]}&x={x}&y={y}&l={z}&tk=${tdtToken}`;
        let layer = L.tileLayer(tdtUrl, {
            zoomOffset: 1,// 注意如果是 web 墨卡托投影(EPSG:3857) 请改为 0
            noWrap: true,
            bounds: [[-90, -180], [90, 180]]
        });
        layers.push(layer);
    }
    // LayerGroup 对象
    let tdtLayerGroup = L.layerGroup(layers).addTo(map);
    // 获取地图 id，可用于获取地图对象
    let leafletId = tdtLayerGroup._leaflet_id;
}

效果

影像 + 注记

将第 3 行代码， mapTypes 属性换成如下参数即可

// 影像图+注记
let mapTypes = ['img_c', 'cia_c'];

效果

EPSG 3857 与 4326 差异

1. 天地图地图 API 地址；

2. CRS 坐标参考系为 3857 时使用球面墨卡托(Web墨卡托)投影 _w 后缀，为 4326 时使用经纬度(地理)投影 _c 后缀；

3. 注意第 10 行代码，CRS 坐标参考系为 3857 时属性 zoomOffset为 0，4326 时为 1；

对比效果如下，4326 比 3857 更匾一点。具体原因不再此说明了

三. 删除

小技巧：这里多了一步，真正的项目开发中，用 leafletId 获取地图对象，可节约内存。

function removeLayer() {
    // 通过 id 获取地图对象
    let tdtLayerGroup = map._layers[leafletId];
    map.removeLayer(layer);
}

四. 透明度

function setLayerAlpha(num) {
    // 模型对象
    let tdtLayerGroup = map._layers[leafletId];
    // 图层列表
    let layerVals = Object.values(tdtLayerGroup._layers);
    // 循环设置透明度
    layerVals.forEach((layer) => {
        layer.setOpacity(num);
    });
}