修改

src/components/mars3d/Map.vue

@@ -138,7 +138,7 @@ export default {
       let that = this;
       HttpReq.truckDispatching.screenMapSetUpQuery({size:9999}).then((res) => {
 				if(true){;
-					//console.log(res);
+					console.log(res);
           let data1 = [];
           for(let key  in res){
             that.weilanName.push(key);
@@ -153,8 +153,8 @@ export default {
             data1.push(arrays)
           }
           that.zuobianData = data1
-          //console.log("zuobianData",that.zuobianData);
-          //console.log("weilanName",that.weilanName);
+          console.log("zuobianData",that.zuobianData);
+          console.log("weilanName",that.weilanName);
 
           if (this.appendToBody) {
             document.body.appendChild(this.$el)

src/views/carManagement/carTrajectory/index.vue

@@ -55,8 +55,8 @@
 							<el-button type="primary" plain style="font-size:15px;">显示所有轨迹</el-button>
 
 						</el-form>
-						<div class="playbackView">
-							<img src="../../../assets/images/cutGraph/examplePic12.png">
+						<div id="centerDiv" class="mapcontainer">
+							<mars3dViewerMap :url="configUrl" @onload="onMapload"/>
 						</div>
 					</div>
 				</div>
@@ -67,11 +67,18 @@
 
 <script>
 import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
+import mars3dViewerMap from '../../../components/mars3d/Map2.vue' //地图
 
 export default {
 	name: 'CarTrajectory',
+	components: {
+		mars3dViewerMap,
+	},
 	data() {
+		const basePathUrl = window.basePathUrl || ''
 		return {
+			//地图图片
+			configUrl: basePathUrl + 'config/config.json',
 			query:{
 				startTime:'',
 				endTime:'',
@@ -114,6 +121,42 @@ export default {
 			})
 
 		},
+		// 地图构造完成回调
+		onMapload(map) {
+			// 以下为演示代码
+
+			// 创建entity图层
+			const graphicLayer = new this.mars3d.layer.GraphicLayer()
+			map.addLayer(graphicLayer)
+
+			// 2.在layer上绑定监听事件
+			graphicLayer.on(this.mars3d.EventType.click, function (event) {
+				console.log('监听layer，单击了矢量对象', event)
+			})
+			graphicLayer.on(this.mars3d.EventType.mouseOver, function (event) {
+				console.log('监听layer，鼠标移入了矢量对象', event)
+			})
+			graphicLayer.on(this.mars3d.EventType.mouseOut, function (event) {
+				console.log('监听layer，鼠标移出了矢量对象', event)
+			})
+			// 可在图层上绑定popup,对所有加到这个图层的矢量数据都生效
+			graphicLayer.bindPopup('我是layer上绑定的Popup', {
+				anchor: [0, -10]
+			})
+			// 可在图层绑定右键菜单,对所有加到这个图层的矢量数据都生效
+			graphicLayer.bindContextMenu([
+				{
+					text: '删除对象',
+					iconCls: 'fa fa-trash-o',
+					callback: function (e) {
+						const graphic = e.graphic
+						if (graphic) {
+						graphicLayer.removeGraphic(graphic)
+						}
+					}
+				}
+			])
+		},
 	}
 }
 </script>
@@ -138,7 +181,7 @@ export default {
 			}
 		}
 	}
-	.playbackView{
+	.mapcontainer{
 		width: 80vw;
 		height: 65.5vh;
 		overflow: hidden;

src/views/regionalManagement/regionalInformation/index.vue

@@ -15,7 +15,7 @@
 								<el-table-column prop="code" label="编码" align="center"></el-table-column>
 								<el-table-column prop="name" label="区域名称" align="center"></el-table-column>
 								<el-table-column prop="areaclass" label="所属类别" align="center"></el-table-column>
-								<el-table-column prop="coordinate" label="中心坐标" align="center"></el-table-column>
+								<!-- <el-table-column prop="coordinate" label="中心坐标" align="center"></el-table-column> -->
 								<el-table-column prop="card" label="车辆标识图" align="center">
 									<template slot-scope="scope">
 										<img :src="imgSrcStart + '/avatar/' + scope.row.card" width="40" height="40"/>
@@ -40,7 +40,7 @@
 		</div>
 
 		<!-- 表单渲染 -->
-		<el-dialog append-to-body :close-on-click-modal="true" :before-close="cancelForm" :visible.sync="form.visible" :title="form.title" width="700px">
+		<el-dialog append-to-body :close-on-click-modal="true" :before-close="cancelForm" :visible.sync="form.visible" :title="form.title" width="800px">
 			<el-form :model="form.item" :rules="rules" ref="form1" :inline="true" size="small" label-width="150px">
 				<el-form-item label="编码" prop="code">
 					<el-input v-model="form.item.code" style="width:160px;" placeholder="请输入编码"/>
@@ -62,16 +62,16 @@
 				<el-form-item label="最大承接车辆数" prop="max">
 					<el-input v-model="form.item.max" style="width:160px;" placeholder="请输入最大承接车辆数"/>
 				</el-form-item>
-				<el-form-item label="区域中心坐标点" prop="coordinate">
+				<!-- <el-form-item label="区域中心坐标点" prop="coordinate">
 					<el-input v-model="form.item.coordinate" style="width:160px;" placeholder="请输入区域中心坐标点"/>
-				</el-form-item>
+				</el-form-item> -->
 				<el-form-item label="区域标记">
 					<el-input v-model="picFileName" style="width:160px;" placeholder="请上传区域标记" disabled />
 					<input type="file" name="image" @change="excelImport($event)" />
 				</el-form-item>
-				<el-form-item label="区域范围或直径" prop="arearange">
+				<!-- <el-form-item label="区域范围或直径" prop="arearange">
 					<el-input v-model="form.item.arearange" style="width:160px;" placeholder="请输入区域范围或直径"/>
-				</el-form-item>
+				</el-form-item> -->
 				<el-form-item label="电铲名称" prop="areashovel">
 					<el-input v-model="form.item.areashovel" style="width:160px;" placeholder="请输入电铲名称"/>
 				</el-form-item>
@@ -90,6 +90,9 @@
 				<el-form-item label="优先级" prop="areapriority">
 					<el-input-number v-model="form.item.areapriority" :min="1" :max="10" label="请选择优先级"></el-input-number>
 				</el-form-item>
+				<div id="centerDiv" class="mapcontainer">
+					<mars3dViewerMap :url="configUrl" @onload="onMapload"/>
+				</div>
 
 
 				<!-- 如果所属类型是电子围栏，要添加一下属性 -->
@@ -175,12 +178,18 @@
 <script>
 import { Tools, HttpReq, Dates} from '@/assets/js/common.js';
 import Axios from 'axios'
+import mars3dViewerMap from '../../../components/mars3d/Map3.vue' //地图
 
 export default {
 	name: 'CarType',
-	components: {},
+	components: {
+		mars3dViewerMap,
+	},
 	data() {
+		const basePathUrl = window.basePathUrl || ''
 		return {
+			//地图图片
+			configUrl: basePathUrl + 'config/config.json',
 			imgSrcStart:process.env.VUE_APP_LOCAL_API2,
 			loading: false,
 			page: 1,
@@ -606,6 +615,43 @@ export default {
 			})
 		},
 
+		// 地图构造完成回调
+		onMapload(map) {
+			// 以下为演示代码
+
+			// 创建entity图层
+			const graphicLayer = new this.mars3d.layer.GraphicLayer()
+			map.addLayer(graphicLayer)
+
+			// 2.在layer上绑定监听事件
+			graphicLayer.on(this.mars3d.EventType.click, function (event) {
+				console.log('监听layer，单击了矢量对象', event)
+			})
+			graphicLayer.on(this.mars3d.EventType.mouseOver, function (event) {
+				console.log('监听layer，鼠标移入了矢量对象', event)
+			})
+			graphicLayer.on(this.mars3d.EventType.mouseOut, function (event) {
+				console.log('监听layer，鼠标移出了矢量对象', event)
+			})
+			// 可在图层上绑定popup,对所有加到这个图层的矢量数据都生效
+			graphicLayer.bindPopup('我是layer上绑定的Popup', {
+				anchor: [0, -10]
+			})
+			// 可在图层绑定右键菜单,对所有加到这个图层的矢量数据都生效
+			graphicLayer.bindContextMenu([
+				{
+					text: '删除对象',
+					iconCls: 'fa fa-trash-o',
+					callback: function (e) {
+						const graphic = e.graphic
+						if (graphic) {
+						graphicLayer.removeGraphic(graphic)
+						}
+					}
+				}
+			])
+		},
+
 	}
 }
 </script>
@@ -634,6 +680,11 @@ export default {
 		}
 		
 	}
+	.mapcontainer {
+		height: 50vh;
+		width: 750px;
+		overflow: hidden;
+	}
 	.checkboxViews{
 		padding-left: 10px;
 		box-sizing: border-box;