第一步 初始化高德地图
mapInit() {
// 初始化地图
AMapLoader.load({
"key": "你的key",
"version": "版本号",
}).then((AMap) => {
const map = new AMap.Map('mapPolyline', {
zoomEnable: true,
zoom: 14,
zooms: [10, 18],
center: [118.17775047538757, 39.671318867694445],
mapStyle: 'amap://styles/grey',
features: ['bg', 'road', 'building', 'point']
});
map.setDefaultCursor('crosshair');
this.map = map;
this.AMap = AMap;
// 调取接口信息
this.loadpolylineFun(this._props.situationNewId)
}).catch(e => {
this.$snackbar.error(e)
})
},
第二步 调取接口 获取对应的经纬度坐标
ajaxFun(situationNewId) {
axios.get('').then((response) => {
// 画线
this.drawLine(response.data.data.polylines)
// 画点
this.loadMarkersPoiList(response.data.data.poiList)
// 画格
this.loadPolygon(response.data.data.areaList)
}).catch(() => {
})
},
画线
drawLine(polylines) {
let me = this;
let AMap = this.AMap;
const polyline = new AMap.Polyline({
path: polylines,
strokeColor: "#47aef3",
strokeOpacity: 1,
strokeWeight: 7,
lineJoin: 'round',
lineCap: 'round',
showDir: true,
});
// 设置开始点
// 创建一个 Icon
var startIcon = new AMap.Icon({
image: poiMarkerDefaultImg,
size: new AMap.Size(27, 34),
imageSize: new AMap.Size(27, 34),
});
var marker = new AMap.Marker({
position: polylines.pop(),
icon: startIcon,
// 设置是否可拖拽
draggable: false,
cursor: 'move'
});
marker.setMap(me.map);
// 设置点标记的动画效果，此处为弹跳效果
marker.setAnimation('AMAP_ANIMATION_BOUNCE');
// 显示轨迹长度
var distance = Math.round(AMap.GeometryUtil.distanceOfLine(polylines));
var text = new AMap.Text({
position: polylines.pop(),
text: '轨迹长' + distance + '米',
offset: new AMap.Pixel(-20, -20)
})
me.map.add(text);
me.map.setFitView();
polyline.setMap(me.map);
me.drawPolyLine = polyline;
},
画格
loadPolygon(areaList) {
let me = this;
let AMap = this.AMap;
areaList.map((n) => {
let polygon = new AMap.Polygon({
map: me.map,
strokeWeight: 2,
cursor: 'pointer',
path: JSON.parse(n.path),
fillColor: n.fillColor,
strokeColor: n.strokeColor,
strokeOpacity: 0,
fillOpacity: 0.2,
strokeStyle: n.strokeStyle,
});
// 网多边形上面加字体
let lnglat = polygon.getBounds().getCenter();
let text = new me.AMap.Text({
text: n.name,
position: lnglat,
animation: 'AMAP_ANIMATION_DROP',
map: me.map
});
text.setStyle({
'background-color': 'transparent',
'color': "#ffffff",
'border': 'none',
})
text.on('rightclick', function() {
polygon.getExtData().polyEditor.close()
me.onEdit = false;
})
polygon.getExtData().text = text;
})
},
画点
loadMarkersPoiList(poiListGroup) {
let me = this;
let AMap = this.AMap;
this.markers = [];
me.list = poiListGroup;
if (poiListGroup.length > 0) {
poiListGroup.forEach(n => {
let marker = new AMap.Marker({
content: '<div style="height: 64px;width: 64px;">' +
'<style>' +
' .point,.point::before,.point::after{position: absolute;width: 12px; height: 12px; border-radius: 50%;content: ""; }' +
' .point::before{animation: scale 2s infinite; left: 0px}' +
' .point::after{animation: scale2 2s infinite; left: 0px}' +
' @keyframes scale{0%{ transform: scale(1); opacity:.9}100%{ transform: scale(6); opacity: 0;}}' +
' @keyframes scale2{0%{ transform: scale(1);opacity:.9;}100%{ transform: scale(12);opacity:0;}}' +
' .point,.point::before,.point::after{ background-color: rgba(255,5,0,0.9);}' +
' .point1,.point1::before,.point1::after{ background-color: rgba(135, 229, 8, .9);}' +
'</style>' +
' <div class="point ' + (n.state == '0' ? 'point' :
'point1') +
'" style="position: relative; margin: 0 auto"></div>' +
' <div style="width: max-content;font-size: 15px;font-weight: bold;font-family:微软雅黑;color: #ffffff; position: relative;top: px;margin-left: 50%;transform: translateX(-50%);">' +
n.name + '</div>' +
'</div>',
position: n.lnglat.split(','),
offset: new AMap.Pixel(-30, 0),
});
if (n.lnglat == me.selectPoiId && me.selectPoiId != null) {
me.map.setZoomAndCenter(n.zoom, n.lnglat.split(','));
me.selectPoiId = ''
}
marker.setExtData(n);
me.markers.push(marker);
});
this.hideMarkers();
me.map.setZoomAndCenter(16, me.list[parseInt(me.list.length / 2)].lnglat.split(','));
}
},
hideMarkers() {
let me = this;
this.markers.forEach(n => {
n.setMap(me.map)
me.target = null;
return;
})
},
网友评论