捣鼓地图简直生无可恋,不mark下真对不起浪费的脑细胞~~~
牵涉到地图加载,打点,弹窗,PointLayer那里有点繁琐,应该可以优化,交给后续吧~先上图
<div id="userMap" style="height: 100%;"></div>
import {Scene, PointLayer, Popup, Marker, Zoom} from '@antv/l7'
onMounted(() => {
initUserMap()
})
//危险企业
let dangerLayer = null
let dangerData = ref([])
//绿色企业
let greenLayer = null
let greenData = ref([])
//普通企业
let normalLayer = null
let normalData = ref([])
let pop = null
const drawMarker = (scene) => {
scene.addImage('00', require('../../assets/screen/icon_danger.png'));
scene.addImage('01', require('../../assets/screen/icon_star.png'));
ScreenService.getInstance().companyInfo().subscribe(res => {
let markerEl = null
dangerData.value = res.data.filter(dot => dot.latitude && dot.isDangerousGoodsPort);
greenData.value = res.data.filter(dot => dot.latitude && dot.isGreenPort);
normalData.value = res.data.filter(dot => dot.latitude && !dot.isGreenPort && !dot.isDangerousGoodsPort);
console.log('normalData.value',normalData.value)
console.log('greenData.value',greenData.value)
normalLayer = new PointLayer({
visible:true,
zIndex:2,
cursor:'pointer',
})
.source(normalData.value, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude'
}
})
.shape('circle')
.size(6)
.color('#0f0')
.active(true)
normalLayer.on('click', (ev) => {
sessionStorage.setItem('portId', ev.feature.id)
window.open('#/case')
})
normalLayer.on('mousemove', (ev) => {
pop = new Popup({
offsets: [ 0, 0 ],
closeButton: false,
})
.setLnglat({lng: ev.feature.longitude, lat: ev.feature.latitude})
.setHTML(`<span>${ev.feature.companyName}</span>`);
scene.addPopup(pop);
})
scene.addLayer(normalLayer);
dangerLayer = new PointLayer({
visible:true,
zIndex:10,
cursor:'pointer',
})
.source(dangerData.value, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude'
}
})
.shape('companyName', [ '00' ])
.size(15),
dangerLayer.on('click', (ev) => {
sessionStorage.setItem('portId', ev.feature.id)
window.open('#/case')
})
dangerLayer.on('mousemove', (ev) => {
pop = new Popup({
offsets: [ 0, 0 ],
closeButton: false,
})
.setLnglat({lng: ev.feature.longitude, lat: ev.feature.latitude})
.setHTML(`<span>${ev.feature.companyName}</span>`);
scene.addPopup(pop);
})
scene.addLayer(dangerLayer);
greenLayer = new PointLayer({
visible:true,
zIndex:10,
cursor:'pointer',
})
.source(greenData.value, {
parser: {
type: 'json',
x: 'longitude',
y: 'latitude'
}
})
.shape('companyName', [ '01' ])
.size(15)
greenLayer.on('click', (ev) => {
sessionStorage.setItem('portId', ev.feature.id)
window.open('#/case')
})
greenLayer.on('mousemove', (ev) => {
pop = new Popup({
offsets: [ 0, 0 ],
closeButton: false,
})
.setLnglat({lng: ev.feature.longitude, lat: ev.feature.latitude})
.setHTML(`<span>${ev.feature.companyName}</span>`);
scene.addPopup(pop);
})
scene.addLayer(greenLayer);
})
}
let map = null;
// 地图
const initUserMap = () => {
map = new GaodeMap({
pitch: 0,
style: 'dark',
mapStyle: 'amap://styles/darkblue',
center: [120.423730, 31.629810],
zoom: 10,
token: 'ced0d726cd96553ba8b5b3521671aaf4'
})
const scene = new Scene({
id: 'userMap',
map: map,
logoVisible: false,
});
scene.on('loaded', () => {
drawMarker(scene)
});
}
<style lang="scss" scoped>
:deep(.l7-popup) {
border-radius: 5px;
.l7-popup-tip {
border-top-color: rgba(23, 103, 159,.6);
}
.l7-popup-content {
padding:8px;
color: #fff;
background: rgba(23, 103, 159,.6) !important;
border: 1px solid #0e2740 !important;
.l7-popup-close-button {
fill: #fff;
}
.l7-layer-popup__value {
font-size: 16px;
color: aqua;
}
}
}
</style>