立面体——Polygon

使用AMap.Polygon,支持单多边形立面体，带孔多边形立面体，多个带孔多边形立面体。

源代码编辑器
<!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">
    <style>
        html,
        body,
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
    <title>立面体图层</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demos/Facades.js"></script>

</head>

<body>
    <div id="container"></div>
    <div class="input-card" style="width: 120px">
        <button class="btn" onclick="creatpoly()" style="margin-bottom: 5px">创建立面体</button>
        <button class="btn" onclick="despoly()">销毁立面体</button>
    </div>
    <script type="text/javascript">
        var map = new AMap.Map("container", {
            zoom: 11.14,
            viewMode: '3D',
            pitch: 45,
            mapStyle: 'amap://styles/grey',
            center: [120.109233, 30.246411],
            showBuildingBlock: false,
            showLabel: false,

        });
        var colors = ['#FFF8B4', '#D3F299', '#9FE084', '#5ACA70', '#00AF53', '#00873A', '#006B31', '#004835', '#003829'].reverse();
        function topColor(index, feature) {
            var v = feature.properties.health * 100;
            return v < 40 ? colors[8] :
                v < 50 ? colors[7] :
                    v < 55 ? colors[6] :
                        v < 60 ? colors[5] :
                            v < 65 ? colors[4] :
                                v < 70 ? colors[3] :
                                    v < 75 ? colors[2] :
                                        v < 80 ? colors[1] :
                                            v < 100 ? colors[0] : 'green';
        }

        function sideTopColor(index, feature) {
            var v = feature.properties.health * 100;
            //var v = feature.properties.h * 4;
            return v < 4 ? colors[8] :
                v < 50 ? colors[7] :
                    v < 55 ? colors[6] :
                        v < 60 ? colors[5] :
                            v < 65 ? colors[4] :
                                v < 70 ? colors[3] :
                                    v < 75 ? colors[2] :
                                        v < 80 ? colors[1] :
                                            v < 100 ? colors[0] : 'green';
        }
        function sideBottomColor(index, feature) {
            var v = feature.properties.health * 100;
            //var v = feature.properties.h * 4;
            return v < 40 ? colors[8] :
                v < 50 ? colors[7] :
                    v < 55 ? colors[6] :
                        v < 60 ? colors[5] :
                            v < 65 ? colors[4] :
                                v < 70 ? colors[3] :
                                    v < 75 ? colors[2] :
                                        v < 80 ? colors[1] :
                                            v < 100 ? colors[0] : 'green';
        }
        function getHeight(index, feature) {
            var v = feature.properties.health * 100;
            var height = [1000, 2000, 4000, 6000, 8000, 10000, 12000, 14000, 16000];
            return v < 40 ? height[8] :
                v < 50 ? height[7] :
                    v < 55 ? height[6] :
                        v < 60 ? height[5] :
                            v < 65 ? height[4] :
                                v < 70 ? height[3] :
                                    v < 75 ? height[2] :
                                        v < 80 ? height[1] :
                                            v < 100 ? height[0] : 0;
        }

        var text = new AMap.Text({
            text: '纯文本标记',
            anchor: 'center', // 设置文本标记锚点
            draggable: true,
            cursor: 'pointer',
            angle: 0,
            visible: false,
            offset: [0, -25],
            style: {
                'padding': '5px 10px',
                'margin-bottom': '1rem',
                'border-radius': '.25rem',
                'background-color': 'rgba(0,0,0,0.5)',
                // 'width': '12rem',
                'border-width': 0,
                'box-shadow': '0 2px 6px 0 rgba(255, 255, 255, .3)',
                'text-align': 'center',
                'font-size': '16px',
                'color': '#fff',
            },
        });
        text.setMap(map);
        var geojsonlmt = geojsonLMT;
        var polygon_list = geojsonlmt.features;
        var listpoly = [];
        var vectorLayer = new AMap.VectorLayer();
        map.add(vectorLayer);
        function creatpoly() {
            if (geojsonlmt) {
                if (polygon_list && polygon_list.length > 0) {
                    for (var item of polygon_list) {
                        var roofColor = sideTopColor(1, item);
                        var wallColor = sideBottomColor(1, item);
                        var high = getHeight(1, item);
                        let polyphy = new AMap.Polygon({
                            path: item.geometry.coordinates,
                            extrusionHeight: high,
                            roofColor: roofColor,
                            wallColor: wallColor,
                            //bubble: true,
                            //draggable: true,
                            zIndex: 50,
                            extData: item,

                        })

                        polyphy.on('mousemove', (event) => {
                            text.show();
                            var pickItem = polyphy.getOptions().extData;
                            var health = pickItem.properties.health;
                            var v = pickItem.properties.health * 100;
                            text.setText(pickItem.properties.name + ' 健康度：' + parseInt(health * 100) + ' %');
                            text.setPosition(event.lnglat);
                            for (var curpoly of listpoly) {
                                if (curpoly === polyphy) {
                                    polyphy.setOptions({
                                        roofColor: [164, 241, 199, 0.5],
                                        wallColor: [164, 241, 199, 0.5],

                                    })
                                } else {
                                    curpoly.setOptions({
                                        roofColor: topColor(1, curpoly.getOptions().extData),
                                        wallColor: sideTopColor(1, curpoly.getOptions().extData),

                                    })

                                }
                            }

                        })
                        //map.add(polyphy);
                        vectorLayer.add(polyphy);
                        listpoly.push(polyphy);
                    }
                }

            }
        }

        function despoly() {
            text.hide();
            if (listpoly && listpoly.length > 0) {

                for (var i = 0; i < listpoly.length; i++) {
                    var curpoly = listpoly[i];
                    curpoly.destroy();
                    delete curpoly;
                    curpoly = null;
                }
                delete listpoly;
                listpoly = [];
            }

            if (map) {
                var layers = map.getLayers();
                if (layers && layers.length > 0) {
                    for (var layer of layers) {
                        if (layer.CLASS_NAME === "AMap.VectorLayer") {
                            layer.destroy();
                        }
                    }
                }
            }
        }
        creatpoly();
    </script>
</body>

</html>
控制台
清空
返回顶部示例中心常见问题智能客服