polygonToMap (list) {
// 已选中图标
let PickedIcon = window.L.Icon.extend({
options: {
iconUrl: require('@/assets/map/ic_map_selected.png'),
iconSize: [24, 24]
}
})
// 可编辑图标
let EditIcon = window.L.Icon.extend({
options: {
iconUrl: require('@/assets/map/ic_map_edit.png'),
iconSize: [24, 24]
}
})
// 清除all marker
for (let i = 0; i < this.selectMarkers.length; i++) {
this.map.removeLayer(this.selectMarkers[i].marker)
}
this.selectMarkers = []
list.forEach(res => {
let latlngs = []
let rangePoints = res.rangePoints
let options = {
color: '#5b8ff9', //
fillColor: '#5b8ff9', //
fillOpacity: 0.1,
data: res
}
rangePoints.forEach(item => {
latlngs.push([item.lat, item.lng])
})
// 绘制多边形
let polygonLayer = window.L.polygon(latlngs, options).addTo(this.map)
// 点击事件
this.polygonInit(polygonLayer)
// 绘制覆盖点
let isPicked = res.isPicked
let isEdit = res.isEdit
if (isPicked === 1 || isEdit === 1) { // 已选中/可编辑
new window.L.marker([res.latitude, res.longitude], {
icon: res.isEdit ? new EditIcon() : new PickedIcon(),
data: res
}).addTo(this.map).on('click', () => {
if (isEdit === 1) {
// 编辑
this.currentGridData = res
// 禁用全局编辑按钮
this.map.pm.disableGlobalEditMode()
this.editMapLayer(polygonLayer)
}
})
}
// map 改变后，重新设置map选中的marker
if (this.gridData.gridIdList.indexOf(res.id) > -1) {
let marker = new window.L.marker([res.latitude, res.longitude], {
icon: new PickedIcon()
}).addTo(this.map).on('click', () => {
if (this.gridData.gridLevel < 5) { // 五级以下可选
let index = this.gridData.gridIdList.indexOf(res.id)
if (index > -1) {
this.gridData.gridIdList.splice(index, 1)
this.gridDataList.splice(index, 1)
this.selectMarkers.splice(index, 1)
}
this.map.removeLayer(marker)
}
})
this.selectMarkers.push({
marker: marker,
id: res.id
})
}
// 绘制文字
let iconLabel = window.L.divIcon({
html: res.gridName,
className: 'my-grid-configure-icon',
iconSize: 30,
data: res
})
new window.L.marker([res.latitude, res.longitude], {
icon: iconLabel
}).addTo(this.map).on('click', () => {
if (res.isEdit === 1) {
// 可编辑
this.currentGridData = res
// 禁用全局编辑按钮
this.map.pm.disableGlobalEditMode()
this.editMapLayer(polygonLayer)
}
})
})
},
// 多边形需要执行的操作
polygonInit(polygonLayer) {
//点击事件
polygonLayer.on('click', e => {
if (e.sourceTarget.options.data && e.sourceTarget.options.data.isEdit === 1) {
// 可编辑
this.currentGridData = e.sourceTarget.options.data
// 禁用全局编辑按钮
this.map.pm.disableGlobalEditMode()
this.editMapLayer(polygonLayer)
return
}
if (e.sourceTarget.options.data) {
this.polygonSelectHandler(e.sourceTarget.options.data)
}
});
},