【大屏】3D炫酷效果地图，提供一个demo给UI做底图

demo

代码

1. 中国边界坐标：DistrictSearch获取

2. 3D效果描边：AMap.Polyline

3. 中国地图：AMap.DistrictLayer.Province

4. or 只显示目标地图：new AMap.Map(‘container’, { mask: mark});

<script src="https://webapi.amap.com/maps?v=1.4.15&key=【你的key】&plugin=Map3D,AMap.DistrictSearch,AMap.ControlBar,AMap.DistrictLayer"></script>
// 需要中国边界坐标：DistrictSearch获取
var areas = [
    {name: '中国', path: []},
    {name: '湖南省', path: []},
];
function setPathBoundaries() {
    var opts = {
        subdistrict: 0,
        extensions: 'all',
        level: 'city'
    };
    var district = new AMap.DistrictSearch(opts);
    areas.forEach((area,index)=>{
    // 异步加载处理
        new Promise((resolve, reject) => {
            district.search(area.name, function (status, result) {
                if (status === 'complete') {
                    area.path = result.districtList[0].boundaries;
                    console.log(1);
                    resolve('complete');
                } else {
                    reject('error');
                }
            })
        }).then(()=>{
            console.log(index);
            if (index === (areas.length-1)) {
                onloadIndexScript();
            }
        })
    });
}
function onloadIndexScript() {
    var oBody = document.getElementsByTagName('body')[0]; // 在head标签中创建创建script
    var oScript = document.createElement("script");
    oScript.type = "text/javascript";
    oScript.src = "js/index.js";
    oBody.appendChild(oScript);
}
setPathBoundaries();
// 3D效果描边：AMap.Polyline
function renderAreaPath() {
    areas.forEach((area, index) => {
        let bounds = area.path;
        let polyline = {
            strokeWeight: 2,
            map: map,
            path: bounds[0],
            strokeColor: 'rgba(255,255,59,1)',
        };
        let wallOption = {
            path: bounds,
            height: 100000,
            color: 'rgba(255,255,59,1)'
        };
        if (index === 0) {
            polyline.strokeColor = '#fff';
            polyline.strokeWeight = 8;
            wallOption.color = '#00daff';
            wallOption.height = -70000;
        }
        //添加高度面
        let wall = new AMap.Object3D.Wall(wallOption);
        wall.transparent = true;
        wall.backOrFront = 'both';
        object3Dlayer.add(wall);
        //添加描边
        new AMap.Polyline(polyline);
    })
}

// 中国地图：AMap.DistrictLayer.Province
    let disCountry = new AMap.DistrictLayer.Province({
        zIndex:3,
        adcode:['320000'],
        depth:1,
        opacity: 1,
        styles:{
            'nation-stroke':'rgba(122,255,255,1)',
            'fill':function(props){
                return 'rgba(1, 49, 62,.1)'
            }
        }
    });
 

// or 只显示目标地图：new AMap.Map('container', {   mask: mark});
    let mark = areas[0].path;
   map = new AMap.Map('container', {
        viewMode: '3D',
        layers: [
            disCountry,
            new AMap.TileLayer.Satellite({
                zIndex: 2,
                visible: true,
                opacity: 1,
            }),
            new AMap.TileLayer.RoadNet({
                zIndex: 3,
                visible: true,
                opacity: 1,
            }),
        ],
        center: [118.012531, 34.338888],
        zoom: 11,
        disableSocket: true,
        labelzIndex: 111,
        rotation: -90,
        pitch: 40,
        maxPitch: 90,
        mask: mark,
        mapStyle: 'amap://styles/fd5e439ef641d98831a0deb8b16fff96',
        AmbientLight: new AMap.Lights.AmbientLight([56, 117, 255], 0.5),
        DirectionLight: new AMap.Lights.DirectionLight([1, -1, -1], [56, 117, 255], 1),
    });