<template>
|
<div class="map-box">
|
<div class="mapheader">
|
<div class="in-top-box flex ju-sb align-c">
|
<div class="flex">
|
<div class="header-title-i">{{xlname}}</div>
|
<div class="header-temp"></div>
|
</div>
|
<div class="flex">
|
<div class="flex align-c"></div>
|
<div class="header-temp"></div>
|
<div class="flex align-c">
|
<img class="close-img-map" src="../../assets/map/icon_close_s@2x.png" alt="" @click="closediv">
|
</div>
|
</div>
|
</div>
|
</div>
|
<div id="linemap"></div>
|
<div class="zhibiao">
|
<div class="zhibiaoitemA">
|
<div class="item1">{{pingjuechesu}}</div>
|
<div class="item2">平均车速(km/h)</div>
|
</div>
|
<div style="width:10px;"></div>
|
<div class="zhibiaoitemB">
|
<div class="item1">{{yongduqingkuang}}</div>
|
<div class="item2">拥堵情况</div>
|
</div>
|
</div>
|
<div class="zhuangshi">
|
<div class="zhuangshitext">{{stationTypeName}}</div>
|
<img class="zhuangshi-img-size" src="../../assets/map/shuangshi.png" alt="">
|
</div>
|
<div class="tuli">
|
<div class="green"></div>
|
<div class="yellow"></div>
|
<div class="red"></div>
|
<div class="sleepred"></div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import * as maptalks from "maptalks";
|
import mapboxgl from "mapbox-gl";
|
import "maptalks/dist/maptalks.css";
|
import { MapboxglLayer } from "maptalks.mapboxgl";
|
import xianluyd from '../../assets/json/xianluyd.json';
|
import { message } from 'ant-design-vue'
|
|
export default {
|
name: "linemap",
|
data() {
|
return {
|
xlname: "liyu",
|
stationTypeName: "标准线",
|
pingjuechesu: "14",
|
yongduqingkuang: "一般",
|
linemap: null,
|
luxianyongdu: null,
|
LineType: {
|
"畅通": "#21A963",
|
"基本畅通": "#FCAC17",
|
"拥堵": "#F93A43",
|
"非常拥堵": "#931E23"
|
}
|
};
|
},
|
mounted() {
|
this.initMap();
|
// this.loadyongdu();
|
},
|
methods: {
|
initMap() {
|
mapboxgl.accessToken = "pk.eyJ1Ijoiam9saW5lZHUiLCJhIjoiY2txb2ZuY2lvMDM5aDJ3bzFnaWlxa2I3MSJ9.-qa5dZYXif7kWJUgOlBz-g";
|
this.linemap = new maptalks.Map("linemap", {
|
center: [113.576892, 22.271644],
|
zoom: 4,
|
baseLayer: new MapboxglLayer("tile", {
|
glOptions: {
|
'style': 'mapbox://styles/jolinedu/ckxiss0v2k3m714lghbdlqpku'
|
},
|
}).on("layerload", function() {
|
}),
|
});
|
this.luxianyongdu = new maptalks.VectorLayer('luxianyongdulayer',null,{zIndex:0}).addTo(this.linemap);
|
if(this.linemap.isLoaded()){
|
this.linemap.animateTo({
|
zoom: 13,
|
center: [113.576892,22.271644],
|
pitch: 30
|
}, {
|
duration : 5000,
|
easing : 'out'
|
}, function(frame) {
|
if (frame.state.playState === 'finished') {
|
}
|
});
|
}
|
},
|
|
loadyongdu(datas) {
|
let lines = []
|
if(this.linemap.isLoaded()){
|
let layer = this.linemap.getLayer("luxianyongdulayer");
|
if(!layer.isEmpty()){
|
layer.clear();
|
}
|
for (let index = 0; index < datas.length; index++) {
|
const element = datas[index];
|
if(index == 0) this.stationTypeName = element.lineType;
|
lines.push(new maptalks.LineString(element.placeList, {
|
arrowStyle : null, // arrow-style : now we only have classic
|
arrowPlacement : 'vertex-last', // arrow's placement: vertex-first, vertex-last, vertex-firstlast, point
|
visible : true,
|
editable : true,
|
cursor : null,
|
shadowBlur : 0,
|
shadowColor : 'black',
|
draggable : false,
|
dragShadow : false, // display a shadow during dragging
|
drawOnAxis : null, // force dragging stick on a axis, can be: x, y
|
symbol: {
|
'lineColor' : this.LineType[element.jamRange],
|
'lineWidth' : 2
|
}
|
})
|
)
|
}
|
this.luxianyongdu.addGeometry(lines)
|
this.linemap.animateTo({
|
zoom : this.linemap.getFitZoom(this.luxianyongdu.getExtent())-1,
|
center : this.luxianyongdu.getExtent().getCenter()
|
}, {
|
duration : 500,
|
easing : 'out'
|
})
|
}
|
},
|
|
closediv(){
|
this.$emit("closelinemap")
|
},
|
|
getSelectByLineId(row){
|
this.xlname = row.lineName,
|
this.stationTypeName = "标准线",
|
this.pingjuechesu = row.runningSpeed,
|
this.yongduqingkuang = row.jamRange,
|
this.$axios.get(this.$Interface.line.getJamMapLineById, {
|
params: {
|
lineName: row.lineName,
|
lineType: row.lineType,
|
ontimeupdate: row.oneDate
|
},
|
}).then((res) => {
|
if(res.code == 0) {
|
if(res.data){
|
this.loadyongdu(res.data)
|
} else {
|
message.warning('获取数据为空!')
|
}
|
} else {
|
message.warning('您当前网络不稳定,未获取到数据!')
|
}
|
});
|
}
|
}
|
};
|
</script>
|
<style lang="less">
|
.map-box{
|
display: flex;
|
position: absolute;
|
top: 5vw;
|
right: 5vw;
|
width: 90vw;
|
height: 80vh;
|
z-index: 99;
|
opacity: 1;
|
background: linear-gradient(180deg,#06203f, #08141c);
|
border: 2px solid #2a488a;
|
.mapheader{
|
width:100%;
|
height:44px;
|
background:url("../../assets/map/tububeijing.png") no-repeat center/cover;
|
.header-title-i{
|
padding-left: 20px;
|
color:#333;
|
font-weight: 600;
|
font-size:16px;
|
}
|
}
|
#linemap {
|
display: flex;
|
position: absolute;
|
top:32px;
|
width: 100%;
|
height: calc(100% - 32px);
|
z-index: 99;
|
}
|
.zhuangshi {position:absolute;right:2px;bottom:2px;z-index: 999;}
|
.zhuangshitext {position:absolute;bottom:30px;right:25px;transform: rotate(-45deg);}
|
.tuli {
|
position:absolute;
|
left:10px;
|
bottom:10px;
|
z-index: 999;
|
display: flex;
|
width: 120px;
|
justify-content: space-evenly;
|
.green {
|
width: 24px;
|
height: 4px;
|
background: #21a963;
|
}
|
.yellow {
|
width: 24px;
|
height: 4px;
|
background: #fcac17;
|
}
|
.red {
|
width: 24px;
|
height: 4px;
|
background: #f93a43;
|
}
|
.sleepred {
|
width: 24px;
|
height: 4px;
|
background: #931e23;
|
}
|
}
|
.zhibiao{
|
display: flex;
|
position:absolute;
|
right:2px;
|
top:40px;
|
z-index: 999;
|
.zhibiaoitemA {
|
display: flex;
|
flex-direction: column;
|
width:126px;
|
height: 154px;
|
// justify-content: center;
|
align-items: center;
|
background: url("../../assets/center/center_bg2.png") no-repeat center/cover;
|
.item1 {
|
display:flex;
|
flex:1;
|
align-items: center;
|
}
|
.item2 {
|
display:flex;
|
height:40px;
|
}
|
}
|
.zhibiaoitemB {
|
display: flex;
|
flex-direction: column;
|
// justify-content: center;
|
align-items: center;
|
width:126px;
|
height: 154px;
|
background: url("../../assets/center/center_bg6.png") no-repeat center/cover;
|
.item1 {
|
display:flex;
|
flex:1;
|
align-items: center;
|
}
|
.item2 {
|
display:flex;
|
height:40px;
|
}
|
}
|
}
|
}
|
.maptalks-attribution {
|
display: none;
|
}
|
</style>
|
