准备接入minIO

hd-glasses-app/src/pages/map.vue

@@ -19,6 +19,9 @@
         <van-grid-item>
           <van-button size="mini" type="primary" @click="stopAnimation()">结束沿轨迹运动</van-button>
         </van-grid-item>
+        <van-grid-item>
+          <van-button size="mini" type="primary" @click="planningPath()">planningPath</van-button>
+        </van-grid-item>
       </van-grid>
       <br/>
     </div>
@@ -36,7 +39,13 @@ import { Icon, Fill, Stroke, Style, Circle } from "ol/style";
 import Overlay from "ol/Overlay";
 import {Point, LineString} from "ol/geom.js";
 import { getVectorContext } from "ol/render";
+import axios from "axios";
 
+
+
+
+
+import {OL as ol} from "plot-ol/plottingol";
 export default {
   data() {
     return {
@@ -44,7 +53,8 @@ export default {
       pointLayer: {},
       canAddPoints: false,
       coordinate: [],
-      route: new LineString([[113.95113841271974,22.568523240293505],[113.94452944970705,22.563351941312792],[113.95188943124391,22.559317898954394],[113.94467965341188,22.555326771940233]]),
+      route: new LineString([[12496610.1929, 2476571.7426],[12496623.829, 2476586.2505]]),
+      route1: new LineString([[113.95113841271974,22.568523240293505],[113.94452944970705,22.563351941312792],[113.95188943124391,22.559317898954394],[113.94467965341188,22.555326771940233]]),
       geometryMove: {},
       featureMove: {},
       styles: {
@@ -109,6 +119,9 @@ export default {
         type: "featureMove",
         geometry: this.geometryMove,
       });
+
+      console.log(this.route)
+
       this.vectorLayer = new VectorLayer({
         source: new VectorSource({
           features: [
@@ -144,13 +157,13 @@ export default {
           }),
         ],
         view: new View({
-          projection: "EPSG:4326",
-          center: [113.948306, 22.562039],
-          zoom: 16,
+          projection: "EPSG:3857",
+          center: [12497018.585823221, 2476783.2447665134],
+          zoom: 12,
         }),
       });
 
-      this.map.addLayer(this.vectorLayer);
+      // this.map.addLayer(this.vectorLayer);
     },
     /**
      * 点击地图添加摄像头要素
@@ -163,6 +176,72 @@ export default {
         }
       });
     },
+    planningPath() {
+
+      axios({
+        method: "post",
+        url: process.env.VUE_APP_MAP_URL + "/wfs?authkey=" + process.env.VUE_APP_MAP_AUTHKEY,
+        headers: {
+          'Content-Type': 'text/xml'
+        },
+        data: `<GetFeature xmlns="http://www.opengis.net/wfs" service="WFS" version="1.1.0"
+            outputFormat="application/json"
+            viewParams="points:12496603.063359383#2476576.2207514597@12497163.153583003#2477213.6636166913@12497590.025377853#2477169.2574819643@12497545.869867127#2477020.727166339@12496603.063359383#2476576.2207514597"
+            xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+            xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd">
+            <Query typeName="china:planning-path" xmlns:china="www.shgis.com"/>
+        </GetFeature>`,
+      }).then(res => {
+        // console.log(res.data.features)
+
+        let pathList=[];
+        res.data.features.map((item,index) => {
+          if(index<50){
+            pathList.push(item.geometry.coordinates[0])
+            pathList.push(item.geometry.coordinates[1])
+          }
+          // console.log(item.geometry.coordinates[0])
+          // console.log(item.geometry.coordinates[0])
+        })
+
+
+        const route=new LineString(pathList)
+
+        const geometryMove = new Point(route.getFirstCoordinate());
+
+        const featureMove = new Feature({
+          type: "featureMove",
+          geometry: geometryMove,
+        });
+
+        const vectorLayer = new VectorLayer({
+          source: new VectorSource({
+            features: [
+              new Feature({
+                type: "route",
+                geometry: route,
+              }),
+              featureMove,
+              new Feature({
+                type: "icon",
+                geometry: new Point(route.getFirstCoordinate()),
+              }),
+              new Feature({
+                type: "icon",
+                geometry: new Point(route.getLastCoordinate()),
+              }),
+            ],
+          }),
+          style: (feature) => {
+            return this.styles[feature.get("type")];
+          },
+        });
+
+        console.log(route.getFirstCoordinate())
+        console.log(route.getLastCoordinate())
+        this.map.addLayer(vectorLayer)
+      })
+    },
     /**
      * 根据经纬度坐标添加摄像头要素
      */
@@ -267,11 +346,25 @@ export default {
   bottom: 0px;
   left: 0px;
   height: 200px;
-  width: 100%;
+  width: 100vw;
 
-  display: flex;
-  flex-direction: row;
-  justify-content: space-around;
-  flex-wrap: wrap;
+  .addAlarmPoint {
+    width: 100%;
+    height: 100px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    z-index: 100;
+
+    .addAlarmPointNext {
+      width: 80%;
+      height: 80px;
+      line-height: 80px;
+      background-color: #369FFF;
+      border-radius: 20px;
+      font-size: 26px;
+      color: white;
+    }
+  }
 }
 </style>