@sword916/vae-map-plus 1.0.0 → 1.0.1

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

@@ -1,339 +0,0 @@
-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

@@ -1,162 +0,0 @@
-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)
-}