Skip to content

卡
卡车调度系统
Commit 2128f067 authored by caicaicai's avatar caicaicai
Browse files
Options

修改

parent dcce6961
Show whitespace changes
Inline Side-by-side
Showing with 1229 additions and 13 deletions
src/components/mars3d/Map.vue
View file @ 2128f067
......@@ -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/components/mars3d/Map2.vue 0 → 100644
View file @ 2128f067
<template>
<div style="wight:100%;height:100%;">
<div :id="`mars3d-container${mapKey}`"
:class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]"></div>
<!-- <div class="infoview">
<el-button type="primary" @click="btnStartDraw()">设置围栏</el-button>
<el-button type="primary" @click="uploaded()">上传围栏</el-button>
<div style="display: inline-block;color:red;font-weight:bolder;">每次只允许上传一个围栏，并且围栏必须是封闭图形</div>
</div> -->
</div>
</template>
<script>
import Vue from 'vue'
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
// 使用免费开源版本
import 'mars3d/dist/mars3d.css'
import * as mars3d from 'mars3d'
import * as Cesium from 'mars3d-cesium/Build/Cesium/Cesium'
import { initGraphicManager,initLayerManager,bindLayerContextMenu } from './js/graphicManager'
// 导入插件(其他插件类似，插件清单访问：http://mars3d.cn/dev/guide/start/install.html)
// echarts插件
// import 'mars3d-echarts'
// 为了方便使用,绑定到原型链，在其他vue文件，直接 this.mars3d 来使用
Vue.prototype.mars3d = mars3d
Vue.prototype.Cesium = mars3d.Cesium
var map;
export default {
name: 'mars3dViewer',
created(){
this.getCoordinate();
},
data(){
return{
persons:[
["115.358833", "39.276448", "500"],
["115.358638", "39.272818", "500"],
["115.368738", "39.272818", "500"],
["115.368638", "39.278518", "500"],
["115.358538", "39.278818", "500"],
["115.348538", "39.275818", "500"],
["115.351538", "39.273318", "500"],
["115.357833", "39.275448", "500"],
["115.358833", "39.276448", "500"],
["115.358638", "39.272818", "500"],
["115.368738", "39.272818", "500"],
["115.368638", "39.278518", "500"],
["115.358538", "39.278818", "500"],
["115.348538", "39.275818", "500"],
["115.351538", "39.273318", "500"],
["115.357833", "39.275448", "500"],
["115.358833", "39.276448", "500"],
["115.358638", "39.272818", "500"],
["115.368738", "39.272818", "500"],
["115.368638", "39.278518", "500"],
["115.358538", "39.278818", "500"],
["115.348538", "39.275818", "500"],
["115.351538", "39.273318", "500"],
["115.357833", "39.275448", "500"],
["115.358833", "39.276448", "500"],
["115.358638", "39.272818", "500"],
["115.368738", "39.272818", "500"],
["115.368638", "39.278518", "500"],
["115.358538", "39.278818", "500"],
["115.348538", "39.275818", "500"],
["115.351538", "39.273318", "500"],
["115.357833", "39.275448", "500"],
["115.358833", "39.276448", "500"],
["115.358638", "39.272818", "500"],
["115.368738", "39.272818", "500"],
["115.368638", "39.278518", "500"],
["115.358538", "39.278818", "500"],
["115.348538", "39.275818", "500"],
["115.351538", "39.273318", "500"],
["115.357833", "39.275448", "500"],
],
zuobianData:[],
toJavaCoordinates:[],
weilanName:[],
}
},
props: {
// 初始化配置参数
url: String,
// 地图唯一性标识
mapKey: {
type: String,
default: ''
},
// 自定义参数
options: Object,
// 是否分屏显示
compare: {
type: Boolean,
default: false
},
// 是否插入到body元素上
appendToBody: {
type: Boolean,
default: false
},
// 自定义css类名
customClass: {
type: String,
default: ''
}
},
destroy() {
this[`map${this.mapKey}`].destroy()
delete this[`map${this.mapKey}`]
},
methods: {
//后台获取数据
getCoordinate() {
let that = this;
// HttpReq.truckDispatching.screenMapSetUpQuery({size:9999}).then((res) => {
// if(true){;
// //console.log(res);
// let data1 = [];
// for(let key in res){
// that.weilanName.push(key);
// let arrays = [];
// res[key].forEach(function(item){
// var arr = [];
// arr[0] = item.lon;
// arr[1] = item.lat;
// arr[2] = "500";
// arrays.push(arr);
// })
// data1.push(arrays)
// }
// that.zuobianData = data1
//console.log("zuobianData",that.zuobianData);
//console.log("weilanName",that.weilanName);
if (this.appendToBody) {
document.body.appendChild(this.$el)
}
if (this.mapKey) {
this.initMars3d(this.options)
} else {
mars3d.Resource.fetchJson({ url: this.url }).then((data) => {
this.initMars3d(data.map3d)// 构建地图
})
}
// }
// })
},
//上传围栏数据
uploaded(){
let newData = [...this.toJavaCoordinates];
newData.pop();
if(this.toJavaCoordinates.length == 0){
this.$message({
type: 'warning',
message: '请绘制电子围栏'
});
}else{
this.$prompt('电子围栏名称不得为空且不能与之前围栏名称重复', '请输入电子围栏名称', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputErrorMessage: '输入不能为空',
inputValidator: (value) => { // 点击按钮时，对文本框里面的值进行验证
if(!value) {
return '输入不能为空';
}
},
}).then(({ value }) => {
let allObj = {};
allObj.name = value;
allObj.zuobiao = newData;
this.toJavaCoordinates = [];
console.log(allObj);
//发送添加电子围栏请求
HttpReq.truckDispatching.screenMapSetUpAdd(allObj).then((res) => {
if(res.code == 200){
this.$notify({
title: '上传电子围栏成功！',
type: 'success',
duration: 2500
});
}else{
this.$notify({
title: res.msg,
type: 'error',
duration: 2500
})
}
}).catch(function(error) { });
}).catch(() => {
this.$message({
type: 'info',
message: '取消输入'
});
});
}
},
//创建地图
initMars3d(options) {
let that = this;
if (this[`map${this.mapKey}`]) return
const mapOptions = {
...options,
...this.options,
control: {
defaultContextMenu: false, //右键菜单
},
}
// 创建三维地球场景
map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions)
this[`map${this.mapKey}`] = map
//围栏回显
that.zuobianData.forEach(function(item,index){
var graphicLayer = new mars3d.layer.GraphicLayer();
map.addLayer(graphicLayer);
initLayerManager(graphicLayer,that.weilanName[index]);
that.addGraphic_01(graphicLayer,item,that.weilanName[index]);
})
//创建矢量数据图层2
var graphicLayer1 = new mars3d.layer.GraphicLayer();
map.addLayer(graphicLayer1);
var item = `<table style="width: auto;">
<tr>
<th scope="col" colspan="2" style="text-align:center;font-size:15px;">卡车号码：鲁K12345</th>
</tr>
<tr>
<td>名称：卡车一</td>
</tr>
</table>`;
initGraphicManager(graphicLayer1,item);
this.addGraphic_02(graphicLayer1,this.persons);
// 抛出事件
this.$emit('onload', map)
},
//围栏设置
btnStartDraw(){
this.toJavaCoordinates = [];
let that = this;
var graphicLayer3 = new mars3d.layer.GraphicLayer();
graphicLayer3.on(mars3d.EventType.click, function (event) {
var mpt = mars3d.LatLngPoint.fromCartesian(event.cartesian);
that.toJavaCoordinates.push(mpt.toString().split(','));
console.log(that.toJavaCoordinates);
});
map.addLayer(graphicLayer3);
initLayerManager(graphicLayer3);
graphicLayer3.startDraw({
type: "polyline",
style: {
color: "red",
width: 5,
clampToGround: false,
label: {
text: "围栏区域",
font_size: 18,
color: "#ffffff",
distanceDisplayCondition: true,
distanceDisplayCondition_far: 500000,
distanceDisplayCondition_near: 0,
},
},
});
},
//围栏回显
addGraphic_01(graphicLayer,positions,weilanName){
let graphic = new mars3d.graphic.PolygonEntity({
positions: positions,
style: {
color: "red",
opacity: 0.5,
outline: true,
outlineWidth: 3,
outlineColor: "#ffffff",
label: {
text: weilanName,
font_size: 18,
color: "#ffffff",
distanceDisplayCondition: true,
distanceDisplayCondition_far: 500000,
distanceDisplayCondition_near: 0,
},
},
});
graphicLayer.addGraphic(graphic); //还可以另外一种写法: graphic.addTo(graphicLayer)
},
//车辆轨迹
addGraphic_02(graphicLayer1,positions) {
var property = new Cesium.SampledPositionProperty();
var tempTime;
//起点
tempTime = map.clock.currentTime; //开始时间
property.addSample(tempTime, Cesium.Cartesian3.fromDegrees(positions[0][0],positions[0][1],positions[0][2]));
for(let i = 1;i < positions.length;i++){
tempTime = Cesium.JulianDate.addSeconds(tempTime, 120, new Cesium.JulianDate());
property.addSample(tempTime, Cesium.Cartesian3.fromDegrees(positions[i][0],positions[i][1],positions[i][2],));
}
var graphic = new mars3d.graphic.PathEntity({
position: property,
style: {
width: 3,
color: "#8a2e3b",
opacity: 1.0,
leadTime: 0, // 前方的路线不显示
//高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
highlight: {
type: mars3d.EventType.click,
color: "#ff0000",
},
},
label: {
text: "卡车一",
font_size: 19,
font_family: "楷体",
color: Cesium.Color.AZURE,
outline: true,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 2,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(10, -25), //偏移量
},
model: {
url: "//data.mars3d.cn/gltf/mars/car/tufangche.glb",
scale: 0.1,
minimumPixelSize: 50,
},
});
graphicLayer1.addGraphic(graphic); //还可以另外一种写法: graphic.addTo(graphicLayer)
},
getSampledPositionProperty(points){
let property = new Cesium.SampledPositionProperty();
let start = this.map.clock.currentTime;
let positions = mars3d.LatLngArray.toCartesians(points);
for (let i = 0; i < positions.length; i++) {
let time = Cesium.JulianDate.addSeconds(start, i * 20, new Cesium.JulianDate());
let position = positions[i];
property.addSample(time, position);
}
return property;
},
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
.cesium-viewer-toolbar{
display: none !important;
}
.mars3d-compass{
display: none !important;
}
.mars3d-locationbar{
display: none !important;
}
.mars3d-distance-legend{
display: none !important;
}
.mars3d-container {
height: 100%;
width: 100vw;
overflow: hidden;
}
/* 重写Cesium的css */
/**cesium按钮背景色*/
.cesium-button {
background-color: #3f4854;
color: #e6e6e6;
fill: #e6e6e6;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
line-height: 32px;
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input {
background-color: rgba(63, 72, 84, 0.7);
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
background-color: rgba(63, 72, 84, 0.9);
}
.cesium-viewer-geocoderContainer .search-results {
background-color: #3f4854;
}
.cesium-geocoder-searchButton {
background-color: #3f4854;
}
.cesium-infoBox-title {
background-color: #3f4854;
}
.cesium-infoBox {
background: rgba(63, 72, 84, 0.9);
}
.cesium-toolbar-button img {
height: 100%;
}
.cesium-performanceDisplay-defaultContainer {
top: auto;
bottom: 35px;
right: 50px;
}
.cesium-performanceDisplay-ms,
.cesium-performanceDisplay-fps {
color: #fff;
}
/**cesium工具栏位置*/
.cesium-viewer-toolbar {
top: auto;
left: auto;
right: 12px;
bottom: 35px;
}
.cesium-viewer-toolbar > .cesium-toolbar-button,
.cesium-navigationHelpButton-wrapper,
.cesium-viewer-geocoderContainer {
margin-bottom: 5px;
float: right;
clear: both;
text-align: center;
}
.cesium-baseLayerPicker-dropDown {
bottom: 0;
right: 40px;
max-height: 700px;
margin-bottom: 5px;
}
.cesium-navigation-help {
top: auto;
bottom: 0;
right: 40px;
transform-origin: right bottom;
}
.cesium-sceneModePicker-wrapper {
width: auto;
}
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
float: left;
margin: 0 3px;
}
.cesium-viewer-geocoderContainer .search-results {
left: 0;
right: 40px;
width: auto;
position: absolute;
z-index: 999;
}
.cesium-infoBox-title {
background-color: #3f4854;
}
.cesium-infoBox {
top: 50px;
background: rgba(63, 72, 84, 0.9);
}
/**左下工具栏菜单*/
.toolbar-dropdown-menu-div {
background: rgba(43, 44, 47, 0.8);
border: 1px solid #2b2c2f;
z-index: 999;
position: absolute;
right: 60px;
bottom: 40px;
display: none;
}
.toolbar-dropdown-menu {
min-width: 110px;
padding: 0;
}
.toolbar-dropdown-menu > li {
padding: 0 3px;
margin: 2px 0;
}
.toolbar-dropdown-menu > li > a {
color: #edffff;
display: block;
padding: 4px 10px;
clear: both;
font-weight: normal;
line-height: 1.6;
white-space: nowrap;
text-decoration: none;
}
.toolbar-dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #fff;
background-color: #444d59;
}
.toolbar-dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
color: #fff;
background-color: #444d59;
}
.toolbar-dropdown-menu i {
padding-right: 5px;
}
.infoview{
position: absolute;
top: 100px;
left: 500px;
width: 50vw;
z-index: 1000;
}
</style>
src/components/mars3d/Map3.vue 0 → 100644
View file @ 2128f067
<template>
<div style="wight:100%;height:100%;position: relative;">
<div :id="`mars3d-container${mapKey}`"
:class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]"></div>
<div class="infoview">
<el-button type="primary" @click="btnStartDraw()">设置围栏</el-button>
<el-button type="primary" @click="uploaded()">上传围栏</el-button>
<div style="display: inline-block;color:red;font-weight:bolder;">每次只允许上传一个围栏，并且围栏必须是封闭图形</div>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
// 使用免费开源版本
import 'mars3d/dist/mars3d.css'
import * as mars3d from 'mars3d'
import * as Cesium from 'mars3d-cesium/Build/Cesium/Cesium'
import { initGraphicManager,initLayerManager,bindLayerContextMenu } from './js/graphicManager'
// 导入插件(其他插件类似，插件清单访问：http://mars3d.cn/dev/guide/start/install.html)
// echarts插件
// import 'mars3d-echarts'
// 为了方便使用,绑定到原型链，在其他vue文件，直接 this.mars3d 来使用
Vue.prototype.mars3d = mars3d
Vue.prototype.Cesium = mars3d.Cesium
var map;
export default {
name: 'mars3dViewer',
created(){
this.getCoordinate();
},
data(){
return{
persons:[
["115.358833", "39.276448", "500"],
["115.358638", "39.272818", "500"],
["115.368738", "39.272818", "500"],
["115.368638", "39.278518", "500"],
["115.358538", "39.278818", "500"],
["115.348538", "39.275818", "500"],
["115.351538", "39.273318", "500"],
["115.357833", "39.275448", "500"],
["115.358833", "39.276448", "500"],
["115.358638", "39.272818", "500"],
["115.368738", "39.272818", "500"],
["115.368638", "39.278518", "500"],
["115.358538", "39.278818", "500"],
["115.348538", "39.275818", "500"],
["115.351538", "39.273318", "500"],
["115.357833", "39.275448", "500"],
["115.358833", "39.276448", "500"],
["115.358638", "39.272818", "500"],
["115.368738", "39.272818", "500"],
["115.368638", "39.278518", "500"],
["115.358538", "39.278818", "500"],
["115.348538", "39.275818", "500"],
["115.351538", "39.273318", "500"],
["115.357833", "39.275448", "500"],
["115.358833", "39.276448", "500"],
["115.358638", "39.272818", "500"],
["115.368738", "39.272818", "500"],
["115.368638", "39.278518", "500"],
["115.358538", "39.278818", "500"],
["115.348538", "39.275818", "500"],
["115.351538", "39.273318", "500"],
["115.357833", "39.275448", "500"],
["115.358833", "39.276448", "500"],
["115.358638", "39.272818", "500"],
["115.368738", "39.272818", "500"],
["115.368638", "39.278518", "500"],
["115.358538", "39.278818", "500"],
["115.348538", "39.275818", "500"],
["115.351538", "39.273318", "500"],
["115.357833", "39.275448", "500"],
],
zuobianData:[],
toJavaCoordinates:[],
weilanName:[],
}
},
props: {
// 初始化配置参数
url: String,
// 地图唯一性标识
mapKey: {
type: String,
default: ''
},
// 自定义参数
options: Object,
// 是否分屏显示
compare: {
type: Boolean,
default: false
},
// 是否插入到body元素上
appendToBody: {
type: Boolean,
default: false
},
// 自定义css类名
customClass: {
type: String,
default: ''
}
},
destroy() {
this[`map${this.mapKey}`].destroy()
delete this[`map${this.mapKey}`]
},
methods: {
//后台获取数据
getCoordinate() {
let that = this;
// HttpReq.truckDispatching.screenMapSetUpQuery({size:9999}).then((res) => {
// if(true){;
// //console.log(res);
// let data1 = [];
// for(let key in res){
// that.weilanName.push(key);
// let arrays = [];
// res[key].forEach(function(item){
// var arr = [];
// arr[0] = item.lon;
// arr[1] = item.lat;
// arr[2] = "500";
// arrays.push(arr);
// })
// data1.push(arrays)
// }
// that.zuobianData = data1
//console.log("zuobianData",that.zuobianData);
//console.log("weilanName",that.weilanName);
if (this.appendToBody) {
document.body.appendChild(this.$el)
}
if (this.mapKey) {
this.initMars3d(this.options)
} else {
mars3d.Resource.fetchJson({ url: this.url }).then((data) => {
this.initMars3d(data.map3d)// 构建地图
})
}
// }
// })
},
//上传围栏数据
uploaded(){
let newData = [...this.toJavaCoordinates];
newData.pop();
if(this.toJavaCoordinates.length == 0){
this.$message({
type: 'warning',
message: '请绘制电子围栏'
});
}else{
this.$prompt('电子围栏名称不得为空且不能与之前围栏名称重复', '请输入电子围栏名称', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputErrorMessage: '输入不能为空',
inputValidator: (value) => { // 点击按钮时，对文本框里面的值进行验证
if(!value) {
return '输入不能为空';
}
},
}).then(({ value }) => {
let allObj = {};
allObj.name = value;
allObj.zuobiao = newData;
this.toJavaCoordinates = [];
console.log(allObj);
//发送添加电子围栏请求
HttpReq.truckDispatching.screenMapSetUpAdd(allObj).then((res) => {
if(res.code == 200){
this.$notify({
title: '上传电子围栏成功！',
type: 'success',
duration: 2500
});
}else{
this.$notify({
title: res.msg,
type: 'error',
duration: 2500
})
}
}).catch(function(error) { });
}).catch(() => {
this.$message({
type: 'info',
message: '取消输入'
});
});
}
},
//创建地图
initMars3d(options) {
let that = this;
if (this[`map${this.mapKey}`]) return
const mapOptions = {
...options,
...this.options,
control: {
defaultContextMenu: false, //右键菜单
},
}
// 创建三维地球场景
map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions)
this[`map${this.mapKey}`] = map
//围栏回显
that.zuobianData.forEach(function(item,index){
var graphicLayer = new mars3d.layer.GraphicLayer();
map.addLayer(graphicLayer);
initLayerManager(graphicLayer,that.weilanName[index]);
that.addGraphic_01(graphicLayer,item,that.weilanName[index]);
})
//创建矢量数据图层2
var graphicLayer1 = new mars3d.layer.GraphicLayer();
map.addLayer(graphicLayer1);
var item = `<table style="width: auto;">
<tr>
<th scope="col" colspan="2" style="text-align:center;font-size:15px;">卡车号码：鲁K12345</th>
</tr>
<tr>
<td>名称：卡车一</td>
</tr>
</table>`;
initGraphicManager(graphicLayer1,item);
//this.addGraphic_02(graphicLayer1,this.persons);
// 抛出事件
this.$emit('onload', map)
},
//围栏设置
btnStartDraw(){
this.toJavaCoordinates = [];
let that = this;
var graphicLayer3 = new mars3d.layer.GraphicLayer();
graphicLayer3.on(mars3d.EventType.click, function (event) {
var mpt = mars3d.LatLngPoint.fromCartesian(event.cartesian);
that.toJavaCoordinates.push(mpt.toString().split(','));
console.log(that.toJavaCoordinates);
});
map.addLayer(graphicLayer3);
initLayerManager(graphicLayer3);
graphicLayer3.startDraw({
type: "polyline",
style: {
color: "red",
width: 5,
clampToGround: false,
label: {
text: "围栏区域",
font_size: 18,
color: "#ffffff",
distanceDisplayCondition: true,
distanceDisplayCondition_far: 500000,
distanceDisplayCondition_near: 0,
},
},
});
},
//围栏回显
addGraphic_01(graphicLayer,positions,weilanName){
let graphic = new mars3d.graphic.PolygonEntity({
positions: positions,
style: {
color: "red",
opacity: 0.5,
outline: true,
outlineWidth: 3,
outlineColor: "#ffffff",
label: {
text: weilanName,
font_size: 18,
color: "#ffffff",
distanceDisplayCondition: true,
distanceDisplayCondition_far: 500000,
distanceDisplayCondition_near: 0,
},
},
});
graphicLayer.addGraphic(graphic); //还可以另外一种写法: graphic.addTo(graphicLayer)
},
//车辆轨迹
addGraphic_02(graphicLayer1,positions) {
var property = new Cesium.SampledPositionProperty();
var tempTime;
//起点
tempTime = map.clock.currentTime; //开始时间
property.addSample(tempTime, Cesium.Cartesian3.fromDegrees(positions[0][0],positions[0][1],positions[0][2]));
for(let i = 1;i < positions.length;i++){
tempTime = Cesium.JulianDate.addSeconds(tempTime, 120, new Cesium.JulianDate());
property.addSample(tempTime, Cesium.Cartesian3.fromDegrees(positions[i][0],positions[i][1],positions[i][2],));
}
var graphic = new mars3d.graphic.PathEntity({
position: property,
style: {
width: 3,
color: "#8a2e3b",
opacity: 1.0,
leadTime: 0, // 前方的路线不显示
//高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
highlight: {
type: mars3d.EventType.click,
color: "#ff0000",
},
},
label: {
text: "卡车一",
font_size: 19,
font_family: "楷体",
color: Cesium.Color.AZURE,
outline: true,
outlineColor: Cesium.Color.BLACK,
outlineWidth: 2,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
pixelOffset: new Cesium.Cartesian2(10, -25), //偏移量
},
model: {
url: "//data.mars3d.cn/gltf/mars/car/tufangche.glb",
scale: 0.1,
minimumPixelSize: 50,
},
});
graphicLayer1.addGraphic(graphic); //还可以另外一种写法: graphic.addTo(graphicLayer)
},
getSampledPositionProperty(points){
let property = new Cesium.SampledPositionProperty();
let start = this.map.clock.currentTime;
let positions = mars3d.LatLngArray.toCartesians(points);
for (let i = 0; i < positions.length; i++) {
let time = Cesium.JulianDate.addSeconds(start, i * 20, new Cesium.JulianDate());
let position = positions[i];
property.addSample(time, position);
}
return property;
},
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style >
.cesium-viewer-toolbar{
display: none !important;
}
.mars3d-compass{
display: none !important;
}
.mars3d-locationbar{
display: none !important;
}
.mars3d-distance-legend{
display: none !important;
}
.mars3d-container {
height: 100%;
width: 100vw;
overflow: hidden;
}
/* 重写Cesium的css */
/**cesium按钮背景色*/
.cesium-button {
background-color: #3f4854;
color: #e6e6e6;
fill: #e6e6e6;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
line-height: 32px;
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input {
background-color: rgba(63, 72, 84, 0.7);
}
.cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
background-color: rgba(63, 72, 84, 0.9);
}
.cesium-viewer-geocoderContainer .search-results {
background-color: #3f4854;
}
.cesium-geocoder-searchButton {
background-color: #3f4854;
}
.cesium-infoBox-title {
background-color: #3f4854;
}
.cesium-infoBox {
background: rgba(63, 72, 84, 0.9);
}
.cesium-toolbar-button img {
height: 100%;
}
.cesium-performanceDisplay-defaultContainer {
top: auto;
bottom: 35px;
right: 50px;
}
.cesium-performanceDisplay-ms,
.cesium-performanceDisplay-fps {
color: #fff;
}
/**cesium工具栏位置*/
.cesium-viewer-toolbar {
top: auto;
left: auto;
right: 12px;
bottom: 35px;
}
.cesium-viewer-toolbar > .cesium-toolbar-button,
.cesium-navigationHelpButton-wrapper,
.cesium-viewer-geocoderContainer {
margin-bottom: 5px;
float: right;
clear: both;
text-align: center;
}
.cesium-baseLayerPicker-dropDown {
bottom: 0;
right: 40px;
max-height: 700px;
margin-bottom: 5px;
}
.cesium-navigation-help {
top: auto;
bottom: 0;
right: 40px;
transform-origin: right bottom;
}
.cesium-sceneModePicker-wrapper {
width: auto;
}
.cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
float: left;
margin: 0 3px;
}
.cesium-viewer-geocoderContainer .search-results {
left: 0;
right: 40px;
width: auto;
position: absolute;
z-index: 999;
}
.cesium-infoBox-title {
background-color: #3f4854;
}
.cesium-infoBox {
top: 50px;
background: rgba(63, 72, 84, 0.9);
}
/**左下工具栏菜单*/
.toolbar-dropdown-menu-div {
background: rgba(43, 44, 47, 0.8);
border: 1px solid #2b2c2f;
z-index: 999;
position: absolute;
right: 60px;
bottom: 40px;
display: none;
}
.toolbar-dropdown-menu {
min-width: 110px;
padding: 0;
}
.toolbar-dropdown-menu > li {
padding: 0 3px;
margin: 2px 0;
}
.toolbar-dropdown-menu > li > a {
color: #edffff;
display: block;
padding: 4px 10px;
clear: both;
font-weight: normal;
line-height: 1.6;
white-space: nowrap;
text-decoration: none;
}
.toolbar-dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #fff;
background-color: #444d59;
}
.toolbar-dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
color: #fff;
background-color: #444d59;
}
.toolbar-dropdown-menu i {
padding-right: 5px;
}
.infoview{
position: absolute;
top: 10px;
left: 10px;
width: 50vw;
z-index: 1000;
}
</style>
src/views/carManagement/carTrajectory/index.vue
View file @ 2128f067
......@@ -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
View file @ 2128f067
......@@ -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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment