vue3里面高德地图绘制3D图形_vue 高德三维楼宇，阿里、腾讯、华为、京东等多家大厂最新前端面试题

<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()
        });

下面是我在学习HTML和CSS的时候整理的一些笔记，有兴趣的可以看下：

![HTML、CSS部分截图](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/54e3983b5bbf4706876299e84b88f632~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1772616809&x-signature=g4agbrnPUiPbiExTYzggtb64frc%3D)

### 进阶阶段



进阶阶段，开始攻 JS，对于刚接触 JS 的初学者，确实比学习 HTML 和 CSS 有难度，但是只要肯下功夫，这部分对于你来说，也不是什么大问题。

JS 内容涉及到的知识点较多，看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学，我是不建议的，毕竟刚接触 JS 谁能看得下去，当时我也不能，也没那样做。



我这部分的学习技巧是，增加次数，减少单次看的内容。就是说，第一遍学习 JS 走马观花的看，看个大概，去找视频以及网站学习，不建议直接看书。因为看书看不下去的时候很打击你学下去的信心。

然后通过一些网站的小例子，开始动手敲代码，一定要去实践、实践、实践，这一遍是为了更好的去熟悉 JS 的语法。别只顾着来回的看知识点，眼高手低可不是个好习惯，我在这吃过亏，你懂的。



**1、JavaScript 和 ES6**



在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。



![JavaScript部分截图](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/5a2768a91d8a42a2b0f0c91e016c5afd~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1772616809&x-signature=2zbM4Dec7vY42Bi5V6cfJvQWEP8%3D)



**2、前端框架**

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。



以 Vue 为例，我整理了如下的面试题。



![Vue部分截图](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/7b16fd28c0314c8fbd96eef244a2a265~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg55So5oi3NTc5MjMwMTY3MDI=:q75.awebp?rk3s=f64ab15b&x-expires=1772616809&x-signature=LoeK4YQOWdokelfCh%2B4onQkT%2FZ4%3D)


**开源分享：https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**