Skip to content

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

修改

parent d14e4a4b
Show whitespace changes
Inline Side-by-side
Showing with 1379 additions and 11 deletions
public/config/config.json 0 → 100644
View file @ b1f1d06b
{
"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
View file @ b1f1d06b
......@@ -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/components/mars3d/Map.vue 0 → 100644
View file @ b1f1d06b
<template>
<div style="wight:100%;height:100vh;">
<div :id="`mars3d-container${mapKey}`"
:class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]"></div>
<div class="infoview">
<!-- <el-input id="btnStartDraw" type="button" class="btn btn-primary" value="设置围栏" title="在图上绘制矢量数据" /> -->
<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 { 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.357538", "39.274818", "500"],
["115.358638", "39.274818", "500"],
["115.358738", "39.275218", "500"],
["115.358638", "39.275518", "500"],
["115.358538", "39.275718", "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);
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: true, //右键菜单
},
}
// 创建三维地球场景
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]);
})
//创建矢量数据图层1
// var graphicLayer = new mars3d.layer.GraphicLayer();
// map.addLayer(graphicLayer);
// initLayerManager(graphicLayer);
// this.addGraphic_01(graphicLayer,this.persons);
//创建矢量数据图层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;">员工编号：002</th>
</tr>
<tr>
<td>姓名：员工二</td>
</tr>
<tr>
<td>性别：女</td>
</tr>
</table>`;
initGraphicManager(graphicLayer1,item);
//this.addGraphic_02(graphicLayer1,this.coordinates);
// 抛出事件
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: 5,
color: "#8a2e3b",
opacity: 1.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/firedrill/xiaofangyuan-run.gltf",
scale: 20,
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%;
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;
z-index: 9999;
}
.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: 991;
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/js/graphicManager.js 0 → 100644
View file @ b1f1d06b
//entity示例中的图层通用js
//在图层级处理一些事物
import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
export function initLayerManager(graphicLayer,index) {
let rowName = index;
//在layer上绑定监听事件
graphicLayer.on(mars3d.EventType.click, function (event) {
//console.log("监听layer，单击了矢量对象", event);
// var mpt = mars3d.LatLngPoint.fromCartesian(event.cartesian);
// console.log(mpt.toString(), "位置信息");
// coordinates.push(mpt.toString().split(','));
// console.log(coordinates);
});
// graphicLayer.on(mars3d.EventType.mouseOver, function(event) {
// console.log('监听layer，鼠标移入了矢量对象', event)
// })
// graphicLayer.on(mars3d.EventType.mouseOut, function(event) {
// console.log('监听layer，鼠标移出了矢量对象', event)
// })
//可在图层上绑定popup,对所有加到这个图层的矢量数据都生效
bindLayerPopup(graphicLayer);
$("#chkPopup").change(function () {
let val = $(this).is(":checked");
if (val) {
bindLayerPopup(graphicLayer);
} else {
graphicLayer.unbindPopup();
}
});
//可在图层上绑定tooltip,对所有加到这个图层的矢量数据都生效
$("#chkTooltip").change(function () {
let val = $(this).is(":checked");
if (val) {
graphicLayer.bindTooltip("我是layer上绑定的Tooltip");
} else {
graphicLayer.unbindTooltip();
}
});
//可在图层绑定右键菜单,对所有加到这个图层的矢量数据都生效
bindLayerContextMenu(graphicLayer,rowName);
$("#chkContextMenu").change(function () {
let val = $(this).is(":checked");
if (val) {
bindLayerContextMenu(graphicLayer,rowName);
} else {
graphicLayer.unbindContextMenu(true);
}
});
$("#chkHasEdit").change(function () {
let val = $(this).is(":checked");
graphicLayer.hasEdit = val; //启用编辑
});
$("#chkShow").change(function () {
let val = $(this).is(":checked");
graphicLayer.show = val; //显示隐藏
});
$("#btnClear").click(function () {
graphicLayer.clear();
});
$("#btnExpFile").click(function () {
// window.layer.msg('该功能在开发完善中……')
// return
if (graphicLayer.length === 0) {
window.layer.msg("当前没有标注任何数据，无需保存！");
return;
}
let geojson = graphicLayer.toGeoJSON();
haoutil.file.downloadFile("我的标注.json", JSON.stringify(geojson));
});
$("#btnImpFile").click(function () {
$("#input_draw_file").click();
});
function clearSelectFile() {
if (!window.addEventListener) {
document.getElementById("input_draw_file").outerHTML += ""; //IE
} else {
document.getElementById("input_draw_file").value = ""; //FF
}
}
$("#input_draw_file").change(function (e) {
let file = this.files[0];
let fileName = file.name;
let fileType = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase();
if (fileType == "json" || fileType == "geojson") {
let reader = new FileReader();
reader.readAsText(file, "UTF-8");
reader.onloadend = function (e) {
let json = this.result;
graphicLayer.loadGeoJSON(json, {
flyTo: true,
});
clearSelectFile();
};
} else if (fileType == "kml") {
let reader = new FileReader();
reader.readAsText(file, "UTF-8");
reader.onloadend = function (e) {
let strkml = this.result;
kgUtil.toGeoJSON(strkml).then((geojoson) => {
console.log("kml2geojson", geojoson);
graphicLayer.loadGeoJSON(geojoson, {
flyTo: true,
// symbol: function (attr, style, featue) {
// let geoType = featue.geometry?.type
// if (geoType == 'Point') {
// return {
// image: 'img/marker/di3.png',
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
// scale: 0.4,
// label: {
// text: attr.name,
// font_size: 18,
// color: '#ffffff',
// outline: true,
// outlineColor: '#000000',
// pixelOffsetY: -50,
// scaleByDistance: true,
// scaleByDistance_far: 990000,
// scaleByDistance_farValue: 0.3,
// scaleByDistance_near: 10000,
// scaleByDistance_nearValue: 1,
// },
// }
// }
// return style
// },
});
clearSelectFile();
});
clearSelectFile();
};
} else if (fileType == "kmz") {
//加载input文件控件的二进制流
kgUtil.toGeoJSON(file).then((geojoson) => {
console.log("kmz2geojson", geojoson);
graphicLayer.loadGeoJSON(geojoson, {
flyTo: true,
});
clearSelectFile();
});
} else {
window.layer.msg("暂不支持 " + fileType + " 文件类型的数据！");
clearSelectFile();
}
});
}
export function bindLayerPopup(graphicLayer) {
graphicLayer.bindPopup(function (event) {
//let attr = event.graphic?.attr || {};
//attr.text = "围栏";
// attr["视频"] = `<video src='http://data.mars3d.cn/file/video/lukou.mp4' controls autoplay style="width: 300px;" ></video>`;
return mars3d.Util.getTemplateHtml({ title: "围栏区域", template: "all", attr: attr });
});
}
export function bindLayerContextMenu(graphicLayer,index) {
let rowNameId = index;
graphicLayer.bindContextMenu([
// {
// text: "开始编辑对象",
// iconCls: "fa fa-edit",
// show: function (e) {
// let graphic = e.graphic;
// if (!graphic || !graphic.startEditing) {
// return false;
// }
// return !graphic.isEditing;
// },
// callback: function (e) {
// let graphic = e.graphic;
// if (!graphic) {
// return false;
// }
// if (graphic) {
// graphicLayer.startEditing(graphic);
// }
// },
// },
// {
// text: "停止编辑对象",
// iconCls: "fa fa-edit",
// show: function (e) {
// let graphic = e.graphic;
// if (!graphic) {
// return false;
// }
// return graphic.isEditing;
// },
// callback: function (e) {
// let graphic = e.graphic;
// if (!graphic) {
// return false;
// }
// if (graphic) {
// graphicLayer.stopEditing(graphic);
// }
// },
// },
{
text: "删除对象",
iconCls: "fa fa-trash-o",
show: (event) => {
let graphic = event.graphic;
if (!graphic || graphic.isDestroy) {
return false;
} else {
return true;
}
},
callback: function (e) {
console.log(e);
let graphic = e.graphic;
if (!graphic) {
return;
}
//console.log(rowNameId);
HttpReq.truckDispatching.screenMapSetUpDel([rowNameId]).then((res) => {
if(res.status == 400){
this.$notify({
title: res.msg,
type: 'error',
duration: 2500
})
}else{
this.$notify({
title: '删除成功！',
type: 'success',
duration: 2500
});
}
})
graphicLayer.removeGraphic(graphic);
},
},
// {
// text: "计算长度",
// iconCls: "fa fa-medium",
// show: function (e) {
// let graphic = e.graphic;
// if (!graphic) {
// return false;
// }
// return (
// graphic.type === "polyline" ||
// graphic.type === "polylineP" ||
// graphic.type === "curve" ||
// graphic.type === "curveP" ||
// graphic.type === "polylineVolume" ||
// graphic.type === "polylineVolumeP" ||
// graphic.type === "corridor" ||
// graphic.type === "corridorP" ||
// graphic.type === "wall" ||
// graphic.type === "wallP"
// );
// },
// callback: function (e) {
// let graphic = e.graphic;
// let strDis = mars3d.MeasureUtil.formatDistance(graphic.distance);
// alert("该对象的长度为:" + strDis);
// },
// },
// {
// text: "计算周长",
// iconCls: "fa fa-medium",
// show: function (e) {
// let graphic = e.graphic;
// if (!graphic) {
// return false;
// }
// return (
// graphic.type === "circle" ||
// graphic.type === "circleP" ||
// graphic.type === "rectangle" ||
// graphic.type === "rectangleP" ||
// graphic.type === "polygon" ||
// graphic.type === "polygonP"
// );
// },
// callback: function (e) {
// let graphic = e.graphic;
// let strDis = mars3d.MeasureUtil.formatDistance(graphic.distance);
// alert("该对象的周长为:" + strDis);
// },
// },
// {
// text: "计算面积",
// iconCls: "fa fa-reorder",
// show: function (e) {
// let graphic = e.graphic;
// if (!graphic) {
// return false;
// }
// return (
// graphic.type === "circle" ||
// graphic.type === "circleP" ||
// graphic.type === "rectangle" ||
// graphic.type === "rectangleP" ||
// graphic.type === "polygon" ||
// graphic.type === "polygonP" ||
// graphic.type === "scrollWall" ||
// graphic.type === "water"
// );
// },
// callback: function (e) {
// let graphic = e.graphic;
// let strArea = mars3d.MeasureUtil.formatArea(graphic.area);
// alert("该对象的面积为:" + strArea);
// },
// },
]);
}
//也可以在单个Graphic上做个性化管理及绑定操作
export function initGraphicManager(graphic,item) {
//3.在graphic上绑定监听事件
// graphic.on(mars3d.EventType.click, function(event) {
// console.log('监听graphic，单击了矢量对象', event)
// })
// graphic.on(mars3d.EventType.mouseOver, function(event) {
// console.log('监听graphic，鼠标移入了矢量对象', event)
// })
// graphic.on(mars3d.EventType.mouseOut, function(event) {
// console.log('监听graphic，鼠标移出了矢量对象', event)
// })
//绑定Tooltip
// graphic.bindTooltip('我是graphic上绑定的Tooltip') //.openTooltip()
//绑定Popup
graphic.bindPopup(item);
//绑定右键菜单
graphic.bindContextMenu([
{
text: "删除对象[graphic绑定的]",
iconCls: "fa fa-trash-o",
callback: function (e) {
let graphic = e.graphic;
if (graphic) {
graphic.remove();
}
},
},
]);
//测试 颜色闪烁
if (graphic.startFlicker) {
graphic.startFlicker({
time: 20, //闪烁时长（秒）
maxAlpha: 0.5,
color: Cesium.Color.YELLOW,
onEnd: function () {
//结束后回调
},
});
}
}
//取区域内的随机图标
export function randomPoint() {
var jd = haoutil.math.random(116.1 * 1000, 116.6 * 1000) / 1000;
var wd = haoutil.math.random(30.8 * 1000, 31.1 * 1000) / 1000;
var height = haoutil.math.random(1000, 9000);
return new mars3d.LatLngPoint(jd, wd, height);
}
\ No newline at end of file
src/views/MLargeScreen/index.vue
View file @ b1f1d06b
......@@ -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
View file @ b1f1d06b
'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: {
......
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