Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
N
NewTruckTerminalSyetem
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
SQL_Mou
NewTruckTerminalSyetem
Commits
c4b0866b
Commit
c4b0866b
authored
May 18, 2022
by
caicaicai
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
修改
parent
ced3451f
Changes
1
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
46 additions
and
61 deletions
+46
-61
Map.vue
src/components/mars3d/Map.vue
+46
-61
No files found.
src/components/mars3d/Map.vue
View file @
c4b0866b
...
@@ -9,7 +9,7 @@
...
@@ -9,7 +9,7 @@
<
script
>
<
script
>
import
Vue
from
'
vue
'
import
Vue
from
'
vue
'
import
{
httpGet
,
httpPostForJson
}
from
"
@/common/httpBean.js
"
;
import
{
httpGet
,
httpPostForJson
}
from
"
@/common/httpBean.js
"
;
import
{
screenMapSetUpQuery
,
carRealTimeLocationQuery2
}
from
"
@/axios/api.js
"
;
import
{
screenMapSetUpQuery
,
carRealTimeLocationQuery2
,
vehicleInformationQuery
}
from
"
@/axios/api.js
"
;
// 使用免费开源版本
// 使用免费开源版本
import
'
mars3d/dist/mars3d.css
'
import
'
mars3d/dist/mars3d.css
'
...
@@ -17,11 +17,6 @@ import * as mars3d from 'mars3d'
...
@@ -17,11 +17,6 @@ import * as mars3d from 'mars3d'
import
*
as
Cesium
from
'
mars3d-cesium/Build/Cesium/Cesium
'
import
*
as
Cesium
from
'
mars3d-cesium/Build/Cesium/Cesium
'
import
{
initGraphicManager
,
initLayerManager
,
bindLayerContextMenu
,
bindLayerPopup
}
from
'
./js/graphicManager
'
import
{
initGraphicManager
,
initLayerManager
,
bindLayerContextMenu
,
bindLayerPopup
}
from
'
./js/graphicManager
'
// 导入插件(其他插件类似,插件清单访问:http://mars3d.cn/dev/guide/start/install.html)
// echarts插件
// import 'mars3d-echarts'
// 为了方便使用,绑定到原型链,在其他vue文件,直接 this.mars3d 来使用
// 为了方便使用,绑定到原型链,在其他vue文件,直接 this.mars3d 来使用
Vue
.
prototype
.
mars3d
=
mars3d
Vue
.
prototype
.
mars3d
=
mars3d
Vue
.
prototype
.
Cesium
=
mars3d
.
Cesium
Vue
.
prototype
.
Cesium
=
mars3d
.
Cesium
...
@@ -42,6 +37,11 @@ export default {
...
@@ -42,6 +37,11 @@ export default {
areaColorData
:[],
areaColorData
:[],
carNumber
:
''
,
carNumber
:
''
,
shebeiName
:
''
,
shebeiName
:
''
,
allCarInforData
:[],
defaultjd
:
117.12111
,
defaultwd
:
36.679
,
realjd
:
117.12111
,
realwd
:
36.679
,
}
}
},
},
...
@@ -87,7 +87,13 @@ export default {
...
@@ -87,7 +87,13 @@ export default {
getCarInforFn
(
carnumber
,
equipmentName
){
getCarInforFn
(
carnumber
,
equipmentName
){
this
.
carNumber
=
carnumber
;
this
.
carNumber
=
carnumber
;
this
.
shebeiName
=
equipmentName
;
this
.
shebeiName
=
equipmentName
;
httpGet
(
vehicleInformationQuery
,{
size
:
9999
}).
then
((
res
)
=>
{
if
(
res
.
code
==
200
){
this
.
allCarInforData
=
res
.
data
.
content
;
this
.
getCoordinate
();
this
.
getCoordinate
();
}
});
},
},
//后台获取数据
//后台获取数据
getCoordinate
()
{
getCoordinate
()
{
...
@@ -146,17 +152,19 @@ export default {
...
@@ -146,17 +152,19 @@ export default {
this
[
`map
${
this
.
mapKey
}
`
]
=
map
this
[
`map
${
this
.
mapKey
}
`
]
=
map
//围栏回显
//围栏回显
that
.
zuobianData
.
forEach
(
function
(
item
,
index
){
// that.zuobianData.forEach(function(item,index){
var
graphicLayer
=
new
mars3d
.
layer
.
GraphicLayer
();
// var graphicLayer = new mars3d.layer.GraphicLayer();
map
.
addLayer
(
graphicLayer
);
// map.addLayer(graphicLayer);
initLayerManager
(
graphicLayer
,
that
.
weilanName
[
index
]);
// initLayerManager(graphicLayer,that.weilanName[index]);
that
.
addGraphic_01
(
graphicLayer
,
item
,
that
.
weilanName
[
index
],
that
.
areaColorData
[
index
]);
// that.addGraphic_01(graphicLayer,item,that.weilanName[index],that.areaColorData[index]);
})
// })
//实时位置
//实时位置1
that
.
allCarInforData
.
forEach
((
item
,
index
)
=>
{
var
graphicLayer4
=
new
mars3d
.
layer
.
GraphicLayer
();
var
graphicLayer4
=
new
mars3d
.
layer
.
GraphicLayer
();
map
.
addLayer
(
graphicLayer4
);
map
.
addLayer
(
graphicLayer4
);
that
.
addDemoGraphics
(
graphicLayer4
);
that
.
addDemoGraphics
(
graphicLayer4
,
item
.
number
,
item
.
equipmentName
,
item
.
carclass
);
})
// 抛出事件
// 抛出事件
this
.
$emit
(
'
onload
'
,
map
)
this
.
$emit
(
'
onload
'
,
map
)
...
@@ -183,12 +191,14 @@ export default {
...
@@ -183,12 +191,14 @@ export default {
});
});
graphicLayer
.
addGraphic
(
graphic
);
//还可以另外一种写法: graphic.addTo(graphicLayer)
graphicLayer
.
addGraphic
(
graphic
);
//还可以另外一种写法: graphic.addTo(graphicLayer)
},
},
//实时位置
//实时位置
1
addDemoGraphics
(
graphicLayer4
)
{
addDemoGraphics
(
graphicLayer4
,
number
,
equipmentName
,
carclass
)
{
let
that
=
this
;
let
that
=
this
;
//模型配置
const
graphic
=
new
mars3d
.
graphic
.
ModelPrimitive
({
const
graphic
=
new
mars3d
.
graphic
.
ModelPrimitive
({
style
:
{
style
:
{
url
:
"
//data.mars3d.cn/gltf/mars/car/tufangche.glb
"
,
url
:
carclass
==
'
电铲
'
?
'
//data.mars3d.cn/gltf/mars/car/wajueji.glb
'
:
'
//data.mars3d.cn/gltf/mars/car/tufangche.glb
'
,
scale
:
0.1
,
scale
:
0.1
,
minimumPixelSize
:
50
,
minimumPixelSize
:
50
,
// 高亮时的样式(默认为鼠标移入,也可以指定type:'click'单击高亮),构造后也可以openHighlight、closeHighlight方法来手动调用
// 高亮时的样式(默认为鼠标移入,也可以指定type:'click'单击高亮),构造后也可以openHighlight、closeHighlight方法来手动调用
...
@@ -200,7 +210,7 @@ export default {
...
@@ -200,7 +210,7 @@ export default {
},
},
label
:
{
label
:
{
// 不需要文字时,去掉label配置即可
// 不需要文字时,去掉label配置即可
text
:
that
.
carN
umber
,
text
:
n
umber
,
font_size
:
22
,
font_size
:
22
,
color
:
"
#ff0000
"
,
color
:
"
#ff0000
"
,
outline
:
true
,
outline
:
true
,
...
@@ -212,57 +222,32 @@ export default {
...
@@ -212,57 +222,32 @@ export default {
}
}
},
},
})
})
//载入图层
graphicLayer4
.
addGraphic
(
graphic
)
graphicLayer4
.
addGraphic
(
graphic
)
//
设置动态
位置
//
初始
位置
graphicLayer4
.
eachGraphic
((
graphic
)
=>
{
graphicLayer4
.
eachGraphic
((
graphic
)
=>
{
graphic
.
addDynamicPosition
(
Cesium
.
Cartesian3
.
fromDegrees
(
117.12111
,
36.679
,
500
))
// 首次出现的位置
graphic
.
addDynamicPosition
(
Cesium
.
Cartesian3
.
fromDegrees
(
that
.
defaultjd
,
that
.
defaultwd
,
500
))
})
})
//五秒后位置
graphicLayer4
.
eachGraphic
((
graphic
)
=>
{
graphicLayer4
.
eachGraphic
((
graphic
)
=>
{
graphic
.
addDynamicPosition
(
Cesium
.
Cartesian3
.
fromDegrees
(
117.12111
,
36.679
,
500
),
5
)
// 按5秒运动至指定位置
graphic
.
addDynamicPosition
(
Cesium
.
Cartesian3
.
fromDegrees
(
that
.
defaultjd
,
that
.
defaultwd
,
500
),
5
)
})
})
//定时更新动态位置
// 定时更新动态位置(setInterval为演示)
setInterval
(()
=>
{
setInterval
(()
=>
{
httpGet
(
carRealTimeLocationQuery2
,{
name
:
that
.
shebei
Name
}).
then
((
res
)
=>
{
httpGet
(
carRealTimeLocationQuery2
,{
name
:
equipment
Name
}).
then
((
res
)
=>
{
if
(
res
.
data
){
if
(
res
.
data
){
let
jd
=
res
.
data
.
lon
;
let
wd
=
res
.
data
.
lat
;
graphicLayer4
.
eachGraphic
((
graphic
)
=>
{
graphicLayer4
.
eachGraphic
((
graphic
)
=>
{
graphic
.
addDynamicPosition
(
Cesium
.
Cartesian3
.
fromDegrees
(
jd
,
wd
,
500
),
5
)
graphic
.
addDynamicPosition
(
Cesium
.
Cartesian3
.
fromDegrees
(
res
.
data
.
lon
,
res
.
data
.
lat
,
500
),
5
)
})
})
}
else
{
}
else
{
let
jd
=
0
;
let
wd
=
0
;
graphicLayer4
.
eachGraphic
((
graphic
)
=>
{
graphicLayer4
.
eachGraphic
((
graphic
)
=>
{
graphic
.
addDynamicPosition
(
Cesium
.
Cartesian3
.
fromDegrees
(
jd
,
wd
,
500
),
5
)
graphic
.
addDynamicPosition
(
Cesium
.
Cartesian3
.
fromDegrees
(
that
.
defaultjd
,
that
.
default
wd
,
500
),
5
)
})
})
}
}
});
});
},
4000
)
},
5000
)
},
// 取区域内的随机点
randomPoint
()
{
const
jd
=
this
.
random
(
117.130666
*
1000
,
117.130241
*
1000
)
/
1000
const
wd
=
this
.
random
(
36.655207
*
1000
,
36.665207
*
1000
)
/
1000
console
.
log
(
"
jd
"
,
jd
);
console
.
log
(
"
wd
"
,
wd
);
console
.
log
(
Cesium
.
Cartesian3
.
fromDegrees
(
jd
,
wd
,
500
));
return
Cesium
.
Cartesian3
.
fromDegrees
(
jd
,
wd
,
500
)
},
random
(
min
,
max
)
{
return
Math
.
floor
(
Math
.
random
()
*
(
max
-
min
+
1
)
+
min
)
},
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
;
},
},
}
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment