卫星图+掩模

组合使用简易行政区图-世界、卫星图、以及掩模功能，实现了只显示每个区域的地形图的效果。

源代码编辑器

复制

运行

还原

          <!DOCTYPE HTML>
<html>
<head>
    <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>掩模</title>
    <style>
    html,body,#container{
        margin:0;
        height:100%;
        background-color:rgb(216, 238,250) !important
    }
    </style>
</head>

<body onLoad="">
    <div id="container"></div>

    <script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=Map3D,AMap.DistrictLayer,AMap.DistrictSearch"></script> 
    <script language="javascript">
        var opts = {
            subdistrict: 0,   //返回下一级行政区
            extensions: 'all',  //返回行政区边界坐标组等具体信息
        };
        //实例化DistrictSearch
        district = new AMap.DistrictSearch(opts);
        district.search('中国', function(status, result) {
            var bounds = result.districtList[0].boundaries;
            var mask = []
            for(var i =0;i<bounds.length;i+=1){
                mask.push([bounds[i]])
            }
            var disCountry = new AMap.DistrictLayer.World({
                zIndex:0,
                rejectMapMask:true
            })
            var object3Dlayer = new AMap.Object3DLayer({zIndex:1});
            map = new AMap.Map('container', {
                mask:mask,
                center:[116.472804,39.995725],
                
                viewMode:'3D',
                labelzIndex:130,
                zoom:3,
                cursor:'pointer',
                layers:[
                    new AMap.TileLayer.RoadNet({
                        zIndex:7
                    }),
                    disCountry,
                    object3Dlayer,
                    new AMap.TileLayer.Satellite()
                ]
            });
            var height = -5000;
            var color = '#0088ffcc';//rgba
            var prism = new AMap.Object3D.Wall({
                path:bounds,
                height:height,
                color:color
            });
            prism.transparent = true
            object3Dlayer.add(prism)
        })
    </script>
</body>
</html>
        

控制台

清空

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