实例介绍
【实例简介】
【实例截图】
【核心代码】
<template> <div style="margin: 0px;"> <!--<div id="container" style="width:100%; height:100%;resize:both;"></div>--> <div id="container2D" :class="type==2?'bigMap amap-container':'smallMap amap-container'" @dblclick="chanageMap(2)"></div> <div id="container3D" :class="type==3?'bigMap amap-container':'smallMap amap-container'" @dblclick="chanageMap(3)"></div> <div> <el-button type="primary" v-if="isNightscape==1" @click="chanageModel()">切换白天</el-button> <el-button type="primary" v-else-if="isNightscape==0" @click="chanageModel()">切换夜景</el-button> <el-button type="primary" @click="worldVisualAngle()">世界视角</el-button> </div> </div> </template> <script> import AMap from 'AMap' // 引入高德地图 export default { name: 'Map3D', props: { msg: String }, data() { return { type:3, //2 2D 3 3D zoom:17, //比例 map3D:null, map2D:null, isNightscape:0 //是否夜景1、是 0、否 } }, components: {}, computed: {}, created() { }, mounted() { this.mapInit3D(); this.mapInit2D(); // this.signMap(); }, methods: { worldVisualAngle(){ //切换视角 this.map3D.setZoom(4); }, chanageModel(){ //切换模式 if(!this.isNightscape){ //切夜景 this.isNightscape=1; this.map3D.setMapStyle("dark"); this.map2D.setMapStyle("dark"); }else{ this.isNightscape=0; this.map3D.setMapStyle(null); this.map2D.setMapStyle(null); } }, chanageMap(clickType){ //切换地图 if(this.type!=clickType){ this.type=clickType; } }, mapInit2D() { console.log("mapInit2D执行了===========") this.map2D = new AMap.Map('container2D', { resizeEnable: true, rotateEnable: true, pitchEnable: true, zoom: 17, pitch: 80, rotation: -15, buildingAnimation: true,//楼块出现是否带动画 expandZoomRange: true, center: [116.333926, 39.997245] }); /*this.map2D.addControl(new AMap.ControlBar({ showZoomBar: false, showControlButton: true, position: { right: '10px', top: '10px' } }))*/ /* this.map2D.addControl(new AMap.MapType({ defaultType:0 //0代表默认,1代表卫星 }));*/ }, mapInit3D() { console.log("mapInit3D执行了===========") var buildingLayer = new AMap.Buildings({zIndex:130,merge:false,sort:false,zooms:[17,20]}); var options = { hideWithoutStyle:false,//是否隐藏设定区域外的楼块 areas:[{ //围栏1 //visible:false,//是否可见 rejectTexture:true,//是否屏蔽自定义地图的纹理 color1: 'ffffff00',//楼顶颜色 color2: 'ffffcc00',//楼面颜色 path: [[116.471546,39.991033],[116.471825,39.991284],[116.471337,39.991637],[116.471031,39.99137]] }, { //围栏2 color1: 'ff99ff00', color2: 'ff999900', path: [[116.472532,39.991742],[116.473068,39.992213],[116.47258,39.992704],[116.472037,39.992152]] }] }; buildingLayer.setStyle(options); //此配色优先级高于自定义mapStyle this.map3D = new AMap.Map('container3D', { // resizeEnable: true, // rotateEnable: true, // pitchEnable: true, /*zoom: this.zoom, pitch: 80, rotation: -15, viewMode: '3D',//开启3D视图,默认为关闭 // buildingAnimation: true,//楼块出现是否带动画 // expandZoomRange: true, zooms: [3, 20], center:[116.472605,39.992075], layers:[ new AMap.TileLayer(), buildingLayer, ], features: ['bg', 'road']*/ /*, mapStyle:"dark"*/ viewMode: '3D', // 开启 3D 模式 pitch: 70, rotation: 35, center: [116.472605,39.992075], zooms: [3, 20], features: ['bg', 'road','point'], zoom: this.zoom/*, mapStyle:"dark"*/ }); /*this.map3D.addControl(new AMap.ControlBar({ showZoomBar: false, showControlButton: true, position: { right: '10px', top: '10px' } }))*/ /*this.map3D.addControl(new AMap.MapType({ defaultType:0 //0代表默认,1代表卫星 }));*/ let map=this.map3D; // 将 icon 传入 marker var endMarker = new AMap.Marker({ position: new AMap.LngLat(116.472605,39.992075), icon: require("@/assets/mc/图层 1.png"), offset: new AMap.Pixel(-13, -30) }); // 将 markers 添加到地图 this.map3D.add([endMarker]); endMarker.on('click', clickMarker,this); function clickMarker(){ map.setCenter(endMarker.getPosition()); map.setZoom(this.zoom); console.log("clickMarker" endMarker.getPosition()) } //获取动画数据 var i=1; let zoom=this.zoom; let icon=null; setInterval(function(){ if(i > 20){ i=1; } let scale=map.getZoom()/zoom; scale=(scale<1?scale/1.5:scale); // console.log(scale) icon=new AMap.Icon({ image: require("@/assets/mc/图层 " i ".png"), size: new AMap.Size(226*scale, 167*scale), //图标大小 imageSize: new AMap.Size(226*scale,167*scale) }) endMarker.setIcon(icon); i ; },100); var object3Dlayer = new AMap.Object3DLayer(); map.add(object3Dlayer); var lnglat1 = new AMap.LngLat(116.472605,39.992075); var center_3d = map.lngLatToGeodeticCoord(lnglat1); /* var topColor = [0, 0, 1, 0.9]; var topFaceColor = [0, 0, 1, 0.9]; var bottomColor = [0, 0, 1, 0.9]; //添加一个圆柱体 var addRegularPrism = function (center, segment, height, radius) { var cylinder = new AMap.Object3D.Mesh(); var geometry = cylinder.geometry; var verticesLength = segment * 2; var path = [] for (var i = 0; i < segment; i = 1) { var angle = 2 * Math.PI * i / segment; var x = center.x Math.cos(angle) * radius; var y = center.y Math.sin(angle) * radius; path.push([x, y]); geometry.vertices.push(x, y, 0); //底部顶点 geometry.vertices.push(x, y, -height); //顶部顶点 geometry.vertexColors.push.apply(geometry.vertexColors, bottomColor); //底部颜色 geometry.vertexColors.push.apply(geometry.vertexColors, topColor); //顶部颜色 var bottomIndex = i * 2; var topIndex = bottomIndex 1; var nextBottomIndex = (bottomIndex 2) % verticesLength; var nextTopIndex = (bottomIndex 3) % verticesLength; geometry.faces.push(bottomIndex, topIndex, nextTopIndex); //侧面三角形1 geometry.faces.push(bottomIndex, nextTopIndex, nextBottomIndex); //侧面三角形2 } // 构建顶面三角形,为了区分顶面点和侧面点使用不一样的颜色,所以需要独立的顶点 for (var i = 0; i < segment; i = 1) { geometry.vertices.push.apply(geometry.vertices, geometry.vertices.slice(i * 6 3, i * 6 6)); //底部顶点 geometry.vertexColors.push.apply(geometry.vertexColors, topFaceColor); } var triangles = AMap.GeometryUtil.triangulateShape(path); var offset = segment * 2; for (var v = 0; v < triangles.length; v = 3) { geometry.faces.push(triangles[v] offset, triangles[v 2] offset, triangles[v 1] offset); } cylinder.transparent = false; // 如果使用了透明颜色,请设置true // cylinder.textures.push("https://a.amap.com/jsapi_demos/static/tourist/crate.gif"); object3Dlayer.add(cylinder); }; addRegularPrism(center_3d.add(new AMap.Pixel(0, 0)), 4, 800, 500) //三棱柱*/ var topColor = [0, 1, 5, 0.9]; var topFaceColor = [0, 1, 1, 0.9]; var bottomColor = [0, 1, 1, 0.9]; //添加一个圆柱体 var addRegularPrism = function (center, segment, height, radius) { var cylinder = new AMap.Object3D.Mesh(); var geometry = cylinder.geometry; var verticesLength = segment * 2; var path = [] for (var i = 0; i < segment; i = 1) { var angle = 2 * Math.PI * i / segment; var x = center.x Math.cos(angle) * radius; var y = center.y Math.sin(angle) * radius; path.push([x, y]); geometry.vertices.push(x, y, 0); //底部顶点 geometry.vertices.push(x, y, -height); //顶部顶点 geometry.vertexColors.push.apply(geometry.vertexColors, bottomColor); //底部颜色 geometry.vertexColors.push.apply(geometry.vertexColors, topColor); //顶部颜色 var bottomIndex = i * 2; var topIndex = bottomIndex 1; var nextBottomIndex = (bottomIndex 2) % verticesLength; var nextTopIndex = (bottomIndex 3) % verticesLength; geometry.faces.push(bottomIndex, topIndex, nextTopIndex); //侧面三角形1 geometry.faces.push(bottomIndex, nextTopIndex, nextBottomIndex); //侧面三角形2 } // 构建顶面三角形,为了区分顶面点和侧面点使用不一样的颜色,所以需要独立的顶点 for (var i = 0; i < segment; i = 1) { geometry.vertices.push.apply(geometry.vertices, geometry.vertices.slice(i * 6 3, i * 6 6)); //底部顶点 geometry.vertexColors.push.apply(geometry.vertexColors, topFaceColor); } var triangles = AMap.GeometryUtil.triangulateShape(path); var offset = segment * 2; for (var v = 0; v < triangles.length; v = 3) { geometry.faces.push(triangles[v] offset, triangles[v 2] offset, triangles[v 1] offset); } cylinder.transparent = true; // 如果使用了透明颜色,请设置true object3Dlayer.add(cylinder); }; addRegularPrism(center_3d.add(new AMap.Pixel(0, 0)), 4, 800, 500) //三棱柱 // addRegularPrism(center_3d, 5, 1200, 500)//五棱柱 // // addRegularPrism(center_3d.add(new AMap.Pixel(1500, 0)), 32, 1600, 500)//圆柱 // addRegularPrism(center_3d, 5, 1200, 500)//五棱柱 // // addRegularPrism(center_3d.add(new AMap.Pixel(1500, 0)), 32, 1600, 500)//圆柱 }, signMap(){ //标记地图 // 创建一个 icon /*var endIcon = new AMap.Icon({ size: new AMap.Size(25, 34), image: '../assets/images/map_qd_1.png', imageSize: new AMap.Size(135, 40), imageOffset: new AMap.Pixel(-95, -3) });*/ /* console.log("signMap执行了===========") // 将 icon 传入 marker var endMarker = new AMap.Marker({ position: new AMap.LngLat(116.333926, 39.997245), icon: /!*endIcon*!/require("@/assets/images/map_qd_1.png"), offset: new AMap.Pixel(-13, -30) }); var endMarker2 = new AMap.Marker({ position: new AMap.LngLat(116.333926, 39.987245), icon: /!*endIcon*!/require("@/assets/images/map_qd_2.png"), offset: new AMap.Pixel(-13, -30) }); // 将 markers 添加到地图 this.map.add([endMarker,endMarker2]);*/ } } } </script> <style lang='less' scoped> body,html{ margin:0;padding:0;font:12px/16px Verdana,Helvetica,Arial,sans-serif;width: 100%;height: 100%} .container{ height: 100% } .bigMap{ width:100%; height:600px; } .smallMap{ width: 400px; height: 300px; position: absolute; right: 0px; top: 0px; border: 3px solid #CFF; z-index: 1; } </style>
好例子网口号:伸出你的我的手 — 分享!
小贴士
感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享,对搜索内容的合法性不具有预见性、识别性、控制性,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论