From 1820aef3fb5c926664de1d4d484f64a5c9ba7099 Mon Sep 17 00:00:00 2001 From: YANGDL <114714267@qq.com> Date: 星期二, 05 一月 2021 17:06:08 +0800 Subject: [PATCH] 优化逻辑 --- src/components/plugin/CustomPopup.js | 126 +++++++++++++++++++++--------------------- 1 files changed, 63 insertions(+), 63 deletions(-) diff --git a/src/components/plugin/CustomPopup.js b/src/components/plugin/CustomPopup.js index 1ea6b84..a35e848 100644 --- a/src/components/plugin/CustomPopup.js +++ b/src/components/plugin/CustomPopup.js @@ -1,74 +1,74 @@ 'use strict' const init = (L) => { - L.CustomPopup = L.Popup.extend({ - _initLayout: () => { - // 姝ゅ鐢熸垚鐨勫鍣紝Leaflet浼氭牴鎹叾绫诲悕鑷姩閫傞厤Transform锛屽尮閰嶆牱寮忥紝鎵�浠ュ鏋滆鑷畾涔夌殑璇濓紝璇ラ儴鍒嗘牱寮忚鑷繁閲嶅啓锛屾垜杩欓噷鍙В鍐充簡鑷�傚簲瀹瑰櫒鐨勯棶棰橈紝浠ヤ笅閲囩敤鍘熺敓瀹瑰櫒锛屾墍浠ュ悗闈㈡垜浼氬姞涓婃牱寮忚鐩栥�� - let prefix = 'leaflet-popup' - let container = (this._container = L.DomUtil.create( - 'div', - prefix + ' ' + (this.options.className || '') + ' leaflet-zoom-animated' - )) - let 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 - } - let pos = this._map.latLngToLayerPoint(this._latlng) - let offset = L.point(this.options.offset) - let anchor = [0, 0] - if (this._zoomAnimated) { - setPosition(this._container, pos.add(anchor)) - } else { - offset = offset.add(pos).add(anchor) - } - let bottom = (this._containerBottom = -offset.y) - let left = (this._containerLeft = + 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) => { - let pos = this._map._latLngToNewLayerPoint(this._latlng, e.zoom, e.center) - let anchor = [0, 0] - setPosition(this._container, pos.add(anchor)) - } - }) + // 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锛岀敱浜庝笉鍐嶅浐瀹氬搴︼紝鎵�浠ュ鍔爐ranslateX(-50%)姘村钩灞呬腑 - const setTransform = (el, offset, scale) => { - let pos = offset || new L.Point(0, 0) - el.style[L.DomUtil.TRANSFORM] = + // 閲嶅啓setTransform锛岀敱浜庝笉鍐嶅浐瀹氬搴︼紝鎵�浠ュ鍔爐ranslateX(-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%)') + + ? 'translate(' + pos.x + 'px,' + pos.y + 'px,0) translateX(-50%)' + : 'translate3d(' + pos.x + 'px,' + pos.y + 'px,0) translateX(-50%)') + (scale ? ' scale(' + scale + ')' : '') + } + // 鍥犱负閲嶅啓浜唖etTransform锛屾墍浠etPosition涔熻閲嶆柊鎸囧悜鏂规硶 + 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' } -// 鍥犱负閲嶅啓浜唖etTransform锛屾墍浠etPosition涔熻閲嶆柊鎸囧悜鏂规硶 - 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 + init } -- Gitblit v1.8.0