L7 专注数据可视化层数据表达,目前 L7 还不支持独立的地图引擎,需要引入第三方引擎,目前支持高德地图和 MapBox 两种。
1、引入map
import { GaodeMap } from '@antv/l7-maps'; // 默认引入高德1.x
import { Scene, Marker, MarkerLayer, Popup } from '@antv/l7'
2、实例化
使用地图申请地图 token
为了支持已有地图项目快速接入 L7 的能力,L7 提供传入地图实例的方法。如果你是新项目推荐使用 Scene 初始化地图
mounted() {
this.scene = new Scene({
id: 'map',
map: new GaodeMap({
style: 'amap://styles/blue', // 样式URL
features: ['bg', 'point', 'road'],
center: [120.82128631427464, 31.48514809570474],
pitch: 0,
zoom: 10,
token: '自己申请的token',
}),
})
3、准备容器
<template>
<div style="position: relative;height: 580px;">
<div id="map"> </div>
</div>
</template>
4、data中准备数据
data() {
return {
scene: null,
markerLayer: new MarkerLayer(),
data: [
{
stationname: '抬头名称',
highway: 'xx高速',
company: 'xxx有限公司',
longitude: '经度',
latitude: '纬度',
roadname: 'xx高速',
roadnum: 'G2',
roadkm: '1184',
evninfo: {
tmwspeed: '0.1',
rainfall: '0',
dmwdir: '219',
visibility: '7864',
tmwdir: '209',
wtime: '1',
pwdir: '242',
pavetcmtemp: '17.3',
dmwspeed: '0.2',
pwspeed: '2.1',
pavetemp: '25.0',
temperature: '19.8',
humidity: '34.0',
},
},
],
}
},
5、方法中定义
initMarkerLayer() {
this.data.forEach((value) => {
var icon = document.createElement('img')
icon.src = require('@/assets/.png')
icon.setAttribute('width', '26px')
icon.setAttribute('height', '26px')
const marker = new Marker({
element: icon,
}).setLnglat({ lng: value.longitude, lat: value.latitude })
const popHtml =
"<div class='pop-title'>" +
"<img style='vertical-align: baseline;margin-right: 10px;' src='" +
require('@/assets/icons/weather/ic_clound.png') +
"' alt/>" +
value.stationname +
'</div>' +
"<div class='pop-content'>" +
"<div class='left-wind'>" +
'<p>' +
value.stationname +
' 气象监测点 ' +
value.evninfo.wtime +
' 分钟前</p>' +
"<p class='wind-direction'><img style='transform: rotate(" +
parseInt(value.evninfo.tmwdir) +
"deg)' class='wind-pointer' src='" +
require('@/assets/icons/weather/icon_wind_direction.png') +
"'/></p>" +
"<p style='color:#88888C;'>" +
this.formatWindDirection(value.evninfo.tmwdir || 0) +
'风' +
this.formatWindSpeed(value.evninfo.tmwspeed) +
'级' +
value.evninfo.tmwspeed +
'M/S</p>' +
"<p style='color:#88888C;'>阵风" +
this.formatWindSpeed(value.evninfo.pwspeed) +
'级' +
value.evninfo.pwspeed +
'M/S</p>' +
'</div>' +
"<div class='right-rain'>" +
"<p>能见度<span style='font-size: 20px;'>" +
value.evninfo.visibility +
'M</span></p>' +
"<p><img src='" +
require('@/assets/icons/weather/ic_rain.png') +
"'/></p>" +
"<p style='color:#88888C;'>总量:" +
value.evninfo.rainfall +
'mm</p>' +
'</div>' +
"<div class='bottom-rain'>" +
"<p><span><img src='" +
require('@/assets/icons/weather/ic_raindrops.png') +
"'/>" +
value.evninfo.humidity +
"%</span><span style='float: right;font-size: 20px;'>" +
value.evninfo.temperature +
'℃</span></p>' +
"<p><span>路面</span><span style='float: right;'>" +
value.evninfo.pavetemp +
'℃</span></p>' +
"<p><span>路基</span><span style='float: right;'>" +
value.evninfo.pavetcmtemp +
'℃</span></p>' +
'</div>' +
'</div>'
const popup = new Popup({
offsets: [0, 30],
}).setHTML(popHtml)
marker.setPopup(popup)
this.markerLayer.addMarker(marker)
})
this.scene.addMarkerLayer(this.markerLayer)
this.scene.render()
},
6、mounted中
mounted() {
this.$nextTick(() => {
this.initMarkerLayer()
})
},
7、style
/deep/.extra {
display: none;
}
#map {
height: 100%;
position: relative;
.btn {
position: absolute;
width: 48px;
height: 48px;
top: 13px;
cursor: pointer;
z-index: 10;
}
}
/deep/.l7-bottom.l7-left {
display: none;
}
/deep/ .l7-popup {
max-width: 385px !important;
width: 385px;
.l7-popup-tip {
border-top-color: rgba(32, 32, 44, 1);
}
.l7-popup-content {
background: rgba(32, 32, 44, 1);
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.4);
padding: 0;
color: white;
.l7-popup-close-button {
top: 12px;
right: 12px;
}
.pop-title {
background: #4abfd7;
padding: 12px;
font-size: 16px;
}
.pop-content {
background: #36373f;
font-size: 14px;
padding: 15px;
.left-wind {
display: inline-block;
vertical-align: top;
text-align: center;
width: 65%;
.wind-direction {
width: 74px !important;
height: 71px !important;
margin: 0 auto;
position: relative;
background: url('.png') no-repeat;
}
.wind-pointer {
position: absolute;
top: 50%;
left: 50%;
margin-left: -2px;
margin-top: -22px;
transform-origin: bottom;
}
}
.right-rain {
display: inline-block;
vertical-align: top;
text-align: center;
width: 35%;
}
.bottom-rain {
p {
margin: 0;
height: 30px;
line-height: 30px;
padding: 0 5px;
img {
vertical-align: baseline;
}
&:first-child {
height: 32px;
border: 1px solid rgba(0, 0, 0, 1);
color: #4abfd7;
}
&:nth-child(2) {
background: rgba(0, 0, 0, 1);
}
}
}
}
}
}