导航相关功能

src/components/OlMap/index.vue

@@ -42,6 +42,10 @@ import { easeInOut, easeOut } from 'ol/easing';
 export default {
   name: 'OlMap',
   props: {
+    mapName: {
+      type: String,
+      required: true
+    },
     // 是否展示pointSwitch按钮
     pointSwitchShow: {
       type: Boolean,
@@ -213,7 +217,8 @@ export default {
   computed: {
     url() {
       // return this.fileUrl + this.deptId + "/" + "map" + "/" + this.robotCode + "/" + this.mapName;
-      return 'http://101.35.49.102:9000/prod/102/map/HJ-326/sh02'
+      // return 'http://101.35.49.102:9000/prod/102/map/HJ-326/sh02'
+      return  'http://8.148.78.124:10001'
     }
   },
 
@@ -292,6 +297,7 @@ export default {
   mounted() {
     this.localPointEvent = (this.pointEvent.toString() == "function(){}" || this.pointEvent.toString() == "function _default() {}") ? this.defaultPointClick : this.pointEvent
     this.loadMap();
+    console.log("mapName地图组件:", this.mapName);
   },
   methods: {
     // 点击添加点位的操作
@@ -318,9 +324,11 @@ export default {
     //加载地图数据
     loadMap() {
       let time = new Date().getTime();
-      let configJsonUrl = this.url + "/tilemap/config.json?" + time;
-      let mapJsonUrl = this.url + "/shapefile/map.json?" + time
+      let configJsonUrl = this.url + '/v1/tilemap/details?map=' + this.mapName + '&' + time;
+      // let mapJsonUrl = this.url + "/shapefile/map.json?" + time
+      let mapJsonUrl = this.url + '/v1/roadmap/geojson/?map=' + this.mapName + '&' + time;
       axios.get(configJsonUrl).then((res) => {
+        // console.log("获取到无人车关联的地图信息:", res.data);
         this.config_json = res.data;
         axios.get(mapJsonUrl).then((res) => {
           this.geojson_data = res.data;
@@ -359,27 +367,32 @@ export default {
       this.initRobot(); // 加载robot图标
     },
 
-    initMap(config_json) {
+    initMap(config_json) {      
       if (!config_json || config_json == "") {
         return;
       }
-      var map_layers_cnt = config_json["Layers"].length;
-      var map_res = config_json["Resolution"];
-      var map_ori_x = config_json["OriginX"];
-      var map_ori_y = config_json["OriginY"];
 
       var tile_param = {
-        layer_cnt: map_layers_cnt,
-        min_zoom: this.minZoom,
+        layer_cnt:config_json.layer_cnt,
+        min_zoom: config_json.min_zoom,
+        max_zoom: config_json.max_zoom,
+        projection: config_json.projection
+
+      };
+/*       var tile_param = {
+        layer_cnt:5,
         projection: {
-          extent: [
-            map_ori_x,
-            map_ori_y,
-            map_ori_x + 2 ** map_layers_cnt * 256 * map_res,
-            map_ori_y + 2 ** map_layers_cnt * 256 * map_res,
-          ],
+          extent: 
+            [
+                -122.3002398071289,
+                -178.81439428710937,
+                287.29976019287113,
+                230.78560571289066
+            ]
         },
-      };
+         min_zoom: 1,
+         max_zoom:7
+      } */
 
       // 创建openlayers Map对象，target是html中地图<div>对应的id
       this.map = new Map({
@@ -575,15 +588,25 @@ export default {
       this.map.setView(
         new View({
           projection: new Projection({ extent: tile_param.projection.extent }),
-          center: [config_json.RotateCenterX, config_json.RotateCenterY],
-          zoom: this.zoom,
+          // center: [config_json.RotateCenterX, config_json.RotateCenterY],
+          center: [0, 0],
+          zoom: tile_param.min_zoom,
           minZoom: tile_param.min_zoom,
-          maxZoom: tile_param.layer_cnt,
+          maxZoom: tile_param.max_zoom,
         })
       );
 
       // 创建一个图层，专门用于展示瓦片地图，这里的关键是要设置好url，这个url就是LD导航系统提供的获取瓦片对应的接口
-      this.baseLayer = new TileLayer({
+      this.map.addLayer(
+            new TileLayer({
+                source: new SrcXYZ({
+                    url: this.url+ '/v1/tilemap/tile/'+this.mapName+'/{z}/{x}/{y}.png',
+                    wrapX: true,
+                    projection: new Projection({extent: tile_param.projection.extent})
+                })
+            })
+        );
+/*       this.baseLayer = new TileLayer({
         source: new SrcXYZ({
           tileUrlFunction: ($xyz) => {
             // 引入离线瓦片
@@ -608,6 +631,7 @@ export default {
               // 从json文件中获取瓦片路径
               var tile_path = config_json["Layers"][tile_zoom]["Images"][index]["Path"];
               return (this.url + "/tilemap/" + tile_path);
+              // return "http://8.148.78.124:10001/v1/tilemap/tile/demo/4/2/10"
             }
           },
           wrapX: true,
@@ -616,7 +640,7 @@ export default {
           }),
         }),
       });
-      this.map.addLayer(this.baseLayer);
+      this.map.addLayer(this.baseLayer); */
     },
 
     initRoad(geojson_data) {
@@ -724,6 +748,8 @@ export default {
 
     // robot 位置信息映射
     initRobot() {
+      console.log("robot 位置信息映射");
+      
       var robot_feature = new Feature({
         geometry: new Point([this.robotPoseData.x, this.robotPoseData.y]),
       });

src/views/map/maplist/navigation.vue

@@ -143,7 +143,7 @@
 					<div class="hand-ment-mark">
 						<el-tag type="danger" effect="dark" size="mini" v-if="nowHandMenu">{{ nowHandMenu }}</el-tag>
 					</div>
-					<OlMap ref="olmap" :width="olWidth + 'px'" :height="olHeight + 'px'" backgroundColor="#F5F5F5"
+					<OlMap ref="olmap" :width="olWidth + 'px'" :height="olHeight + 'px'" backgroundColor="#F5F5F5" :mapName="mapName"
 						:pointSwitch="settingParams.pointId" :baseLayerShow="settingParams.baseMap"
 						:pointSelectionEnabled="pointSelectionEnabled" :poseInitEnable="poseInitEnable" @addNowPoint="addNowPoint"
 						:isRobotFollow="settingParams.follow" @initNavigationResult="initNavigationResult"></OlMap>
@@ -329,14 +329,15 @@ export default {
 			],
 			olWidth: 0,  // 用于存储宽度的变量
 			olHeight: 0,
-			nowHandMenu: ''
+			nowHandMenu: '',
+			mapName: this.$route.params.mapName || ''  // 地图名称
 		};
 	},
 	created() {
 
 	},
 	mounted() {
-		const mapId = this.$route.params.mapId;
+		const mapId = this.$route.params.mapId;	
 		this.updateOlCss();
 		window.addEventListener('resize', this.updateOlCss);
 	},