vue项目开发使用到了antv/l7地图
引入高德地图
<script
type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=your key"
></script>
<script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
安装antv/l7
npm i @antv/l7 --save
npm i @antv/l7-maps --save
使用
<template>
<div id="l7-map" class="allmap"></div>
</template>
<script>
import {Scene, Marker, Popup} from '@antv/l7';
import {GaodeMap} from '@antv/l7-maps';
export default {
name: "map3d",
components: {},
props: {
id: {
type: String,
default() {
return '';
}
}
},
data() {
return {
status: '',
isRouterAlive: true,
list: [
{
markerPoint: {lng: 116.401, lat: 39.910},
name: '北京',
num: '100',
status: 1,
show: false,
}, {
markerPoint: {lng: 114.48, lat: 38.03},
name: '河北',
num: '100',
status: 1,
show: false,
}, {
markerPoint: {lng: 117.494021, lat: 39.252968},
name: '天津',
num: '100',
status: 1,
show: false,
}, {
markerPoint: {lng: 118.965805, lat: 36.333689},
name: '山东',
num: '100',
status: 1,
show: false,
}, {
markerPoint: {lng: 128.826756, lat: 47.499887},
name: '黑龙江',
num: '100',
status: 1,
show: false,
}, {
markerPoint: {lng: 118.745037, lat: 44.421612},
name: '内蒙古',
num: '100',
status: 1,
show: false,
}, {
markerPoint: {lng: 126.398313, lat: 43.195906},
name: '吉林',
num: '100',
status: 1,
show: false,
}, {
markerPoint: {lng: 122.718853, lat: 41.393098},
name: '辽宁',
num: '100',
status: 1,
show: false,
}, {
markerPoint: {lng: 112.269189, lat: 36.867724},
name: '山西',
num: '100',
status: 1,
show: false,
}, {
markerPoint: {lng: 86.733741, lat: 42.27368},
name: '新疆',
num: '100',
status: 1,
show: false,
}, {
markerPoint: {lng: 103.364897, lat: 30.983269},
name: '四川',
num: '100',
status: 1,
show: false,
}, {
markerPoint: {lng: 109.104854, lat: 23.763631},
name: '广西',
num: '100',
status: 1,
show: false,
}, {
markerPoint: {lng: 114.035329, lat: 23.763631},
name: '广东',
num: '100',
status: 1,
show: false,
}, {
markerPoint: {lng: 118.303502, lat: 26.111966},
name: '福建',
num: '100',
status: 1,
show: false,
}, {
markerPoint: {lng: 121.688605, lat: 30.983269},
name: '上海',
num: '100',
status: 1,
show: false,
}, {
markerPoint: {lng: 117.199664, lat: 32.617286},
name: '安徽',
num: '100',
status: 1,
show: false,
}, {
markerPoint: {lng: 119.480929, lat: 33.484943},
name: '江苏',
num: '100',
status: 1,
show: false,
}, {
markerPoint: {lng: 107.117946, lat: 26.64227},
name: '贵州',
num: '100',
status: 1,
show: false,
}, {
markerPoint: {lng: 112.269189, lat: 31.426061},
name: '湖北',
num: '100',
status: 1,
show: false,
}, {
markerPoint: {lng: 95.711622, lat: 35.915757},
name: '青海',
num: '100',
status: 1,
show: false,
}, {
markerPoint: {lng: 88.279114, lat: 31.489146},
name: '西藏',
num: '100',
status: 1,
show: false,
}, {
markerPoint: {lng: 106.308465, lat: 37.162795},
name: '宁夏',
num: '100',
status: 1,
show: false,
},],
map: null,
scene: null,
index: null
}
},
watch: {},
mounted() {
this.initMap()
},
methods: {
setCenter(data, i) {
var that = this;
console.log(this.scene.markerService.markers[i])
let datas = this.scene.markerService.markers;
for (var s = 0; s < datas.length; s++) {
this.scene.markerService.markers[s].popup.remove()
}
that.scene.setCenter(data.map(Number));
console.log(this.scene.markerService.markers[i])
this.scene.markerService.markers[i].onMapClick()
},
initMap() {
var that = this;
that.map = new AMap.Map('l7-map', {
scrollWheel: true,
viewMode: '3D',
resizeEnable: true,
zoom: 5,
pitch: 50,
rotation: 0,
maxZoom: 30,
minZoom: 0,
mapStyle: 'amap://styles/blue',
features: ['bg', 'road', 'building'],
center: [105.404, 25.915],
});
that.scene = new Scene({
id: 'l7-map',
map: new GaodeMap({
mapInstance: that.map
})
});
that.scene.on('loaded', () => {
let data = this.list;
for (var i = 0; i < data.length; i++) {
const popup = new Popup({offsets: [0, 20]}).setHTML('<p>名称:' + data[i].name + i + '</p><br><p>车位数:100</p><br><p>是否支持电子支付:是</p>');
var el = document.createElement('label');
el.className = 'labelclass';
el.textContent = 'cs';
el.style.background = 'red';
const marker = new Marker(
{color: '#e92c2c', element: el, offsets: [-20, -20]}
).setLnglat([data[i].markerPoint.lng, data[i].markerPoint.lat]).setPopup(popup);
that.scene.addMarker(marker);
}
});
}
}
}
</script>
<style lang="scss">
.allmap {
width: 100%;
height: 100%;
position: relative;
z-index: -1;
}
.l7-marker {
svg {
width: 30px;
height: 30px;
color: #e92c2c;
}
}
.l7-popup-tip, .l7-popup-close-button {
display: none;
}
.l7-popup-content {
padding: 15px;
height: auto !important;
-webkit-transition: all .35s ease-out;
transition: all .35s ease-out;
background: -webkit-gradient(linear, right top, left top, from(#77f0ff), to(#77f0ff)) 0 0 no-repeat, -webkit-gradient(linear, left top, left bottom, from(#77f0ff), to(#77f0ff)) 0 0 no-repeat, -webkit-gradient(linear, right top, left top, from(#77f0ff), to(#77f0ff)) 100% 0 no-repeat, -webkit-gradient(linear, left top, left bottom, from(#77f0ff), to(#77f0ff)) 100% 0 no-repeat, -webkit-gradient(linear, right top, left top, from(#77f0ff), to(#77f0ff)) 0 100% no-repeat, -webkit-gradient(linear, left top, left bottom, from(#77f0ff), to(#77f0ff)) 0 100% no-repeat, -webkit-gradient(linear, right top, left top, from(#77f0ff), to(#77f0ff)) 100% 100% no-repeat, -webkit-gradient(linear, right top, left top, from(#77f0ff), to(#77f0ff)) 100% 100% no-repeat rgba(0, 6, 20, .7) !important;
background: linear-gradient(
270deg, #77f0ff, #77f0ff) 0 0 no-repeat, linear-gradient(
180deg, #77f0ff, #77f0ff) 0 0 no-repeat, linear-gradient(
270deg, #77f0ff, #77f0ff) 100% 0 no-repeat, linear-gradient(
180deg, #77f0ff, #77f0ff) 100% 0 no-repeat, linear-gradient(
270deg, #77f0ff, #77f0ff) 0 100% no-repeat, linear-gradient(
180deg, #77f0ff, #77f0ff) 0 100% no-repeat, linear-gradient(
270deg, #77f0ff, #77f0ff) 100% 100% no-repeat, linear-gradient(
270deg, #77f0ff, #77f0ff) 100% 100% no-repeat rgba(0, 6, 20, .7) !important;
background-size: 2px 9px, 9px 2px, 2px 9px, 9px 2px !important;
border: 1px solid #004566 !important;
-webkit-box-shadow: inset 0 0 20px 0 #004566 !important;
box-shadow: inset 0 0 15px 0 #004566 !important;
p {
line-height: 15px;
color: #77f0ff;
min-width: 150px;
}
}
.labelclass {
background: url("../assets/dituicon.png") no-repeat !important;
width: 18px;
height: 28px;
font-size: 0 !important;
}
.allmap2 {
position: absolute;
width: 100%;
height: 100%;
//pointer-events: none;
}
</style>
