漏刻有时百度地图API实战开发(12)(切片工具的使用、添加自定义图层TileLayer)

漏刻有时

已于 2023-12-16 14:40:14 修改

阅读量567

点赞数 5

分类专栏：地图开发文章标签：百度

于 2023-12-16 14:38:53 首次发布

LOCKDATAV出品，为避免断章取义走弯路，请注意环境配置和时间。

本文链接：https://blog.csdn.net/weixin_41290949/article/details/134100126

版权

地图开发专栏收录该内容

143 篇文章 28 订阅

订阅专栏

在这里插入图片描述

TileLayer向地图中添加自定义图层

    var tileLayer = new BMap.TileLayer();
    tileLayer.getTilesUrl = function (tileCoord, zoom) {
        var x = tileCoord.x;
        var y = tileCoord.y;
        return 'images/tiles/' + zoom + '/tile-' + x + '_' + y + '.png';
    }
    var lockMap = new BMap.MapType('lock_map', tileLayer, {minZoom: 11, maxZoom: 17});
    var map = new BMap.Map('lock_map', {mapType: lockMap});
    map.centerAndZoom(new BMap.Point(121.554542541504, 29.813684463501), 13);
    map.enableScrollWheelZoom();

    //添加缩放控件
    var ctrlNav = new window.BMap.NavigationControl({
        anchor: BMAP_ANCHOR_TOP_LEFT,
        type: BMAP_NAVIGATION_CONTROL_LARGE
    });
    map.addControl(ctrlNav);

    //加载标注
    getMarker(markerArr, 0);

PC端限制显示范围

引入AreaRestriction_min.js库

    <script type="text/javascript" src="//api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>

设置可视视野范围

   //设置可视视野范围
    var b = new BMap.Bounds(
        new BMap.Point(121.2790142755745, 29.675582699353967),
        new BMap.Point(121.83093318072264, 29.945334949391032)
    );
    try {
        BMapLib.AreaRestriction.setBounds(map, b); // 以map为中心，已b为范围的地图
    } catch (e) {
        alert(e);
    }

移动端限制显示范围

  //设置可视视野范围
    var b = new BMap.Bounds(
        new BMap.Point(121.27872681781139, 29.67671237469328),
        new BMap.Point(121.83035826519644, 29.948214015429013)
    ); // 范围 左下角，右上角的点位置

    map.addEventListener("dragend", function (type, target) {
        //console.log(b.containsBounds(map.getBounds()));
        if (b.containsBounds(map.getBounds())) {
            //map.panTo(new BMap.Point(114.18882611986866, 36.475437590543926), 4);
        } else {
            map.panTo(pointCenter, 13);
        }
    });

自适应PC端和移动端

//设置可视视野范围
    var b = new BMap.Bounds(
        new BMap.Point(121.2790142755745, 29.675582699353967),
        new BMap.Point(121.83093318072264, 29.945334949391032)
    );
    
    var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
    // alert(isMobile);
    if (isMobile) {//手机端
        map.addEventListener("dragend", function (type, target) {
            //console.log(b.containsBounds(map.getBounds()));
            if (b.containsBounds(map.getBounds())) {
                //map.panTo(new BMap.Point(114.18882611986866, 36.475437590543926), 4);
            } else {
                map.panTo(pointCenter, 13);
            }
        });
    } else {//PC端
        try {
            BMapLib.AreaRestriction.setBounds(map, b); // 以map为中心，已b为范围的地图
        } catch (e) {
            alert(e);
        }
    }