修改

public/config/config.json

+{
+  "map3d": {
+    "scene": {
+      "center": {"lat":39.276448,"lng":115.358833,"alt":2784,"heading":360,"pitch":-90},
+      "scene3DOnly": false,
+      "shadows": false,
+      "removeDblClick": true,
+      "sceneMode": 2,
+      "showSun": true,
+      "showMoon": true,
+      "showSkyBox": true,
+      "showSkyAtmosphere": true,
+      "fog": true,
+      "fxaa": true,
+      "globe": {
+        "depthTestAgainstTerrain": false,
+        "baseColor": "#546a53",
+        "showGroundAtmosphere": true,
+        "enableLighting": false
+      },
+      "cameraController": {
+        "zoomFactor": 3.0,
+        "minimumZoomDistance": 1,
+        "maximumZoomDistance": 50000000,
+        "enableRotate": true,
+        "enableTranslate": true,
+        "enableTilt": true,
+        "enableZoom": true,
+        "enableCollisionDetection": true,
+        "minimumCollisionTerrainHeight": 15000
+      }
+    },
+    "control": {
+      "homeButton": true,
+      "baseLayerPicker": true,
+      "sceneModePicker": false,
+      "vrButton": false,
+      "fullscreenButton": true,
+      "navigationHelpButton": true,
+      "animation": false,
+      "timeline": false,
+      "infoBox": false,
+      "geocoder": false,
+      "geocoderConfig": {
+        "key": [
+          "ae29a37307840c7ae4a785ac905927e0"
+        ]
+      },
+      "selectionIndicator": false,
+      "defaultContextMenu": true,
+      "mouseDownView": true,
+      "compass": {
+        "bottom": "240px",
+        "right": "2px"
+      },
+      "distanceLegend": {
+        "left": "100px",
+        "bottom": "0px"
+      },
+      "locationBar": {
+        "fps": true,
+        "template": "<div>经度:{lng}</div> <div>纬度:{lat}</div><div>海拔：{alt}米</div> <div>层级：{level}</div><div>方向：{heading}度</div> <div>俯仰角：{pitch}度</div><div>视高：{cameraHeight}米</div>"
+      }
+    },
+    "terrain": {
+      "url": "//data.mars3d.cn/terrain",
+      "show": true
+    },
+    "basemaps": [
+      {
+        "id": 10,
+        "name": "地图底图",
+        "type": "group"
+      },
+      {
+        "id": 2021,
+        "pid": 10,
+        "name": "天地图影像",
+        "icon": "http://mars3d.cn/example/img/basemaps/tdt_img.png",
+        "type": "tdt",
+        "layer": "img_d",
+        "key": [
+          "9ae78c51a0a28f06444d541148496e36"
+        ]
+      },
+      {
+        "pid": 10,
+        "name": "天地图电子",
+        "icon": "http://mars3d.cn/example/img/basemaps/tdt_vec.png",
+        "type": "group",
+        "layers": [
+          {
+            "name": "底图",
+            "type": "tdt",
+            "layer": "vec_d",
+            "key": [
+              "9ae78c51a0a28f06444d541148496e36"
+            ]
+          },
+          {
+            "name": "注记",
+            "type": "tdt",
+            "layer": "vec_z",
+            "key": [
+              "9ae78c51a0a28f06444d541148496e36"
+            ]
+          }
+        ]
+      },
+      {
+        "pid": 10,
+        "name": "高德影像",
+        "type": "group",
+        "icon": "http://mars3d.cn/example/img/basemaps/gaode_img.png",
+        "layers": [
+          {
+            "name": "底图",
+            "type": "gaode",
+            "layer": "img_d"
+          },
+          {
+            "name": "注记",
+            "type": "gaode",
+            "layer": "img_z"
+          }
+        ]
+      },
+      {
+        "pid": 10,
+        "name": "高德电子",
+        "type": "gaode",
+        "icon": "http://mars3d.cn/example/img/basemaps/gaode_vec.png",
+        "layer": "vec"
+      },
+      {
+        "pid": 10,
+        "name": "百度影像",
+        "type": "group",
+        "icon": "http://mars3d.cn/example/img/basemaps/bd-img.png",
+        "layers": [
+          {
+            "name": "底图",
+            "type": "baidu",
+            "layer": "img_d"
+          },
+          {
+            "name": "注记",
+            "type": "baidu",
+            "layer": "img_z"
+          }
+        ]
+      },
+      {
+        "pid": 10,
+        "name": "百度电子",
+        "icon": "http://mars3d.cn/example/img/basemaps/bd-vec.png",
+        "type": "baidu",
+        "layer": "vec"
+      },
+      {
+        "pid": 10,
+        "name": "腾讯影像",
+        "icon": "http://mars3d.cn/example/img/basemaps/gaode_img.png",
+        "type": "group",
+        "layers": [
+          {
+            "name": "底图",
+            "type": "tencent",
+            "layer": "img_d"
+          },
+          {
+            "name": "注记",
+            "type": "tencent",
+            "layer": "img_z"
+          }
+        ],
+        "show": false
+      },
+      {
+        "pid": 10,
+        "name": "腾讯电子",
+        "icon": "http://mars3d.cn/example/img/basemaps/gaode_vec.png",
+        "type": "tencent",
+        "layer": "vec"
+      },
+      {
+        "pid": 10,
+        "name": "ArcGIS影像",
+        "icon": "http://mars3d.cn/example/img/basemaps/esriWorldImagery.png",
+        "type": "xyz",
+        "url": "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
+        "enablePickFeatures": false
+      },
+      {
+        "pid": 10,
+        "name": "微软影像",
+        "icon": "http://mars3d.cn/example/img/basemaps/bingAerial.png",
+        "type": "bing",
+        "key": "AuKhM0WRkjhX8E4y1OM0TukYycaw_4Vh3eSfXONDf7OARls-WEB3K_Rfx89bWxof",
+        "layer": "Aerial"
+      },
+      {
+        "pid": 10,
+        "name": "OSM地图",
+        "type": "xyz",
+        "icon": "http://mars3d.cn/example/img/basemaps/osm.png",
+        "url": "http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+        "subdomains": "abc"
+      },
+      {
+        "id": 2017,
+        "pid": 10,
+        "name": "蓝色底图",
+        "icon": "http://mars3d.cn/example/img/basemaps/bd-c-midnight.png",
+        "type": "xyz",
+        "url": "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
+        "chinaCRS": "GCJ02",
+        "enablePickFeatures": false
+      },
+      {
+        "pid": 10,
+        "name": "黑色底图",
+        "icon": "http://mars3d.cn/example/img/basemaps/bd-c-dark.png",
+        "type": "tencent",
+        "layer": "custom",
+        "style": "4"
+      },
+      {
+        "pid": 10,
+        "name": "灰色底图",
+        "icon": "http://mars3d.cn/example/img/basemaps/bd-c-grayscale.png",
+        "type": "mapbox",
+        "username": "marsgis",
+        "styleId": "cki0a92b123qo1aluk0e5v7sb",
+        "scaleFactor": true
+      },
+      {
+        "pid": 10,
+        "name": "离线地图  (供参考)",
+        "type": "xyz",
+        "icon": "http://mars3d.cn/example/img/basemaps/mapboxSatellite.png",
+        "url": "//data.mars3d.cn/tile/googleImg/{z}/{x}/{y}.jpg",
+        "minimumLevel": 1,
+        "maximumLevel": 18,
+        "minimumTerrainLevel": 1,
+        "maximumTerrainLevel": 18,
+        "rectangle": {
+          "xmin": -180,
+          "xmax": 180,
+          "ymin": -85,
+          "ymax": 85
+        }
+      },
+      {
+        "pid": 10,
+        "name": "单张图片 (本地离线)",
+        "icon": "http://mars3d.cn/example/img/basemaps/offline.png",
+        "type": "image",
+        "url": "//data.mars3d.cn/file/img/world/world.jpg"
+      }
+    ],
+    "layers": [
+      {
+        "id": 20,
+        "name": "辅助图层",
+        "type": "group"
+      },
+      {
+        "pid": 20,
+        "name": "行政区划界线",
+        "type": "xyz",
+        "url": "https://t{s}.tianditu.gov.cn/DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=9ae78c51a0a28f06444d541148496e36",
+        "subdomains": "01234567",
+        "maximumLevel": 10,
+        "show": false
+      },
+      {
+        "pid": 20,
+        "name": "天地图注记",
+        "type": "tdt",
+        "layer": "img_z",
+        "key": [
+          "9ae78c51a0a28f06444d541148496e36"
+        ],
+        "show": false
+      },
+      {
+        "id": 30,
+        "name": "实时路况",
+        "type": "group"
+      },
+      {
+        "pid": 30,
+        "name": "高德实时路况",
+        "type": "gaode",
+        "layer": "time",
+        "minimumTerrainLevel": 4,
+        "minimumLevel": 4,
+        "proxy": "//server.mars3d.cn/proxy/"
+      },
+      {
+        "pid": 30,
+        "name": "百度实时路况",
+        "type": "baidu",
+        "layer": "time"
+      },
+      {
+        "pid": 10,
+        "name": "天地图电子",
+        "icon": "http://mars3d.cn/example/img/basemaps/tdt_vec.png",
+        "type": "group",
+        "layers": [
+          {
+            "name": "底图",
+            "type": "tdt",
+            "layer": "vec_d",
+            "key": [
+              "9ae78c51a0a28f06444d541148496e36"
+            ]
+          },
+          {
+            "name": "注记",
+            "type": "tdt",
+            "layer": "vec_z",
+            "key": [
+              "9ae78c51a0a28f06444d541148496e36"
+            ]
+          }
+        ],
+        "show": false
+      },
+      {
+        "pid": 40,
+        "name": "单张图片 (本地离线)",
+        "icon": "http://mars3d.cn/example/img/basemaps/offline.png",
+        "type": "image",
+        "url": "/dianziweilan/dianziweilan.jpg",
+        "rectangle": {
+          "xmin": 115.34449339,
+          "xmax": 115.383424,
+          "ymin": 39.269255,
+          "ymax": 39.2829251
+        },
+        "show": true
+      }
+    ]
+  }
+}
\ No newline at end of file

src/assets/js/common.js

@@ -1847,6 +1847,37 @@ var HttpReq = function(){
 					params:param,
 				})
 			},
+			//大屏——地图的增删改查
+			screenMapSetUpQuery: function(param){
+				return request({
+					url: '/Weilan/list',
+					method: 'get',
+					params:param,
+				})
+			},
+			screenMapSetUpAdd: function(data){
+				return request({
+					url: '/Weilan/addWeilan',
+					method: 'POST',
+					data:data,
+				}).then((res) => {
+					return res
+				})
+			},
+			screenMapSetUpUpdate: function(data){
+				return request({
+					url: '/Weilan/updateWeilan',
+					method: 'PUT',
+					data:data,
+				})
+			},
+			screenMapSetUpDel: function(data){
+				return request({
+					url: '/Weilan/delWeilan',
+					method: 'Delete',
+					data:data,
+				})
+			},
 
 			
 

src/views/MLargeScreen/index.vue

@@ -28,6 +28,9 @@
 		<div class="carExample" @click="showSpecificInforFn()">
 			<span class="el-icon-location"></span>
 		</div>
+		<div id="centerDiv" class="mapcontainer">
+			<mars3dViewerMap :url="configUrl" @onload="onMapload"/>
+		</div>
 	</div>
 </template>
 
@@ -38,6 +41,7 @@ import carManagement from './components/carManagement/index.vue' //车辆管理
 import intelligentSchedul from './components/intelligentSchedul/index.vue' //智能调度
 import dataAnalysis from './components/dataAnalysis/index.vue' //数据分析
 import carSpecificInfor from './components/carSpecificInfor/index.vue' //车辆信息弹框
+import mars3dViewerMap from '../../components/mars3d/Map.vue' //地图
 
 export default {
 	components: {
@@ -46,9 +50,13 @@ export default {
 		intelligentSchedul,
 		dataAnalysis,
 		carSpecificInfor,
+		mars3dViewerMap,
 	},
 	data() {
+		const basePathUrl = window.basePathUrl || ''
 		return {
+			//地图图片
+			configUrl: basePathUrl + 'config/config.json',
 			//时间
 			timer:null,
 			currentTime:'',
@@ -220,6 +228,44 @@ export default {
             let week = weeks[wk];
             this.currentTime = yy + '/' + mm + '/' + dd + ' ' + hou + ':' + min + ':' + sec;
         },
+		// 地图构造完成回调
+		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)
+						}
+					}
+				}
+			])
+		},
+
+
 	},
 	destroyed(){
         this.timer = null;
@@ -228,12 +274,19 @@ export default {
 </script>
 
 <style scope>
+.mapcontainer {
+  height: 100vh;
+  width: 100vw;
+  top: 0px;
+  position: absolute;
+  overflow: hidden;
+}
 .bigScreenView{
 	width: 100vw;
 	height: 100vh;
 	overflow: hidden;
-	background:no-repeat center center url('~@/assets/images/cutGraph/wallhaven-4x3j3l.jpg');
-	background-size:100% 100%;
+	/* background:no-repeat center center url('~@/assets/images/cutGraph/wallhaven-4x3j3l.jpg');
+	background-size:100% 100%; */
 }
 .top_title{
 	width: 100%;
@@ -242,11 +295,13 @@ export default {
 	background:no-repeat center center url('~@/assets/images/cutGraph/top_title.png');
 	background-size:100% 100%;
 	position: relative;
+	z-index: 1;
 }
 .content_view{
 	width: 100%;
 	height: 94vh;
 	overflow: hidden;
+	z-index: 1;
 }
 .top_titl_left{
 	display: flex;
@@ -286,5 +341,6 @@ export default {
 	font-size: 30px;
 	color: blue;
 	cursor: pointer;
+	z-index: 1;
 }
 </style>
\ No newline at end of file

vue.config.js

 'use strict'
+const webpack = require('webpack')
 const path = require('path')
 const defaultSettings = require('./src/settings.js');
+const cesiumSource = 'node_modules/mars3d-cesium/Build/Cesium/'
 
 // copy-webpack-plugin@4.5.2
 const CopyWebpackPlugin = require('copy-webpack-plugin')
@@ -22,8 +24,8 @@ module.exports = {
   lintOnSave: process.env.NODE_ENV === 'development',
   productionSourceMap: false,
   devServer: {
-    //host: 'localhost', // 也可以直接写IP地址这样方便真机测试
-    host: '192.168.0.102', // 也可以直接写IP地址这样方便真机测试
+    host: 'localhost', // 也可以直接写IP地址这样方便真机测试
+    // host: '192.168.0.102', // 也可以直接写IP地址这样方便真机测试
     port: port,
     open: true,
     overlay: {
@@ -44,18 +46,32 @@ module.exports = {
         pathRewrite: {
           '^/auth': 'auth'
         }
-      }
+      },
+      '/dianziweilan': {
+        target: process.env.VUE_APP_BASE_API,
+      },
     }
   },
   configureWebpack: {
     // provide the app's title in webpack's name field, so that
     // it can be accessed in index.html to inject the correct title.
     plugins: [
-	  new CopyWebpackPlugin([{
-		  from: "./static",
-		  to: 'static'
-	  }])
+      // new CopyWebpackPlugin([{
+      //   from: "./static",
+      //   to: 'static'
+      // }]),
+      new webpack.DefinePlugin({
+        CESIUM_BASE_URL: JSON.stringify('static')
+      }),
+      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Workers'), to: 'static/Workers' }]),
+      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Assets'), to: 'static/Assets' }]),
+      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'ThirdParty'), to: 'static/ThirdParty' }]),
+      new CopyWebpackPlugin([{ from: path.join(cesiumSource, 'Widgets'), to: 'static/Widgets' }])
     ],
+    module: {
+      unknownContextCritical: false,
+      unknownContextRegExp: /\/cesium\/cesium\/Source\/Core\/buildModuleUrl\.js/
+    },
     name: name,
     resolve: {
       alias: {