vue3里面高德地图绘制3D图形

1.引入及调用请看链接
2.代码

<script>
import AMap from 'AMap'
export default {
    setup() {
        // 状态管理
        const state = reactive({
            map:null,
        });
        /**
        * 模块名:高德地图引入
        * 代码描述:
        * 作者:Fant
        * 创建时间:2022/09/06 09:37:21
        */
        const gaode = () => {
            //创建地图实例
            state.map = new AMap.Map("map",{
                viewMode: '3D', // 开启 3D 模式
                pitch: 55,
                rotation: 35,
                center: [114.28614903900908,30.599477012683337],//默认武汉市江岸区
                features: ['bg', 'road'],
                zoom: 15
            });

            var styleName = "amap://styles/" + "normal";//底部颜色
            state.map.setMapStyle(styleName); //地图样式颜色
            
            //----------------------以下是定义3d图形的代码---------------------------
            // 添加 Object3DLayer 图层，用于添加 3DObject 对象
            var object3Dlayer = new AMap.Object3DLayer();
            state.map.add(object3Dlayer);

            // 以不规则棱柱体 Prism 为例，添加至 3DObjectLayer 图层中,定义3d图层的形状 就是四个点位 用来绘制3d柱体
            var paths = [
                [114.28614903900908,30.599477012683337],
                [114.28534903900908,30.599527012683337],
                [114.28564903900908,30.592527012683337],
                [114.28234903900908,30.589327012683337],
            ];

            var bounds = paths.map(function(path) {
                return new AMap.LngLat(path[0], path[1]);
            });

            // 创建 Object3D 对象
            var prism = new AMap.Object3D.Prism({
                path: bounds,
                height: 5000, //定义柱子有多高
                color: 'rgba(100, 150, 230, 0.7)' // 支持 #RRGGBB、rgb()、rgba() 格式数据
            });

            // 开启透明度支持
            prism.transparent = true;

            // 添加至 3D 图层
            object3Dlayer.add(prism);
        }
        //------------------------当前模块结束------------------------

        onMounted(() => {
            gaode()
        });

        return {
            ...toRefs(state),
        };
    },
};
</script>

3.如图