【高德地图进阶】--- 3d城市版块之wallAMap.Object3D.Wall 绘制版块添加墙 ** 全部代码展示

在之前的文章描述了如何通过prism绘制3d城市版块,这篇文章将采用另外的方式来实现3d版块的制作

AMap.Object3D.Wall

wall 见名知意,这个api就是绘制墙的, 也可以看做是有高度的线. 属性也很简单 path: 线的坐标 height: 墙的高度 color: 墙的颜色通过wall画3d版块其实就是先通过边界线绘制平面的3d版块,再通过wall把版块抬起来即可

绘制版块

版块绘制之前的文章讲过就不再赘述了,直接上代码

   const opts = {
        subdistrict: 1,
        extensions: "all",
        level: "province",
    };
    const district = new AMap.DistrictSearch(opts);
    district.search("山东省", function (status, result) {
        const bounds = result.districtList[0].boundaries;
        for (let i = 0; i < bounds.length; i += 1) {
            // 绘制版块
            new AMap.Polygon({
                map: map,
                path: bounds[i],
                strokeColor: "#0dcdd1",
                fillColor: "#3D6BB1",
            });
        }
    });

添加墙

3d对象都需要object3Dlayer来存放 ,然后给object3Dlayer指定map对象

        //object3Dlayer可以看做一个容器,用来放多个3d对象
        let object3Dlayer = new AMap.Object3DLayer();
        //把object3Dlayer添加到map对象中
        map.add(object3Dlayer);
        var wall = new AMap.Object3D.Wall({
        	//版块边界线
            path: bounds,
            //墙的高度
            height: 80000,
            //墙的颜色
            color: "#0dcdd1",
        });
        //wall 有两个面,该属性表示哪个面可见,可选值:back ,front ,both表示两面  默认为front
        wall.backOrFront = 'both';
        // 是否允许使用透明颜色
        wall.transparent = true;
		//将wall放到object3Dlayer中
        object3Dlayer.add(wall);

在这里插入图片描述

到此版块和墙都已经绘制完成,但是由上图可以看出版块并没有被wall顶起来.其实只要将wall的高度改为负数,底层地图就被压下去了,视觉上来看就是版块被抬起来的感觉

** 全部代码展示（其中xxxx 高德的秘钥，cccc是高德的key，需要自己申请） **

<!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>map</title>
    <style>
        body,
        html,
        #container {
            margin: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="container"></div>
</body>
<script>
    window._AMapSecurityConfig = {
        securityJsCode: "xxxx",
    };
</script>
<script language="javascript"
    src="https://webapi.amap.com/maps?v=1.4.15&key=cccc&plugin=AMap.DistrictSearch"></script>
<script language="javascript">
    const map = (window.map = new AMap.Map("container", {
        center: [118.035441, 36.323541],
        viewMode: "3D",
        zoom: 7,
        pitch: 50,
        showLabel: false,
    }));

    const opts = {
        subdistrict: 1,
        extensions: "all",
        level: "province",
    };
    const district = new AMap.DistrictSearch(opts);
    district.search("山东省", function (status, result) {
        const bounds = result.districtList[0].boundaries;
        for (let i = 0; i < bounds.length; i += 1) {
            // 绘制版块
            new AMap.Polygon({
                map: map,
                path: bounds[i],
                strokeColor: "#0dcdd1",
                fillColor: "#3D6BB1",
                fillOpacity: 1
            });
        }
        let object3Dlayer = new AMap.Object3DLayer();
        map.add(object3Dlayer);
        var height = -800000;
        var color = "#0dcdd1";
        var wall = new AMap.Object3D.Wall({
            path: bounds,
            height: height,
            color: color,
        });
        //wall 有个面,该属性表示哪个面可见,可选值back ,front  ,both表示两面都填充  默认为front
        wall.backOrFront = 'front';
        // 是否允许使用透明颜色
        wall.transparent = true;
        object3Dlayer.add(wall);
    });
</script>

</html>

在这里插入图片描述