管线分析

chenzeping

2021-04-19 39638e1ec95822792c7520dcd0f5a807957cadde

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import L from 'leaflet'
// import eventBus from "@/components/leaflet/app/eventBus"
import eventBus from '@components/panel/topicSearch/SewersSelect/AnalysisChoose/eventBus'
 
class DrawLine {
  constructor (map) {
    this.points = []
    this.color = 'red'
    this.layers = L.layerGroup()
    this.polyline = null
    this.marker = null
    this.points = []
    this.polyline = null
    this.marker = null
    this.map = map
  }
 
    init = () => {
      this.map.on('click', this.click)
      this.map.on('mousemove', this.mousemove)
      this.map.on('dblclick', this.dbClick)
    }
 
    click = (e) => {
      this.map.doubleClickZoom.disable()
      this.points.push(e.latlng)
      if (this.points.length > 1) {
        this.dbClick()
      }
    }
 
    mousemove = (e) => {
      this.points.push(e.latlng)
      if (this.polyline) { this.map.removeLayer(this.polyline) }
      this.polyline = L.polyline(this.points, { showMeasurements: true, color: 'red' })
      this.polyline.addTo(this.layers)
      this.layers.addTo(this.map)
      this.points.pop()
    }
 
    dbClick = (e) => {
      console.log('双击结束', e)
      this.polyline.addTo(this.layers)
      // this.close(e.latlng);
      this.map.off('click', this.click).off('mousemove', this.mousemove).off('dblclick', this.dbClick)
      console.log(this.points)
      eventBus.$emit('draw-hdm-line', this.points)
    }
 
    destory () {
      if (this.polyline) { this.map.removeLayer(this.polyline) }
 
      if (this.marker) { this.marker.remove() }
      this.points = []
      this.layers.clearLayers()
    }
}
 
export default DrawLine