高德3D动态地图 |
您所在的位置：网站首页 › 高德地图如何导出三维模型 › 高德3D动态地图 |
高德3D动态地图
|
做这个动态效果之前，大家可以了解下高地的官方示例（https://lbs.amap.com/demo/loca-v2/demos/cat-view-control/view-control）高德提供了镜头旋转的官方示例，但是镜头旋转没有说明，而且存在bug，调整speed速度后整个场景就乱了，因为我能力有限而且比较懒，所以我开始自己写动画。
地图使用2.0的版本（http://webapi.amap.com/maps?v=2.0），之前使用1.4.3的版本在旋转是存在周边空白，又没找到刷新的方法，所以使用当前最新的2.0版本。将整个动画划分为四步： 第一步，加载，2.0版本首次加载时如果不预留加载时间，地图标记点不会显示。判断是否首次加载，首次加载不旋转，非首次旋转 第二步，调整视角到2D视角 第三步，2D视角进行旋转一定时间 第四步，重新旋转回到3D视角 这四步需要处理的几个问题： 1、通过requestAnimationFrame方法循环处理每一帧的动画。 2、控制FPS（每秒帧数），防止帧数太高，电脑发热 3、处理旋转一周后，高德反转导致的回放 下面是示例代码，有兴趣自己看吧（把key替换成自己的） 牟云飞示例 .infowindow_custom_geo{ } .infowindow_custom_geoContent{ display: flex; flex-direction:column; justify-content: center;/*实现水平居中*/ } .infowindow_custom_geoContent_fontcolor{ color:RGB(21,253,255); height: 30px; } /*从左到右进入*/ .fadeInLeft { animation: fadeInLeft 0.8s ; -webkit-animation: fadeInLeft 0.8s ; } @keyframes fadeInLeft { from { opacity: 0; -webkit-transform: translate(-1000px,0); transform: translate(-1000px,0); } to { opacity:1; -webkit-transform: translate(10px,0); transform: translate(10px,0); } } @-webkit-keyframes fadeInLeft { from { opacity:0; -webkit-transform: translate(-1000px,0); transform: translate(-1000px,0); } to { opacity:1; -webkit-transform: translate(10px,0); transform: translate(10px,0); } } /*从右到左进入*/ .fadeInRight { animation: fadeInRight 0.8s ; -webkit-animation: fadeInRight 0.8s ; } @keyframes fadeInRight { from { opacity: 0; -webkit-transform: translate(1000px,0); transform: translate(1000px,0); } to { opacity:1; -webkit-transform: translate(10px,0); transform: translate(10px,0); } } @-webkit-keyframes fadeInRight { from { opacity:0; -webkit-transform: translate(1000px,0); transform: translate(1000px,0); } to { opacity:1; -webkit-transform: translate(10px,0); transform: translate(10px,0); } } var myMap_zhdp; var box_zhdp, network_zhdp, baiduMap_zhdp; var node_colors = ['#259B24','#2DC1B4','#FF9800','#005E7D','#BF2DC1','#FF0000','#6184F0']; var layer = null;//撒点 var markers = []; var mapDataArr = []; var initData = { "parameters": { "mapData": { "greenhouse": [ { "latitude": "36.793139", "longitude": "118.682124", "info": { "name": "牟云飞示例1", } }, { "latitude": "36.90723878", "longitude": "118.86398011", "info": { "name": "牟云飞示例1", } } ], "scenicspot": [ { "latitude": "37.070134", "longitude": "118.696025", "info": { "name": "牟云飞示例1", } } ], "livestockCultivation": [ { "latitude": "36.972933", "longitude": "118.89215", "info": { "name": "牟云飞示例1", } } ], "seafoodCultivation": [ { "latitude": "37.186281", "longitude": "118.751003", "info": { "name": "牟云飞示例1", } } ], "heating": [ { "latitude": "36.801139", "longitude": "118.830124", "info": { "name": "牟云飞示例1", } } ], "fruitProcessing": [ { "latitude": "36.861139", "longitude": "118.680124", "info": { "name": "牟云飞示例1", } } ], "zhxxInfo": [ { "latitude": "36.791139", "longitude": "118.680124", "info": { "name": "牟云飞示例1", } } ] } }, "dataWraps": { }, "errorMessage": "", "message": "", "exportFileName": null, "currentDataWrap": "dataWrap", "exportColumns": null, "metaData": null } var obj =initData.parameters.mapData; function initMap(obj){ console.log("obj:",obj); myMap_zhdp = new AMap.Map("containerMap", { viewMode: '3D', mapStyle: 'amap://styles/90287222547b179fcbda2e63865f2f5c', showBuildingBlock: true, //center: [118.848014,36.885728], center: [118.848014,37.085728], pitch: 80, zoom: 11, // layers: [ // // 卫星 // new AMap.TileLayer.Satellite(), // // 路网 // new AMap.TileLayer.RoadNet() // ] }); //为地图注册click事件获取鼠标点击出的经纬度坐标 myMap_zhdp.on('click', function(e) { console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat()); }); //创建区域 createArea(); //散点 layer = new AMap.LabelsLayer({ zooms: [3, 20], zIndex: 1000, // 开启标注避让，默认为开启，v1.4.15 新增属性 collision: false, // 开启标注淡入动画，默认为开启，v1.4.15 新增属性 animation: true, }); addnodes(obj.greenhouse,0); addnodes(obj.scenicspot,1); addnodes(obj.livestockCultivation,2); addnodes(obj.seafoodCultivation,3); addnodes(obj.heating,4); addnodes(obj.fruitProcessing,5); var zhxxInfo = obj.zhxxInfo; addnodes(zhxxInfo,6); myMap_zhdp.add(layer); myMap_zhdp.on('complete', function () { //地图加载完成后 render(); }); } //添加地图节点 function addnodes(obj,index) { if(obj==null) return; for(var i=0;i |
【本文地址】
今日新闻 |
推荐新闻 |