使用产品:iserver 11i 操作系统:win10x64 数据类型: postgre sql 问题详细描述:1、
代码:
initMap() {
this.map = L.map('map', {
crs: L.CRS.EPSG4326,
center: [35.585544, 105.690510],
maxZoom: 18,
zoom: 4,
});
L.control.scale().addTo(this.map)
new L.supermap.TiledMapLayer(this.url, { noWrap: true, transparent: true }).addTo(this.map);
// 鼠标移动显示经纬度
var latlngDiv = document.getElementById('latlng')
this.map.on('mousemove', function(e) {
this.lat = e.latlng.lat;
this.lng = e.latlng.lng;
latlngDiv.innerHTML = `${this.lng}, ${this.lat}`
})
// 图形绘制
this.polylinegroup = L.featureGroup([]) //创建图层
this.map.addLayer(this.polylinegroup)
this.nextlinegroup = L.featureGroup([]) //创建图层
this.map.addLayer(this.nextlinegroup)
this.rectgroup = L.featureGroup([]) //创建图层
this.map.addLayer(this.rectgroup)
this.testgroup = L.featureGroup([]) //创建图层
this.map.addLayer(this.testgroup)
},
// 画线
draw_Line() {
this.draw_Hand()
this.draw_tool = 'draw_line'
this.draw_Tools()
let pointList = [];
this.map.on('click', (e) => {
pointList.push([e.latlng.lat, e.latlng.lng])
this.map.on('dblclick', (ev) => {
console.log(111)
this.map.off('click')
this.map.off('mousemove')
pointList.push([ev.latlng.lat, ev.latlng.lng]);
this.polylinegroup.clearLayers();
this.nextlinegroup.clearLayers();
if (pointList.length > 1) {
L.polyline(pointList, {
color: "#2260b4",
weight: 3
}).addTo(this.nextlinegroup);
}
})
this.map.on('mousemove', (ev) => {
let lastPoint = pointList[pointList.length - 1]
let latlngs = [
lastPoint,
[ev.latlng.lat, ev.latlng.lng]
]
this.polylinegroup.clearLayers();
L.polyline(latlngs, {color: '#2260b4'}).addTo(this.polylinegroup)
})
if (pointList.length > 1) {
this.nextlinegroup.clearLayers();
L.polyline(pointList, {
color: "#2260b4",
weight: 3
}).addTo(this.nextlinegroup);
}
})
},
// 画矩形
draw_Rectangle() {
this.list = []
let list = []
let juxing;
this.map.on("click", (e)=> {
list.push([e.latlng.lat, e.latlng.lng])
this.map.on('mousemove',(ev)=>{
if(list.length>1){
list.splice(1)
}
list.push([ev.latlng.lat, ev.latlng.lng])
this.testgroup.clearLayers()
juxing = L.rectangle(list, {//绘制矩形
color: "#ff7800",
weight: 1
}).addTo(this.testgroup);
})
if(list.length>1){
list.pop()//第二次点击会触发第一次的push()导致得到三个数据(后两个一样),所以删除最后一个
// this.list.push([list])//保存矩形数据
this.list.push({first:list[0],sec:list[1],name:'矩形'+(this.list.length+1)})//保存矩形数据
this.map.off('mousemove')//两点确定,移除鼠标移动事件
this.map.off('click')//两点确定,移除点击事件,
this.testgroup.clearLayers()
L.rectangle(list, {//绘制矩形
color: "#ff7800",
weight: 1
}).addTo(this.rectgroup);
}
})
console.log(this.list)
},
代码片段是这样的,这里有两个问题,第一个画矩形或者画线之后会影响鼠标移动显示经纬度功能,第二个问题是结束画线的时候双击功能需要双击很多次才能结束画线
问题重现步骤: 1.