优化逻辑

YANGDL

2021-01-05 1820aef3fb5c926664de1d4d484f64a5c9ba7099

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
'use strict'
 
const init = (L) => {
  L.CustomPopup = L.Popup.extend({
    _initLayout: () => {
      // 此处生成的容器，Leaflet会根据其类名自动适配Transform，匹配样式，所以如果要自定义的话，该部分样式要自己重写，我这里只解决了自适应容器的问题，以下采用原生容器，所以后面我会加上样式覆盖。
      const prefix = 'leaflet-popup'
      const container = (this._container = L.DomUtil.create(
        'div',
        prefix + ' ' + (this.options.className || '') + ' leaflet-zoom-animated'
      ))
      const wrapper = container
      this._contentNode = L.DomUtil.create('div', prefix + '-content', wrapper)
      L.DomEvent.disableClickPropagation(wrapper)
        .disableScrollPropagation(this._contentNode)
        .on(wrapper, 'contextmenu', L.DomEvent.stopPropagation)
      this._tipContainer = L.DomUtil.create(
        'div',
        prefix + '-tip-container',
        container
      )
      this._tip = L.DomUtil.create('div', prefix + '-tip', this._tipContainer)
    },
    // 位置更新
    _updatePosition: () => {
      if (!this._map) {
        return
      }
      const pos = this._map.latLngToLayerPoint(this._latlng)
      let offset = L.point(this.options.offset)
      const anchor = [0, 0]
      if (this._zoomAnimated) {
        setPosition(this._container, pos.add(anchor))
      } else {
        offset = offset.add(pos).add(anchor)
      }
      const bottom = (this._containerBottom = -offset.y)
      const left = (this._containerLeft =
                    -Math.round(this._containerWidth / 2) + offset.x)
      // bottom position the popup in case the height of the popup changes (images loading etc)
      this._container.style.bottom = bottom + 'px'
      this._container.style.left = left + 'px'
    },
    // 重写层级变化触发更新
    _animateZoom: (e) => {
      const pos = this._map._latLngToNewLayerPoint(this._latlng, e.zoom, e.center)
      const anchor = [0, 0]
      setPosition(this._container, pos.add(anchor))
    }
  })
 
  // 重写setTransform，由于不再固定宽度，所以增加translateX(-50%)水平居中
  const setTransform = (el, offset, scale) => {
    const pos = offset || new L.Point(0, 0)
    el.style[L.DomUtil.TRANSFORM] =
            (L.Browser.ie3d
              ? 'translate(' + pos.x + 'px,' + pos.y + 'px,0) translateX(-50%)'
              : 'translate3d(' + pos.x + 'px,' + pos.y + 'px,0) translateX(-50%)') +
            (scale ? ' scale(' + scale + ')' : '')
  }
  // 因为重写了setTransform，所以setPosition也要重新指向方法
  const setPosition = (el, point) => {
    el._leaflet_pos = point
    if (L.Browser.any3d) {
      setTransform(el, point)
    } else {
      el.style.left = point.x + 'px'
      el.style.top = point.y + 'px'
    }
  }
}
export default {
  init
}