vue3 vite openlayers 实现自定义飞机随机转向、显示飞行轨迹线，切换飞机状态(更换飞机颜色)、轨迹线颜色随机更改等

1、在这篇博客的基础上点击进入2、将App.vue中的内容替换为如下所示templatedivclasswrap_button/divdivclassmaprefmapDomidmap/divh1 idmsg/h1/templatescript setupimport{onMounted,ref}fromvue;importMapfromol/Map;import{TileasTileLayer,VectorasVectorLayer}fromol/layer;import{VectorasVectorSource}fromol/source;importViewfromol/View;importXYZfromol/source/XYZ;importplanefrom/assets/images/plane1.png;importyellow_planefrom/assets/images/yellow_plane1.png;importOverlayfromol/Overlay;importFeaturefromol/Feature.js;importPointfromol/geom/Point.js;import{Style,Circle,Fill,Stroke}fromol/style;importDragBoxfromol/interaction/DragBox;importLineStringfromol/geom/LineString.js;importPolygonfromol/geom/Polygon.js;import{toLonLat}fromol/projimport{ClusterasClusterSource}fromol/source.js;import{Icon,Text}fromol/style.js;import{Select}fromol/interactionimport{singleClick}fromol/events/conditionconstmapObjref(null);constmapDomref(null);constmyLocationref(null);letlast_location[];lettrack_locations[];// 设置自定义打点要素constsetDIYmarkers(location){letangel0;if(last_location.length!0){letxlocation[0]-last_location[0];letylocation[1]-last_location[1];angelMath.atan(y/x)*(180/Math.PI);}if(myLocation.value!null){mapObj.value.removeOverlay(myLocation.value);}consteldocument.createElement(img);el.srcMath.random()0.5?plane:yellow_plane;el.style.width40px;el.style.height40px;el.style.cursorpointer;el.style.transformrotate(angeldeg);consttop_right_divdocument.createElement(div);top_right_div.style.positionabsolute;top_right_div.style.width30px;top_right_div.style.height30px;top_right_div.style.right0;top_right_div.style.top-30px;top_right_div.style.backgroundColorpink;constbottom_rightdocument.createElement(div);bottom_right.style.positionabsolute;bottom_right.style.width30px;bottom_right.style.height30px;bottom_right.style.right-30px;bottom_right.style.bottom0px;bottom_right.style.backgroundColorblue;bottom_right.onclick(e){console.log(这个可以有,e);};constouter_divdocument.createElement(div);outer_div.style.positionrelative;outer_div.style.width40px;outer_div.style.height40px;outer_div.appendChild(el);outer_div.appendChild(top_right_div);outer_div.appendChild(bottom_right);constmarkernewOverlay({element:outer_div,// 要显示的元素position:location,// 地图投影的位置offset:[-20,-30],// 元素显示的像素偏移量// autoPan: true, // 禁用自动平移 即飞机离开视野后});myLocation.valuemarker;mapObj.value.addOverlay(marker);};// 创建一个矢量图层用于显示线段constvectorLayernewVectorLayer({source:newVectorSource(),});letcount0;// 创建一个线段要素constnew_line_feature(){letlineStringnewLineString(track_locations);constlineFeaturenewFeature({geometry:lineString,});// 设置线段的样式lineFeature.setStyle(newStyle({stroke:newStroke({color:Math.random()0.5?red:pink,width:5,}),}));returnlineFeature;};// 清除线段functionclearLine(){vectorLayer.getSource().clear();}// 重新添加线段functionaddLine(){vectorLayer.getSource().addFeature(new_line_feature());}constcenter_point[115.981615,40.45238];constcenter_point1[115.981615,40.46238];setInterval((){last_location[...center_point];if(track_locations.length10){letremaining_datatrack_locations.slice(-10);track_locations[...remaining_data];}track_locations[...track_locations,last_location];center_point[0]center_point[0]Math.random()*0.001;center_point[1]center_point[1]Math.random()*0.001;setDIYmarkers(center_point);clearLine();addLine();countcount1;},1000);constofflineMapLayernewTileLayer({source:newXYZ({url:http://127.0.0.1:3000/{z}/{x}/{y}.jpg,// 设置本地离线瓦片所在路径}),});// 创建一个矢量图层constpoint_vectorSourcenewVectorSource();constpoint_vectorLayernewVectorLayer({source:point_vectorSource,});// 创建一个点要素constmy_pointnewFeature({geometry:newPoint([115.981615,40.45238]),// 初始位置与地图中心点一致});// 设置点的样式为红色constpointStylenewStyle({image:newCircle({radius:10,// 点的大小fill:newFill({color:red,// 填充颜色为红色}),}),});my_point.setStyle(pointStyle);point_vectorSource.addFeature(my_point);// 初始化地图constinitMap(){mapObj.valuenewMap({target:mapDom.value,// 地图容器layers:[offlineMapLayer,vectorLayer,point_vectorLayer,],view:newView({center:[115.981615,40.45238],// 地图中心点zoom:14,// 缩放maxZoom:18,minZoom:10,projection:EPSG:4326,// 坐标系}),});};onMounted((){initMap();});/scriptstyle scoped langless.wrap_button{//position: relative;position:absolute;top:0;left:0;right:0;width:100%;height:50px;display:flex;align-items:center;justify-content:space-between;z-index:1;background-color:#fff;text-align:center;div{flex:1;border-left:1px solid black;}}#map{width:100vw;height:100vh;}/style3、显示结果如下