vue前端开发仿钉图系列（3）右侧画点线面的开发详解

　　项目开发是完全仿照钉图的功能，参照钉图的逻辑和高德地图的参考手册以及aip文档，一点点的把功能做出来并呈现最后的效果。选中画点，在地图上获取经纬度并进行反地理编码，添加marker并弹出右侧编辑页面，选择绑定所属图层，获取相应的动态标签列表，最后保存数据到数据列表。整理总结不易，如需全部代码，请联系我15098950589（微信同号）。和以往一样，先上一下效果图。

 

　　点线面工具的核心代码

　　

that.mouseTool = new AMap.MouseTool(that.map);

//监听draw事件可获取画好的覆盖物
that.overlays = [];
that.mouseTool.on('draw', function(e) {
that.overlays.push(e.obj);
console.log('绘图信息', e.obj)
let poly = e.obj // 绘制完多边形实力对象
console.log('绘制图形顶点信息列表--------> ', poly.getOptions())
console.log('绘制图形的自定义属性--------> ', poly.getOptions().path)

that.isFromEdit = false;
//折线
if (that.layerType === 1) {
//实例化折线对象
let polyline = new AMap.Polyline({
map: that.map, //初始化的地图变量
path: poly.getOptions()
.path //折线的存放数组，很重中。一般是好多经纬度组成的数组。
});
that.lineLength = parseFloat(polyline.getLength(false) / 1000)
.toFixed(2) + ''
that.lineMarkers = poly.getOptions().path;
console.log('折线长度', that.lineLength)
}
//面
else if (that.layerType === 2) {
//实例化面对象
let polygon = new AMap.Polygon({
map: that.map, //初始化的地图变量
path: poly.getOptions()
.path //面的存放数组，很重中。一般是好多经纬度组成的数组。
});
that.surArea = parseFloat(polygon.getArea(false) / 1000000)
.toFixed(2) + ''
that.polygonMarkers = poly.getOptions().path;
console.log('面积', that.surArea, poly.getOptions().path)
}
})

var radios = document.getElementsByName('func');
for (let i = 0; i < radios.length; i += 1) {
radios[i].onchange = function(e) {
console.log('点击我了', e.target.value)
that.operatetype = e.target.value
that.isFromEdit = false;
that.isEditedEnabled = true;

//点停止距离和面积，线绘制距离，面显示面积
if (e.target.value === 'marker') {
that.draw(e.target.value)
} else if (e.target.value === 'polyline') {
that.rageAndMeasureDraw('rule')
} else {
that.rageAndMeasureDraw('measureArea')
}
}
}
//this.draw('marker')
//获取当前选中点的经纬度信息
const geocoder = new AMap.Geocoder({
city: '全国'
});
console.log('地图对象')
console.log('地图对象', that.map)
//为地图注册click事件获取鼠标点击出的经纬度坐标
that.map.on('click', function(e) {
if (!that.isEditedEnabled) {
return;
}
//反地理编码
geocoder.getAddress([e.lnglat.getLng(), e.lnglat.getLat()], function(
status,
result) {

if (status === 'complete' && result.regeocode) {
that.locationAddress = result.regeocode
.formattedAddress;
that.lng = e.lnglat.getLng()
that.lat = e.lnglat.getLat()

console.log('位置信息', e.lnglat.getLng(), e.lnglat
.getLat(), that
.locationAddress, that.overlays)
//只在画点的时候，单击弹出右侧编辑框，其他情况在双击结束的时候弹出编辑框
if (that.operatetype === 'marker') {
console.log('显示右侧列表')
//画点
that.layerType = 0;
//显示右侧编辑列表，并关闭绘图工具
that.rightEditVisible = true;
that.isFromEdit = false;
setTimeout(() => {
that.$refs.rightEdit.initData();
}, 1)

} else if (that.operatetype === 'polyline') {
that.layerType = 1;
} else if (that.operatetype === 'polygon') {
that.layerType = 2;
}
} else {
log.error('根据经纬度查询地址失败')
}
});

});

//关闭绘图工具
closeMouseToulDraw() {
this.mouseTool.close(true)
this.isEditedEnabled = false;
var radios = document.getElementsByName('func');

for (var i = 0; i < radios.length; i += 1) {
radios[i].checked = false;
}

setTimeout(() => {
this.$refs.dataList.initData()
this.$refs.layerList.initData()
}, 1)
this.map.remove(this.overlays)
this.overlays = [];
this.map.clearMap();
},
//关闭绘图工具
closeMouseToul() {
this.mouseTool.close(false)
var radios = document.getElementsByName('func');
for (var i = 0; i < radios.length; i += 1) {
radios[i].checked = false;
}
},
//使用MouseTool封装了RagingTool的测距功能，同时提供了 measureArea 面积测量功能
rageAndMeasureDraw(type) {
switch (type) {
case 'rule': {
this.mouseTool.rule({
startMarkerOptions: { //可缺省
icon: new AMap.Icon({
size: new AMap.Size(19, 31), //图标大小
imageSize: new AMap.Size(19, 31),
image: "//webapi.amap.com/theme/v1.3/markers/b/start.png"
}),
offset: new AMap.Pixel(-9, -31)
},
endMarkerOptions: { //可缺省
icon: new AMap.Icon({
size: new AMap.Size(19, 31), //图标大小
imageSize: new AMap.Size(19, 31),
image: "//webapi.amap.com/theme/v1.3/markers/b/end.png"
}),
offset: new AMap.Pixel(-9, -31)
},
midMarkerOptions: { //可缺省
icon: new AMap.Icon({
size: new AMap.Size(19, 31), //图标大小
imageSize: new AMap.Size(19, 31),
image: "//webapi.amap.com/theme/v1.3/markers/b/mid.png"
}),
offset: new AMap.Pixel(-9, -31)
},
lineOptions: { //可缺省
strokeStyle: "solid",
strokeColor: "#FF33FF",
strokeOpacity: 1,
strokeWeight: 2
}
//同 RangingTool 的 自定义 设置，缺省为默认样式
});
break;
}
case 'measureArea': {
this.mouseTool.measureArea({
strokeColor: '#80d8ff',
fillColor: '#80d8ff',
fillOpacity: 0.3
//同 Polygon 的 Option 设置
});
break;
}
}
},
draw(type) {
switch (type) {
case 'marker': {
this.mouseTool.marker({
//同Marker的Option设置
});
break;
}
case 'polyline': {
this.mouseTool.polyline({
strokeColor: '#80d8ff'
//同Polyline的Option设置
});
break;
}
case 'polygon': {
this.mouseTool.polygon({
fillColor: '#00b0ff',
strokeColor: '#80d8ff'
//同Polygon的Option设置
});
break;
}
case 'rectangle': {
this.mouseTool.rectangle({
fillColor: '#00b0ff',
strokeColor: '#80d8ff'
//同Polygon的Option设置
});
break;
}
case 'circle': {
this.mouseTool.circle({
fillColor: '#00b0ff',
strokeColor: '#80d8ff'
//同Circle的Option设置
});
break;
}
}

整理总结不易，如需全部代码，请联系我15098950589（微信同号）。