基于mineMap的地图台风灾害预警轨迹可视化方案

1.需求概要
可视化界面显示气象云图及台风中心运动变化，实时数据显示；
2.效果预览

方案实施
1.>图层构成分析：
可视范围内构成的应该包含基础图层和动态移动图层，运动线路，运动风标，及运动信息框；
2.>结构拆分：
//：基于单图层创建多个根据风力大小为半径的风面圆图层；
数据组装：

      /*** @Description:圆心处理* @Author: ShiWei* @Date: 2020-09-07*/makeWindGeo(fea,i) {const cen = turf.point(fea[i].geometry.coordinates)// 圆形展示return turf.sector(cen, fea[i].properties.r10, 0, 360)},if( winData.length!==0){let dataObj=winData.data;let r7=Math.floor(Math.random() * 200 + 20);let r10= Math.floor(Math.random() * 300 + 50);dataObj.map((item,index) =>{let properties={wl:parseFloat(item.mws),r10:r10,r7:r7,startTime:item.startTime,endTime:item.endTime,centerPres:item.centerPres,mws:item.mws,mwsMax:item.mws};let point=[];//单点信息point.push(parseFloat(item.lon),parseFloat(item.lat))stp.push(this.mapController.makeFeature("Point",point,properties))features.push(this.makeWindGeo(stp,index))})let source = this.mapController.makeFeatureCollection(features)this.mapController.addSource(this.map, "circle-source-1", source)this.drwWinCircle('win-circle','circle-source-1',this.map)

      /*** @Description: 绘制圆形风力面 采用单图层绘制多个同类面* @Author: ShiWei* @Date: 2020-09-07*/drwWinCircle(id,source,map){if (map.getLayer(id)) {map.removeLayer(id)}map.addLayer({"id": id,"type": "fill","source": source,"paint": {"fill-color": "#35e2ce","fill-opacity": 0.2,}});},

2.同操作拆分出风面中心点point,及轨迹线路

      if( winData.length!==0){let dataObj=winData.data;let r7=Math.floor(Math.random() * 200 + 20);let r10= Math.floor(Math.random() * 300 + 50);dataObj.map((item,index) =>{let properties={wl:parseFloat(item.mws),r10:r10,r7:r7,startTime:item.startTime,endTime:item.endTime,centerPres:item.centerPres,mws:item.mws,mwsMax:item.mws};let point=[];//单点信息point.push(parseFloat(item.lon),parseFloat(item.lat))//风力轨迹坐标line.push(point);stp.push(this.mapController.makeFeature("Point",point,properties))infos.push({point:point,properties})//中心点winCenter.push(this.mapController.makeFeature("Point",point,properties))features.push(this.makeWindGeo(stp,index))})features.map((ite,idx)=>{markerList.push(ite.geometry.coordinates[0][0])})let source = this.mapController.makeFeatureCollection(features)let winCenterSource = this.mapController.makeFeatureCollection(winCenter)this.mapController.addSource(this.map, "center-source-1", winCenterSource)this.drwWinCenter('win-center','center-source-1',this.map)let geo = {type: "FeatureCollection",features: [{type: "Feature",geometry: {"type": "LineString", "coordinates": line},properties: {}}]}//运动数装倒序组装this.infoList=infos.reverse();this.mapController.addSource(this.map, "line-source-1", geo);this.drwWinLine('line-win',"line-source-1",this.map)this.addMarker(this.map,line)this.moveList=line.reverse();minemaputil.fitBounds(this.map, source, { padding: 200 });}

3.绘制中心点及轨迹路线

  /*** @Description:风圈中心位置标识* @Author: ShiWei* @Date: 2020-09-08*/drwWinCenter(id,source,map){if (map.getLayer(id)) {map.removeLayer(id)}map.addLayer({"id": id,"type": "circle","source": source,"paint": {"circle-color": {"property": "wl","stops": [[0, "rgba(255,255,255,0.60)"],[1, "rgba(230,230,230,0.60)"],[2, "rgba(204,204,204,0.60)"],[3, "rgba(179,179,179,0.60)"],[4, "rgba(154,154,154,0.60)"],[5, "rgba(62,217,230,0.60)"],[6, "rgba(79,214,203,0.60)"],[7, "rgba(85,207,137,0.60)"],[8, "rgba(109,214,106,0.60)"],[9, "rgba(160,230,69,0.60)"],[10, "rgba(213,230,69,0.60)"],[11, "rgba(255,232,79,0.60)"],[12, "rgba(245,188,56,0.60)"],[13, "rgba(245,144,56,0.60)"],[14, "rgba(235,103,47,0.60)"],[15, "rgba(218,73,43,0.60)"],[16, "rgba(190,46,45,0.60)"],[17, "rgba(129,56,184,0.60)"],[18, "rgba(67,2,116,0.60)"]]},"circle-radius": 10}});},/*** @Description:绘制风力轨迹线路* @Author: ShiWei* @Date: 2020-09-08*/drwWinLine(id,source,map){map.addLayer({"id": id,"type": "line","source": source,"layout": {"line-join": "round","line-cap": "round"},"paint": {"line-color": "#64a7c2","line-width": 2,"line-opacity": 0.6}});},

4.风标

/*** @Description:风圈引导标记* @Author: ShiWei* @Date: 2020-09-08*/addMarker(map,data){if(this.markerLister) {this.markerLister.remove();}let el = document.createElement('div');el.style.zIndex = 120;el.className = 'pin-wheel-marker';let p = document.createElement('div');p.className = 'pin-wheel-inner';el.appendChild(p);this.markerLister= new minemap.Marker(el, {offset: [-17, -17]}).setLngLat(data[data.length-1]).addTo(map);this.addInfoMarker(0)},

5.动态信息窗

 /*** @Description:动态信息窗体* @Author: ShiWei* @Date: 2020-09-08*/addInfoMarker(i){let data=this.infoList;if(this.infoMarker) {this.infoMarker.remove();}let el=document.createElement('div');el.className="info-content";let line=document.createElement('li')line.className='info-line'el.appendChild(line)let infoM=document.createElement('div');infoM.className='info-cls'let info=document.createElement('div');info.className='info-menu'let tt = document.createElement('li');tt.innerHTML='持续时间'+data[i].properties.startTime+'--'+data[i].properties.startTime;info.appendChild(tt);let qy=document.createElement('li');qy.innerHTML='中心气压'+data[i].properties.centerPres+'百帕';info.appendChild(qy);let fsMin =document.createElement('li');fsMin.innerHTML='最小风速'+data[i].properties.mws+'米/秒';info.appendChild(fsMin);infoM.appendChild(info)el.appendChild(infoM)this.infoMarker= new minemap.Marker(el, {offset: [8, -60]}).setLngLat(data[i].point).addTo(this.map);},

实时播放，暂停，重置

/*** @Description:播放风力轨迹* @Author: ShiWei* @Date: 2020-09-08*/winStart(){if(this.moveList.length>0){let count=0;if(this.tep!==""){count=this.tep;}else {count=0;}this.moveTimer=setInterval(()=>{this.markerLister.setLngLat(this.moveList[count])this.addInfoMarker(count)this.tep=count;count++;if(count===this.moveList.length){clearInterval(this.moveTimer);this.moveTimer=null;this.markerLister.setLngLat(this.moveList[0])this.addInfoMarker(0)}},2000)}},/*** @Description:暂停* @Author: ShiWei* @Date: 2020-09-08*/winStop(){if( this.moveTimer){clearInterval(this.moveTimer);this.moveTimer=null;}this.moveTimer=setInterval(()=>{let count=this.tep;this.markerLister.setLngLat(this.moveList[count])this.addInfoMarker(count)this.tep=count;count++;if(count===this.moveList.length){clearInterval(this.moveTimer);this.moveTimer=null;this.markerLister.setLngLat(this.moveList[0])this.addInfoMarker(0)}},2000)},/*** @Description:重置* @Author: ShiWei* @Date: 2020-09-08*/rest(){this.tep="";clearInterval(this.moveTimer);this.moveTimer=null;this.markerLister.setLngLat(this.moveList[0])this.addInfoMarker(0)},

注意:利用turf将坐标转换成多边形；利用reverse()将数据顺序倒序达到预期效果
1 const cen = turf.point(fea[i].geometry.coordinates) // 圆形展示 return turf.sector(cen, fea[i].properties.r10, 0, 360) 2. reverse（）