企业官网建设流程全解析

1、在这篇博客的基础上点击进入

2、将App.vue中的内容替换为如下所示：

<template><divclass="wrap_button"></div><divclass="map"ref="mapDom"id="map"></div><h1 id="msg"></h1></template><script setup>import{onMounted,ref}from"vue";importMapfrom'ol/Map';import{TileasTileLayer,VectorasVectorLayer}from'ol/layer';import{VectorasVectorSource}from'ol/source';importViewfrom'ol/View';importXYZfrom'ol/source/XYZ';importplanefrom'@/assets/images/plane1.png';importyellow_planefrom'@/assets/images/yellow_plane1.png';importOverlayfrom'ol/Overlay';importFeaturefrom"ol/Feature.js";importPointfrom"ol/geom/Point.js";import{Style,Circle,Fill,Stroke}from'ol/style';importDragBoxfrom'ol/interaction/DragBox';importLineStringfrom"ol/geom/LineString.js";importPolygonfrom"ol/geom/Polygon.js";import{toLonLat}from'ol/proj'import{ClusterasClusterSource}from"ol/source.js";import{Icon,Text}from"ol/style.js";import{Select}from"ol/interaction"import{singleClick}from"ol/events/condition"constmapObj=ref(null);constmapDom=ref(null);constmyLocation=ref(null);letlast_location=[];lettrack_locations=[];// 设置自定义打点要素constsetDIYmarkers=(location)=>{letangel=0;if(last_location.length!==0){letx=location[0]-last_location[0];lety=location[1]-last_location[1];angel=Math.atan(y/x)*(180/Math.PI);}if(myLocation.value!==null){mapObj.value.removeOverlay(myLocation.value);}constel=document.createElement('img');el.src=Math.random()>0.5?plane:yellow_plane;el.style.width='40px';el.style.height='40px';el.style.cursor='pointer';el.style.transform="rotate("+angel+"deg)";consttop_right_div=document.createElement('div');top_right_div.style.position="absolute";top_right_div.style.width='30px';top_right_div.style.height='30px';top_right_div.style.right='0';top_right_div.style.top='-30px';top_right_div.style.backgroundColor='pink';constbottom_right=document.createElement('div');bottom_right.style.position="absolute";bottom_right.style.width='30px';bottom_right.style.height='30px';bottom_right.style.right='-30px';bottom_right.style.bottom='0px';bottom_right.style.backgroundColor='blue';bottom_right.onclick=(e)=>{console.log('这个可以有',e);};constouter_div=document.createElement('div');outer_div.style.position='relative';outer_div.style.width='40px';outer_div.style.height='40px';outer_div.appendChild(el);outer_div.appendChild(top_right_div);outer_div.appendChild(bottom_right);constmarker=newOverlay({element:outer_div,// 要显示的元素position:location,// 地图投影的位置offset:[-20,-30],// 元素显示的像素偏移量// autoPan: true, // 禁用自动平移 即：飞机离开视野后});myLocation.value=marker;mapObj.value.addOverlay(marker);};// 创建一个矢量图层用于显示线段constvectorLayer=newVectorLayer({source:newVectorSource(),});letcount=0;// 创建一个线段要素constnew_line_feature=()=>{letlineString=newLineString(track_locations);constlineFeature=newFeature({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.length>10){letremaining_data=track_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();count=count+1;},1000);constofflineMapLayer=newTileLayer({source:newXYZ({url:'http://127.0.0.1:3000/{z}/{x}/{y}.jpg',// 设置本地离线瓦片所在路径}),});// 创建一个矢量图层constpoint_vectorSource=newVectorSource();constpoint_vectorLayer=newVectorLayer({source:point_vectorSource,});// 创建一个点要素constmy_point=newFeature({geometry:newPoint([115.981615,40.45238]),// 初始位置与地图中心点一致});// 设置点的样式为红色constpointStyle=newStyle({image:newCircle({radius:10,// 点的大小fill:newFill({color:'red',// 填充颜色为红色}),}),});my_point.setStyle(pointStyle);point_vectorSource.addFeature(my_point);// 初始化地图constinitMap=()=>{mapObj.value=newMap({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();});</script><style scoped lang="less">.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;}</style>

3、显示结果如下：