遮罩

通过给地图添加一个无限大的带洞多边形，实现遮罩效果，即只显示某个区域的地图

源代码编辑器

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>地图遮罩</title>
    <style>
    html,
    body,
    #container {
        margin:0;
        height: 100%;
    }
    </style>
</head>
<body>
<div id="container"></div>
<script src="http://webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=AMap.DistrictSearch"></script>
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 8,
        center:[116.44923,40.207714],
        layers:[
            new AMap.TileLayer.RoadNet({
                zIndex:20
            }),
            new AMap.TileLayer({
                zIndex:6,
                opacity:1,
                getTileUrl:'https://t{1,2,3,4}.tianditu.gov.cn/DataServer?T=ter_w&x=[x]&y=[y]&l=[z]'
                })]
    });
    new AMap.DistrictSearch({
        extensions:'all',
        subdistrict:0
    }).search('北京市',function(status,result){
        // 外多边形坐标数组和内多边形坐标数组
        var outer = [
            new AMap.LngLat(-360,90,true),
            new AMap.LngLat(-360,-90,true),
            new AMap.LngLat(360,-90,true),
            new AMap.LngLat(360,90,true),
        ];
        var holes = result.districtList[0].boundaries

        var pathArray = [
            outer
        ];
        pathArray.push.apply(pathArray,holes)
        var polygon = new AMap.Polygon( {
            pathL:pathArray,
            strokeColor: '#00eeff',
            strokeWeight: 1,
            fillColor: '#71B3ff',
            fillOpacity: 0.5
        });
        polygon.setPath(pathArray);
        map.add(polygon)
    })
    
</script>
</body>
</html>

控制台

清空

示例
中心常见
问题智能
客服