@sword916/vae-map-plus 1.0.0

package/src/plugins/L.EchartsLayer/index.js

@@ -0,0 +1,339 @@
+import * as echarts from "echarts"
+
+/**
+ * @class L.supermap.echartsLayer
+ * @classdesc 百度 ECharts 图层类。
+ * @category  Visualization ECharts
+ * @extends {L.Layer}
+ * @param {Object} echartsOptions - 图表参数。
+ * @param {Object} options - 可选图层参数。
+ * @param {boolean} [options.loadWhileAnimating=false] - 是否在移动时实时绘制。
+ * @param {string} [options.attribution='© 2018 百度 ECharts'] - 版权信息。
+ */
+L.EchartsLayer = L.Layer.extend({
+
+    includes: [],
+    _echartsContainer: null,
+    _map: null,
+    _ec: null,
+    _echartsOptions: null,
+
+    options: {
+        loadWhileAnimating: false
+    },
+
+    initialize: function (echartsOptions, options) {
+        L.Util.setOptions(this, options)
+        this.setOption(echartsOptions)
+    },
+    /**
+     * @function L.supermap.echartsLayer.prototype.setOption
+     * @description 设置图表地图参数。
+     * @param {Object} echartsOptions - 图表参数。
+     * @param {string} lazyUpdate - 后台自动更新。
+     * @param {boolean} [notMerge] - 是否合并参数。
+     */
+    setOption: function (echartsOptions, notMerge, lazyUpdate) {
+        const baseOption = echartsOptions.baseOption || echartsOptions
+        baseOption.LeafletMap = baseOption.LeafletMap || {
+            roam: true
+        }
+        baseOption.animation = baseOption.animation === true
+        this._echartsOptions = echartsOptions
+        this._ec && this._ec.setOption(echartsOptions, notMerge, lazyUpdate)
+    },
+    getEcharts: function () {
+        return this._ec
+    },
+    _disableEchartsContainer: function () {
+        this._echartsContainer.style.visibility = "hidden"
+    },
+    _enableEchartsContainer: function () {
+        this._echartsContainer.style.visibility = "visible"
+    },
+
+    /**
+     * @private
+     * @function L.supermap.echartsLayer.prototype.onAdd
+     * @description 添加地图。
+     * @param {L.Map} map - 待添加的地图。
+     */
+    onAdd: function (map) {
+        this._map = map
+        this._initEchartsContainer()
+        this._ec = echarts.init(this._echartsContainer)
+        this._ec.leafletMap = map
+        const me = this
+
+        map.on("zoomstart", function () {
+            me._disableEchartsContainer()
+        })
+        !me.options.loadWhileAnimating && map.on("movestart", function () {
+            me._disableEchartsContainer()
+        })
+        echarts.registerAction({
+            type: 'LeafletMapLayout',
+            event: 'LeafletMapLayout',
+            update: 'updateLayout'
+        }, function (payload) { // eslint-disable-line no-unused-vars
+        })
+        echarts.registerCoordinateSystem(
+            'leaflet', LeafletMapCoordSys
+        )
+        echarts.extendComponentModel({
+            type: 'LeafletMap',
+            getBMap: function () {
+                return this.__LeafletMap
+            },
+            defaultOption: {
+                roam: false
+            }
+        })
+        echarts.extendComponentView({
+            type: 'LeafletMap',
+            render: function (LeafletMapModel, ecModel, api) {
+                let rendering = true
+                let leafletMap = ecModel.scheduler.ecInstance.leafletMap
+                const viewportRoot = api.getZr().painter.getViewportRoot()
+
+                const animated = leafletMap.options.zoomAnimation && L.Browser.any3d
+                viewportRoot.className = ' leaflet-layer leaflet-zoom-' + (animated ? 'animated' : 'hide') + ' echarts-layer'
+
+                const originProp = L.DomUtil.testProp(['transformOrigin', 'WebkitTransformOrigin', 'msTransformOrigin'])
+                viewportRoot.style[originProp] = '50% 50%'
+
+                const coordSys = LeafletMapModel.coordinateSystem
+
+                const ecLayers = api.getZr().painter.getLayers()
+
+                const moveHandler = function () {
+                    if (rendering) {
+                        return
+                    }
+                    const offset = me._map.containerPointToLayerPoint([0, 0])
+                    const mapOffset = [offset.x || 0, offset.y || 0]
+                    viewportRoot.style.left = mapOffset[0] + 'px'
+                    viewportRoot.style.top = mapOffset[1] + 'px'
+
+                    if (!me.options.loadWhileAnimating) {
+                        for (let item in ecLayers) {
+                            if (!ecLayers.hasOwnProperty(item)) {
+                                continue
+                            }
+                            ecLayers[item] && clearContext(ecLayers[item].ctx)
+                        }
+                        me._enableEchartsContainer()
+                    }
+
+                    coordSys.setMapOffset(mapOffset)
+                    LeafletMapModel.__mapOffset = mapOffset
+
+                    api.dispatchAction({
+                        type: 'LeafletMapLayout'
+                    })
+
+
+                }
+
+                function clearContext(context) {
+                    context && context.clearRect && context.clearRect(0, 0, context.canvas.width, context.canvas.height)
+                }
+
+                function zoomEndHandler() {
+                    if (rendering) {
+                        return
+                    }
+
+                    api.dispatchAction({
+                        type: 'LeafletMapLayout'
+                    })
+                    me._enableEchartsContainer()
+                }
+
+                if (me._oldMoveHandler) {
+                    leafletMap.off(me.options.loadWhileAnimating ? 'move' : 'moveend', me._oldMoveHandler)
+
+                }
+                if (me._oldZoomEndHandler) {
+                    leafletMap.off('zoomend', me._oldZoomEndHandler)
+
+                }
+
+                leafletMap.on(me.options.loadWhileAnimating ? 'move' : 'moveend', moveHandler)
+                leafletMap.on('zoomend', zoomEndHandler)
+                me._oldMoveHandler = moveHandler
+                me._oldZoomEndHandler = zoomEndHandler
+                rendering = false
+            }
+        })
+        this._ec.setOption(this._echartsOptions)
+    },
+
+    onRemove: function () {
+        // 销毁echarts实例
+        this._ec.clear()
+        this._ec.dispose()
+        delete this._ec
+        L.DomUtil.remove(this._echartsContainer)
+
+        if (this._oldZoomEndHandler) {
+            this._map.off("zoomend", this._oldZoomEndHandler)
+            this._oldZoomEndHandler = null
+        }
+        if (this._oldMoveHandler) {
+            this._map.off(this.options.loadWhileAnimating ? 'move' : 'moveend', this._oldMoveHandler)
+            this._oldMoveHandler = null
+        }
+        if (this._resizeHandler) {
+            this._map.off('resize', this._resizeHandler)
+            this._resizeHandler = null
+        }
+        delete this._map
+    },
+
+    _initEchartsContainer: function () {
+        const size = this._map.getSize()
+
+        const _div = document.createElement('div')
+        _div.style.position = 'absolute'
+        _div.style.height = size.y + 'px'
+        _div.style.width = size.x + 'px'
+        _div.style.zIndex = 10
+        this._echartsContainer = _div
+
+        this.getPane().appendChild(this._echartsContainer)
+        const me = this
+
+        function _resizeHandler(e) {
+            let size = e.newSize
+            me._echartsContainer.style.width = size.x + 'px'
+            me._echartsContainer.style.height = size.y + 'px'
+            me._ec.resize()
+        }
+
+        this._map.on('resize', _resizeHandler)
+        this._resizeHandler = _resizeHandler
+    }
+
+})
+
+/**
+ * @class L.supermap.LeafletMapCoordSys
+ * @private
+ * @classdesc 地图坐标系统类。
+ * @param {L.Map} leafletMap - 地图。
+ */
+export function LeafletMapCoordSys(leafletMap) {
+    this._LeafletMap = leafletMap
+    this.dimensions = ['lng', 'lat']
+    this._mapOffset = [0, 0]
+}
+
+LeafletMapCoordSys.prototype.dimensions = ['lng', 'lat']
+
+LeafletMapCoordSys.prototype.setMapOffset = function (mapOffset) {
+    this._mapOffset = mapOffset
+}
+
+LeafletMapCoordSys.prototype.getBMap = function () {
+    return this._LeafletMap
+}
+
+LeafletMapCoordSys.prototype.prepareCustoms = function () {
+    const zrUtil = echarts.util
+
+    const rect = this.getViewRect()
+    return {
+        coordSys: {
+            // The name exposed to user is always 'cartesian2d' but not 'grid'.
+            type: 'leaflet',
+            x: rect.x,
+            y: rect.y,
+            width: rect.width,
+            height: rect.height
+        },
+        api: {
+            coord: zrUtil.bind(this.dataToPoint, this),
+            size: zrUtil.bind(dataToCoordSize, this)
+        }
+    }
+
+    function dataToCoordSize(dataSize, dataItem) {
+        dataItem = dataItem || [0, 0]
+        return zrUtil.map([0, 1], function (dimIdx) {
+            const val = dataItem[dimIdx]
+            const halfSize = dataSize[dimIdx] / 2
+            const p1 = []
+            const p2 = []
+            p1[dimIdx] = val - halfSize
+            p2[dimIdx] = val + halfSize
+            p1[1 - dimIdx] = p2[1 - dimIdx] = dataItem[1 - dimIdx]
+            return Math.abs(this.dataToPoint(p1)[dimIdx] - this.dataToPoint(p2)[dimIdx])
+        }, this)
+    }
+}
+
+LeafletMapCoordSys.prototype.dataToPoint = function (data) {
+    //处理数据中的null值
+    if (data[1] === null) {
+        data[1] = L.CRS.EPSG3857.projection.MAX_LATITUDE
+    }
+    //平面坐标系不能这么处理
+    //data[1] = this.fixLat(data[1])
+
+    const px = this._LeafletMap.latLngToLayerPoint([data[1], data[0]])
+
+    const mapOffset = this._mapOffset
+    return [px.x - mapOffset[0], px.y - mapOffset[1]]
+}
+
+LeafletMapCoordSys.prototype.fixLat = function (lat) {
+    if (lat >= 90) {
+        return 89.99999999999999
+    }
+    if (lat <= -90) {
+        return -89.99999999999999
+    }
+    return lat
+}
+
+LeafletMapCoordSys.prototype.pointToData = function (pt) {
+    let mapOffset = this._mapOffset
+    let point = this._LeafletMap.layerPointToLatLng([pt[0] + mapOffset[0], pt[1] + mapOffset[1]])
+    return [point.lng, point.lat]
+}
+
+LeafletMapCoordSys.prototype.getViewRect = function () {
+    const size = this._LeafletMap.getSize()
+    return new echarts.graphic.BoundingRect(0, 0, size.x, size.y)
+}
+
+LeafletMapCoordSys.prototype.getRoamTransform = function () {
+    return echarts.matrix.create()
+}
+LeafletMapCoordSys.dimensions = LeafletMapCoordSys.prototype.dimensions
+
+LeafletMapCoordSys.create = function (ecModel) {
+    let coordSys
+    let leafletMap = ecModel.scheduler.ecInstance.leafletMap
+    ecModel.eachComponent('LeafletMap', function (leafletMapModel) {
+        if (!coordSys) {
+            coordSys = new LeafletMapCoordSys(leafletMap)
+        }
+        leafletMapModel.coordinateSystem = coordSys
+        leafletMapModel.coordinateSystem.setMapOffset(leafletMapModel.__mapOffset || [0, 0])
+    })
+    ecModel.eachSeries(function (seriesModel) {
+        if (!seriesModel.get('coordinateSystem') || seriesModel.get('coordinateSystem') === 'leaflet') {
+            if (!coordSys) {
+                coordSys = new LeafletMapCoordSys(leafletMap)
+            }
+            seriesModel.coordinateSystem = coordSys
+            seriesModel.animation = seriesModel.animation === true
+        }
+    })
+}
+
+L.echartsLayer = (echartsOptions, options) => {
+    return new L.EchartsLayer(echartsOptions, options)
+}

package/src/plugins/L.ElasticMarker/index.js

@@ -0,0 +1,162 @@
+import jQuery from 'jquery'
+
+// 灵活marker
+L.ElasticMarker = L.Marker.extend({
+
+    targetMap: null,
+
+    options: {
+        // 启用动态尺寸
+        elasticScale: true,
+        // 合适的级别
+        fitZoom: 10,
+        // 最大比例
+        maxScale: 1.35,
+        // 最小比例
+        minScale: 0.35,
+        // 比例变换系数
+        scaleFactor: 1.35,
+
+        // 启用动态透明度
+        elasticOpacity: false,
+        opacityFitZoom: null,
+        minOpacity: 0.1,
+        opacityFactor: 2,
+
+        // 启动动态tooltip
+        elasticTooltip: true,
+        tooltipFitZoom: null
+    },
+
+    initialize(latLng, options) {
+        L.setOptions(this, options)
+        this.options.opacityFitZoom = this.options.opacityFitZoom || this.options.fitZoom
+        this.options.tooltipFitZoom = this.options.tooltipFitZoom || this.options.fitZoom
+        this._bindEvents()
+        L.Marker.prototype.initialize.call(this, latLng, this.options)
+    },
+
+    _bindEvents() {
+        this.on('add', e => {
+            this.targetMap = e.target._map
+            this.targetMap.on('zoomend', this._update, this)
+            this._update()
+        })
+        this.on('remove', () => {
+            this.targetMap.off('zoomend', this._update, this)
+            this.targetMap = null
+        })
+        this.on('tooltipopen', e => {
+            this._updateTooltip()
+        })
+    },
+
+    _update() {
+        // icon
+        if (this.options.elasticScale && this.targetMap) {
+            // 获取缩放值
+            const zoom = this.targetMap.getZoom()
+            let scale = 1.0 - (this.options.fitZoom - zoom) * this.options.scaleFactor * 0.1
+            scale = _.max([this.options.minScale, scale])
+            scale = _.min([this.options.maxScale, scale])
+
+            const markerIcon = this.getIcon()
+            // L.DivIcon
+            if (markerIcon instanceof L.DivIcon) {
+                const iconDom = jQuery(this._icon)
+                const innerIconDom = iconDom.contents()
+                // 调整鼠标事件响应范围
+                if (this.options.interactive) {
+                    if (scale < 1) {
+                        iconDom.css('pointer-events', 'none')
+                        innerIconDom.css('pointer-events', 'auto')
+                    }
+                }
+                innerIconDom.css('transform', `scale(${scale})`)
+                innerIconDom.css('transition', `0.2s`)
+            }
+            // L.Icon
+            else if (markerIcon instanceof L.Icon) {
+                const iconDom = jQuery(this._icon)
+                const shadowDom = jQuery(this._shadow)
+                let iconAnchor, shadowAnchor
+                // 默认图标
+                if (markerIcon instanceof L.Icon.Default) {
+                    iconAnchor = shadowAnchor = L.Icon.Default.prototype.options.iconAnchor
+                }
+                // 自定义图标
+                else {
+                    iconAnchor = markerIcon.options.iconAnchor
+                    shadowAnchor = markerIcon.options.shadowAnchor
+                }
+                if (iconDom.length > 0) {
+                    iconDom.css('transform', iconDom.css('transform') + ` scale(${scale})`)
+                    if (iconAnchor && iconAnchor.length == 2) {
+                        iconDom.css('transform-origin', `${iconAnchor[0] + 'px'} ${iconAnchor[1] + 'px'}`)
+                    }
+                    iconDom.css('transition', `0.2s`)
+                }
+                if (shadowDom.length > 0) {
+                    shadowDom.css('transform', shadowDom.css('transform') + ` scale(${scale})`)
+                    if (shadowAnchor && shadowAnchor.length == 2) {
+                        shadowDom.css('transform-origin', `${shadowAnchor[0] + 'px'} ${shadowAnchor[1] + 'px'}`)
+                    }
+                    shadowDom.css('transition', `0.2s`)
+                }
+            }
+        }
+
+        // opacity
+        if (this.options.elasticOpacity && this.targetMap) {
+            // 获取透明度
+            const zoom = this.targetMap.getZoom()
+            let opacity = 1.0
+            if (zoom < this.options.fitZoom) {
+                opacity = 1.0 - (this.options.fitZoom - zoom) * this.options.opacityFactor * 0.1
+            }
+            opacity = _.max([this.options.minOpacity, opacity])
+
+            const iconDom = jQuery(this._icon)
+            const shadowDom = jQuery(this._shadow)
+            if (iconDom.length > 0) {
+                iconDom.css('opacity', opacity)
+            }
+            if (shadowDom.length > 0) {
+                shadowDom.css('opacity', opacity)
+            }
+        }
+
+        this._updateTooltip()
+    },
+
+    _updateTooltip() {
+        if (this.options.elasticTooltip && this.targetMap) {
+            const markerTooltip = this.getTooltip()
+            if (markerTooltip) {
+                const zoom = this.targetMap.getZoom()
+                const tooltipDom = jQuery(markerTooltip._container)
+                if (zoom >= this.options.fitZoom) {
+                    tooltipDom.css('display', '')
+                } else {
+                    tooltipDom.css('display', 'none')
+                }
+                // 调整位置
+                _.delay(() => {
+                    if (
+                        this.isTooltipOpen() &&
+                        markerTooltip._map &&
+                        markerTooltip._latlng &&
+                        markerTooltip._container
+                    ) {
+                        markerTooltip._updatePosition()
+                    }
+                })
+            }
+        }
+    }
+
+})
+
+L.elasticMarker = (latLng, options) => {
+    return new L.ElasticMarker(latLng, options)
+}