地图封装组件
<template>
<div id="container"></div>
</template>
<script>
import AMapLoader from '@amap/amap-jsapi-loader';
export default {
name: "Mapview",
props:{
mapinfo:{
type:Object,
default:function(){
return {}
}
},
maptype:{
type:String,
default:''
}
},
data() {
return {
map:null,
isDraw:false,
editpology:null,
polyEditor:null,
wz:null,
loca:null
}
},
watch:{
mapinfo(newdata){
if(newdata.data != null){
console.log(newdata)
}
}
},
created() {
},
mounted() {
this.initAMap();
console.log(this.mapinfo)
},
methods: {
initAMap() {
AMapLoader.load({
key: '16e7ac6ee499a277e372a63e39cbdee9', //设置您的key
version: "2.0",
plugins: ['AMap.ToolBar', 'AMap.Driving',"AMap.MouseTool",
"AMap.PolygonEditor"," AMap.MapType","AMap.Polygon","AMap.Marker"],
AMapUI: {
version: "1.1",
plugins: [],
},
Loca: {
version: "2.0"
},
}).then((AMap) => {
let _this = this;
if(this.maptype){
var satelliteLayer = new AMap.TileLayer.Satellite();
this.map = new AMap.Map("container", {
viewMode: "3D",
zoom: 10,
/* pitch:60, */
skyColor :'#1682a9',
layers:[satelliteLayer],
zooms: [2, 22],
});
/* this.map.addControl(new AMap.MapType({
defaultType:1 //0代表默认，1代表卫星
})); */
/* AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {
//图层切换控件
_this.map.addControl(new BasicControl.LayerSwitcher({
position: 'rt'
}));
}) */
}else{
this.map = new AMap.Map("container", {
zoom: 10,
pitch:60,
zooms: [2, 22],
});
AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {
//添加一个缩放控件
_this.map.addControl(new BasicControl.Zoom({
position: 'lt'
}));
//缩放控件，显示Zoom值
_this.map.addControl(new BasicControl.Zoom({
position: 'lb',
showZoomNum: true
}));
//图层切换控件
_this.map.addControl(new BasicControl.LayerSwitcher({
position: 'rt'
}));
});
}
this.loca = new Loca.Container({
map: this.map
});
/* this.map.addControl(new AMap.MapType({defaultType:0})) */
_this.addClickEvent()
_this.map.on('complete', function() {
if(_this.$parent.getmapinfo){
_this.$parent.getmapinfo()
}else{
_this.$emit('initmap')
let styleName = "amap://styles/fresh";
_this.map.setMapStyle(styleName);
}
})
}).catch(e => {
console.log(e);
})
},
addClickEvent(){
let _this = this
var clickHandler = function(e) {
console.log(e.target)
if(this.marker == null){
this.marker = new AMap.Marker({
position: [e.lnglat.getLng(),e.lnglat.getLat()]
});
this.marker.setMap(_this.map);
}else{
this.marker.setPosition([e.lnglat.getLng(),e.lnglat.getLat()])
}
_this.wz = [e.lnglat.getLng(),e.lnglat.getLat()]
_this.$emit("getmaplocl",[e.lnglat.getLng(),e.lnglat.getLat()])
};
// 绑定事件
this.map.on('click', clickHandler);
// 解绑事件
//this.map.off('click', clickHandler);
},
addPolygon(data){
data =JSON.parse(data)
let polygon = new AMap.Polygon({
path: data,
/* fillColor: '#ccebc5',
strokeOpacity: 1,
fillOpacity: 0.5,
strokeColor: '#2b8cbe',
strokeWeight: 1,
strokeStyle: 'dashed',
strokeDasharray: [5, 5], */
});
this.map.add(polygon)
polygon.on('click',()=>{
alert(1)
this.editpology = polygon
this.edit()
})
this.map.setFitView()
},
addPolygons(data,name,id){
data =JSON.parse(data)
let polygon = new AMap.Polygon({
path: data,
/* fillColor: '#ccebc5',
strokeOpacity: 1,
fillOpacity: 0.5,
strokeColor: '#2b8cbe',
strokeWeight: 1,
strokeStyle: 'dashed',
strokeDasharray: [5, 5], */
});
polygon.on('click',()=>{
this.$emit('clickpoly',id)
})
var text = new AMap.Text({
position: polygon.getBounds().getCenter(),
anchor: 'bottom-center',
text: name,
style: {color:'white','background-color':'rgba(220,38,38,0)','border':'none'},
});
text.on('click',()=>{
this.$emit('clickpoly',id)
})
text.addTo(this.map)
this.map.add(polygon)
},
addmarks(data,id){
let marker = new AMap.Marker({
position: data
});
marker.on('click',()=>{
//alert(id)
this.$emit('clickmarker',id)
})
marker.setMap(this.map);
},
fitview(){
this.map.setFitView()
},
draw() {
this.isDraw = true;
this.mouseTool = new AMap.MouseTool(this.map);
this.mouseTool.polygon({
//fillColor: "#00b0ff",
//strokeColor: "#80d8ff"
//同Polygon的Option设置
});
this.mouseTool.on("draw", e => {
// 监听画多边形结束
console.log("draw");
this.overlays = [];
console.log(e.obj);
console.log(e.obj.getArea())
console.log(e.obj.getPath())
console.log(e.obj.getOptions())
console.log(e.obj)
console.log(e.obj.getBounds().getCenter())
// console.log(e.obj.getOptions().path)
this.$emit("update:mapinfo",{
area:e.obj.getArea(),
data:e.obj.getOptions().path
})
var text = new AMap.Text({
position: e.obj.getBounds().getCenter(),
anchor: 'bottom-center',
text: '文本标记',
style: {'background-color':'rgba(220,38,38,0)','border':'none'},
});
text.addTo(this.map)
this.overlays.push(e.obj);
this.mouseTool.close();
this.isDraw = false;
});
},
edit() {
//console.log("bianji");
//let polygon = this.overlays[0];
if(this.editpology == null){
return
}
let polygon = this.editpology;
this.polyEditor = new AMap.PolygonEditor(this.map, polygon);
// polyEditor.addAdsorbPolygons(polygon1)
this.polyEditor.open();
polygon.on("dblclick", () => {
console.log("双击");
this.polyEditor.close();
});
this.polyEditor.on("end", event => { // polyEditor close关闭时执行
console.log(event.target.getPath());
this.$emit("update:mapinfo",{
area:polygon.getArea(),
data:polygon.getOptions().path
})
});
},
canceledit(){
if(this.polyEditor){
this.polyEditor.close()
}
},
clearmap(){
this.map.clearMap();
},
animate(){
this.loca.animate.start();
let speed = 1;
let _this = this
// 下钻
this.loca.viewControl.addAnimates([{
pitch: {
value: 0,
control: [[0, 20], [1, 0]],
timing: [0, 0, 0.8, 1],
duration: 3000 / speed,
},
zoom: {
value: 15.9,
control: [[0, 12.8], [1, 15.9]],
timing: [0, 0, 0.8, 1],
duration: 3000 / speed,
},
rotation: {
value: -20,
control: [[0, 20], [1, -20]],
timing: [0, 0, 0.8, 1],
duration: 2000 / speed,
},
}/* ,{
pitch: {
value: 0,
control: [[0, 0], [1, 100]],
timing: [0.1, 0, 0.7, 1],
duration: 2000 / speed,
},
rotation: {
value: 360,
control: [[0, 260], [1, 361]],
timing: [0.3, 0, 0.7, 1],
duration: 2000 / speed,
},
zoom: {
value: 10.8,
control: [[0, 17.5], [1, 13.8]],
timing: [0.3, 0, 0.7, 1],
duration: 2500 / speed,
},
} */,{
// 环绕
pitch: {
value: 0,
control: [[0, 40], [1, 50]],
timing: [0.3, 0, 1, 1],
duration: 7000 / speed,
},
rotation: {
value: 360,
control: [[0, -80], [1, 260]],
timing: [0, 0, 0.7, 1],
duration: 7000 / speed,
},
zoom: {
value: 11,
control: [[0.3, 16], [1, 17]],
timing: [0.3, 0, 0.9, 1],
duration: 5000 / speed,
},
}], function () {
});
}
}
}
</script>
<style scoped>
#container {
padding: 0px;
margin: 0px;
width: 100%;
height: 100%;
position: absolute;
}
</style>
在vue页面内引入
import gdmap from ‘组件路径’
父子组件传参
父组件内
<gdmap @getmaplocl="getmaplocal" />
methods:{
getmaplocal(data){
console.log(data)
this.form.equipmentLongitude = data.join(',')
},
}