@sword916/vae-map-plus 1.0.0 → 1.0.1

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

@@ -1,284 +0,0 @@
-import buffer from './buffer'
-
-const fns = {
-
-    /**
-     * 角度转弧度
-     * @param {角度} angle
-     */
-    angleToRad(angle) {
-        return angle * Math.PI / 180
-    },
-
-    /**
-     * 弧度转角度
-     * @param {弧度} rad
-     */
-    radToAngle(rad) {
-        return rad * 180 / Math.PI
-    },
-
-    /**
-     * 水平角度转顺时针角
-     * @param {角度} angle
-     */
-    toClockwiseAngle(angle) {
-        let a = 90 - angle
-        if (a < 0) {
-            a += 360
-        }
-        return a
-    },
-
-    /**
-     * 求两点水平弧度
-     * @param {L.Point} a 起点
-     * @param {L.Point} b 终点
-     */
-    computeRad(a, b) {
-        return Math.atan2(b.y - a.y, b.x - a.x)
-    },
-
-    /**
-     * 求两点水平角度
-     * @param {L.Point} a 起点
-     * @param {L.Point} b 终点
-     */
-    computeAngle(a, b) {
-        return this.radToAngle(this.computeRad(a, b))
-    },
-
-    /**
-     * 获取线段夹角弧度
-     * @param {L.Point} a 交点
-     * @param {L.Point} b 终点一
-     * @param {L.Point} c 终点二
-     */
-    segmentsRad(a, b, c) {
-        const x1 = b.x - a.x
-        const y1 = b.y - a.y
-        const x2 = c.x - a.x
-        const y2 = c.y - a.y
-
-        const dot = x1 * x2 + y1 * y2
-        const det = x1 * y2 - y1 * x2
-
-        return Math.atan2(det, dot)
-    },
-
-    /**
-     * 获取点到线段所在直线的垂足
-     * @param {L.Point} a 点
-     * @param {L.Point} m 线段起点
-     * @param {L.Point} n 线段终点
-     */
-    footPointOnLine(a, m, n) {
-        const s = (m.x - n.x) * (m.x - n.x) + (m.y - n.y) * (m.y - n.y)
-        const p = (a.x - m.x) * (n.x - m.x) + (a.y - m.y) * (n.y - m.y)
-        const r = p / s
-        const x = m.x + r * (n.x - m.x)
-        const y = m.y + r * (n.y - m.y)
-
-        return L.point(x, y)
-    },
-
-    /**
-     * 两线段所在直线的交点坐标，平行或共线时不返回
-     * @param {L.Point} a 线段一起点
-     * @param {L.Point} b 线段一终点
-     * @param {L.Point} c 线段二起点
-     * @param {L.Point} d 线段二终点
-     */
-    linesIntersection(a, b, c, d) {
-        const denominator = (b.y - a.y) * (d.x - c.x) - (a.x - b.x) * (c.y - d.y)
-        if (denominator) {
-            const x = ((b.x - a.x) * (d.x - c.x) * (c.y - a.y) +
-                (b.y - a.y) * (d.x - c.x) * a.x -
-                (d.y - c.y) * (b.x - a.x) * c.x) / denominator
-            const y = -((b.y - a.y) * (d.y - c.y) * (c.x - a.x) +
-                (b.x - a.x) * (d.y - c.y) * a.y -
-                (d.x - c.x) * (b.y - a.y) * c.y) / denominator
-
-            return L.point(x, y)
-        }
-    },
-
-    /**
-     * 根据经纬度计算累计距离，单位米
-     * @param {Array<L.LatLng>} latLngs
-     * @param {L.CRS} 坐标系，默认使用L.CRS.EPSG3857
-     */
-    distanceByLatLngs(latLngs, crs = L.CRS.EPSG3857) {
-        if (typeof (crs.distance) !== 'function') {
-            crs = L.CRS.EPSG3857
-        }
-        let sum = 0
-        if (Array.isArray(latLngs) && latLngs.length > 1) {
-            for (let i = 0; i < latLngs.length - 1; i++) {
-                sum += crs.distance(latLngs[i], latLngs[i + 1])
-            }
-        }
-        return sum
-    },
-
-    /**
-     * 根据经纬度计算面积，单位平方米
-     * @param {Array<L.LatLng>} latLngs
-     */
-    areaByLatLngs(latLngs) {
-        let pointsCount = latLngs.length,
-            area = 0.0,
-            d2r = Math.PI / 180,
-            p1, p2
-
-        if (pointsCount > 2) {
-            for (let i = 0; i < pointsCount; i++) {
-                p1 = latLngs[i]
-                p2 = latLngs[(i + 1) % pointsCount]
-                area += ((p2.lng - p1.lng) * d2r) * (2 + Math.sin(p1.lat * d2r) + Math.sin(p2.lat * d2r))
-            }
-            area = area * 6378137.0 * 6378137.0 / 2.0
-        }
-
-        return Math.abs(area)
-    },
-
-    /**
-     * 根据坐标点计算面积
-     * @param {Array<L.Point>} points
-     */
-    areaByPoints(points) {
-        let area = 0
-        if (Array.isArray(points) && points.length > 2) {
-            let sum = 0
-            for (let i = 0; i < points.length; i++) {
-                if (i + 1 == points.length) {
-                    sum += points[i].x * points[0].y - points[0].x * points[i].y
-                } else {
-                    sum += (points[i].x * points[i + 1].y - points[i + 1].x * points[i].y)
-                }
-            }
-            area = 1 / 2 * Math.abs(sum)
-        }
-        return area
-    },
-
-    /**
-     * 转换面积，增加单位
-     * @param {number} area 面积数字，单位平方米
-     */
-    readableArea(area) {
-        let areaStr = 0
-        if (area > 1000 * 1000) {
-            areaStr = (area / (1000 * 1000)).toFixed(2) + ' km²';
-        } else {
-            areaStr = Math.ceil(area) + ' m²';
-        }
-        return areaStr
-    },
-
-    /**
-     * 点是否在多边形内，射线法
-     * @param {L.Point} point 给定点
-     * @param {Array<L.Point>} points 多边形坐标
-     * @returns {Boolean} 是否置于多边形内或边界上
-     */
-    isPointInPoly(point, points) {
-        const px = point.x
-        const py = point.y
-        let flag = false
-
-        // 是否置于边界上
-        let isOn = false
-        // 遍历边界
-        const length = points.length
-        for (let i = 0, j = length - 1; i < length; j = i, i++) {
-            const sx = points[i].x
-            const sy = points[i].y
-            const tx = points[j].x
-            const ty = points[j].y
-
-            // 点与多边形顶点重合
-            if ((sx === px && sy === py) || (tx === px && ty === py)) {
-                isOn = true
-            }
-
-            // 判断线段两端点是否在射线两侧
-            if ((sy < py && ty >= py) || (sy >= py && ty < py)) {
-                // 线段上与射线Y坐标相同的点的X坐标
-                const x = sx + (py - sy) * (tx - sx) / (ty - sy)
-                // 点在多边形的边上
-                isOn = (x === px)
-                // 射线穿过边界
-                if (x > px) {
-                    flag = !flag
-                }
-            }
-            if (isOn) {
-                break
-            }
-        }
-
-        return isOn || flag
-    },
-
-    /**
-     * 点到面的距离，在内部视为0
-     * @param {L.Point} point 给定点
-     * @param {Array<L.Point>} points 多边形坐标
-     * @param {L.CRS} crs 地图CRS
-     * @returns {Boolean} 距离数值，若CRS可用，单位为米
-    */
-    distanceToPoly(point, points, crs) {
-        let result = 0
-        if (!this.isPointInPoly(point, points)) {
-            let distances = []
-            let ps = []
-            const length = points.length
-            for (let i = 0, j = length - 1; i < length; j = i, i++) {
-                distances.push(L.LineUtil.pointToSegmentDistance(point, points[i], points[j]))
-                ps.push(L.LineUtil.closestPointOnSegment(point, points[i], points[j]))
-            }
-            result = _.min(distances)
-            const index = _.indexOf(distances, result)
-            const closePoint = ps[index]
-            if (crs && crs.unproject) {
-                const latLng1 = crs.unproject(point)
-                const latLng2 = crs.unproject(closePoint)
-                result = crs.distance(latLng1, latLng2)
-            }
-        }
-        return result
-    },
-
-    /**
-     * 点到折线的距离
-     * @param {L.Point} point 给定点
-     * @param {Array<L.Point>} points 折线坐标
-     * @param {L.CRS} crs 地图CRS
-     * @param {Boolean} 距离数值，若CRS可用，单位为米
-     */
-    distanceToLine(point, points, crs) {
-        let result = 0
-        let distances = []
-        let ps = []
-        if (Array.isArray(points) && points.length > 1) {
-            for (let i = 0; i < points.length - 1; i++) {
-                distances.push(L.LineUtil.pointToSegmentDistance(point, points[i], points[i + 1]))
-                ps.push(L.LineUtil.closestPointOnSegment(point, points[i], points[i + 1]))
-            }
-            result = _.min(distances)
-            const index = _.indexOf(distances, result)
-            const closePoint = ps[index]
-            if (crs && crs.unproject) {
-                const latLng1 = crs.unproject(point)
-                const latLng2 = crs.unproject(closePoint)
-                result = crs.distance(latLng1, latLng2)
-            }
-        }
-        return result
-    }
-
-}
-
-L.GeoUtil = L.extend(L.GeoUtil || {}, _.assign(fns, buffer))

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

@@ -1,91 +0,0 @@
-import './style.less'
-
-L.Glyphicon = L.DivIcon.extend({
-
-    options: {
-        icon: 'fas fa-leaf',
-        size: 32,
-        fontSize: null,
-        background: 'white',
-        color: '#4d90fe',
-        borderRadius: null,
-        borderWidth: 2,
-        borderColor: null,
-        boxShadow: true,
-        additionalCSS: '',
-        className: '',
-        effect: {
-            type: null,
-            size: null,
-            color: null,
-            interval: null
-        }
-    },
-
-    initialize(options = {}) {
-        L.setOptions(this, options)
-
-        // 图标元素-外层
-        let args = this.options
-        let container = document.createElement('div')
-        L.DomUtil.addClass(container, 'vae-glyphicon')
-        let style = []
-        style.push(`height:${args.size - args.borderWidth * 2}px`)
-        style.push(`width:${args.size - args.borderWidth * 2}px`)
-        style.push(`color:${args.color}`)
-        let fontSize = _.isNil(args.fontSize) ? args.size / 2 : args.fontSize
-        style.push(`font-size:${fontSize}px`)
-        let borderRadius = _.isNil(args.borderRadius) ? args.size : args.borderRadius
-        style.push(`border-radius:${borderRadius}px`)
-        style.push(`border-width:${args.borderWidth}px`)
-        style.push(`border-color:${args.borderColor || args.color}`)
-        style.push("border-style:solid")
-        style.push(`background-color:${args.background}`)
-        if (args.boxShadow) {
-            style.push("box-shadow:0 2px 6px 0 rgba(0, 0, 0, 0.2)")
-        }
-        style.push(args.additionalCSS)
-        let styleAttributes = document.createAttribute("style")
-        styleAttributes.value = style.join(";")
-
-        // 图标元素-内层
-        let iconElement = document.createElement("div")
-        L.DomUtil.addClass(iconElement, args.icon)
-
-        container.setAttributeNode(styleAttributes)
-        container.appendChild(iconElement)
-
-        // 特效元素
-        let effect = args.effect
-        if (effect && effect.type) {
-            let effectElement = document.createElement('div')
-            let effectType = effect.type
-            if (effectType === 'halo') {
-                let effectStyleAttributes = document.createAttribute("style")
-                let effectStyles = []
-                L.DomUtil.addClass(effectElement, 'halo')
-                let effectSize = effect.size || args.size * 3
-                effectStyles.push(`height:${effectSize}px`)
-                effectStyles.push(`width:${effectSize}px`)
-                let effectColor = effect.color || args.color
-                effectStyles.push(`background-color:${effectColor}`)
-                effectStyles.push(`top:-${(effectSize - args.size) / 2}px`)
-                effectStyles.push(`left:-${(effectSize - args.size) / 2}px`)
-                effectStyles.push(`animation:vae-effect-${effectType} ${effect.interval || 2}s 0s infinite ease-in`)
-                effectStyleAttributes.value = effectStyles.join(";")
-                effectElement.setAttributeNode(effectStyleAttributes)
-            }
-            container.appendChild(effectElement)
-        }
-
-        L.DivIcon.prototype.initialize.call(this, {
-            html: container.outerHTML,
-            iconSize: [args.size, args.size],
-            className: args.className
-        })
-    }
-})
-
-L.glyphicon = function (options) {
-    return new L.Glyphicon(options)
-}

package/src/plugins/L.Glyphicon/style.less

@@ -1,37 +0,0 @@
-.vae-glyphicon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .halo {
-        border-radius: 50% 50%;
-        position: absolute;
-        pointer-events: none;
-        z-index: -1;
-    }
-}
-
-// 光晕扩散
-@keyframes vae-effect-halo {
-    0% {
-        transform: scale(0.2);
-        opacity: 0;
-    }
-
-    65% {
-        opacity: 0.75;
-    }
-
-    75% {
-        opacity: 0.75;
-    }
-
-    85% {
-        opacity: 0.2;
-    }
-
-    100% {
-        transform: scale(1);
-        opacity: 0;
-    }
-}

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

@@ -1,93 +0,0 @@
-import './style.less'
-
-// 自定义聚合图标
-function iconCreateFunction(cluster) {
-
-    // 尺寸和颜色设六个级别
-    let level = 1
-    let iconSize = 30
-    let borderSize = 6
-
-    const count = cluster.getChildCount()
-    // 0-9
-    if (count > 0 && count <= 9) {
-        level = 1
-        iconSize = 30
-        borderSize = 6
-    }
-    // 10-49
-    else if (count > 9 && count <= 49) {
-        level = 2
-        iconSize = 38
-        borderSize = 8
-    }
-    // 50-99
-    else if (count > 49 && count <= 99) {
-        level = 3
-        iconSize = 46
-        borderSize = 8
-    }
-    // 100-499
-    else if (count > 99 && count <= 499) {
-        level = 4
-        iconSize = 54
-        borderSize = 10
-    }
-    // 500-999
-    else if (count > 499 && count < 999) {
-        level = 5
-        iconSize = 62
-        borderSize = 10
-    }
-    // 999+
-    else {
-        level = 6
-        iconSize = 70
-        borderSize = 12
-    }
-
-    const className = `vae-markercluster--icon style--${this.iconStyle || 'blue'} level--${level}`
-    const innerSize = iconSize - borderSize
-
-    const outerStyle = `border-radius:${iconSize / 2}px;`
-    const innerStyle = `height:${innerSize}px;width:${innerSize}px;border-radius:${innerSize / 2}px;`
-
-    return L.divIcon({
-        html: `<div class="outer center" style="${outerStyle}"><div class="inner center" style="${innerStyle}">${count}</div></div>`,
-        className,
-        iconSize: [iconSize, iconSize]
-    })
-}
-
-L.MarkerClusterGroupX = L.MarkerClusterGroup.extend({
-
-    options: {
-        iconStyle: 'blue',
-        showCoverageOnHover: false,
-        maxClusterRadius: 60,
-        spiderLegPolylineOptions: {
-            weight: 2,
-            dashArray: [5, 5],
-            interactive: false,
-            opacity: 0.8
-        },
-        iconCreateFunction
-    },
-
-    initialize(options = {}) {
-        L.setOptions(this, options)
-        const iconStyle = this.options.iconStyle || 'blue'
-        this.options.spiderLegPolylineOptions.color =
-            iconStyle == 'red' ? 'hsl(354, 70%, 54%)' : iconStyle == 'blue' ? 'hsl(211, 100%, 45%)' : iconStyle == 'green' ? 'hsl(134, 61%, 41%)'
-                : iconStyle == 'gray' ? '#606266' : iconStyle == 'yellow' ? '#f9c31f' : iconStyle == 'orange' ? '#fd7e14'
-                    : iconStyle == 'cyan' ? '#17a2b8' : iconStyle == 'purple' ? '#5c11d4' : iconStyle == 'pink' ? '#e83e8c'
-                        : iconStyle == 'transparent' ? 'rgba(0,0,0,0.6)' : null
-
-        L.MarkerClusterGroup.prototype.initialize.call(this, this.options)
-    }
-
-})
-
-L.markerClusterGroupX = function (options) {
-    return new L.MarkerClusterGroupX(options)
-}

package/src/plugins/L.MarkerClusterX/style.less

@@ -1,162 +0,0 @@
-// 聚合图标
-.vae-markercluster--icon {
-
-    .outer {
-        height: 100%;
-        width: 100%;
-        font-size: 12px;
-
-        .inner {
-            color: white;
-            font-weight: bold;
-        }
-    }
-
-    .center {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-
-    // 红色
-    each(range(6), {
-            &.style--red.level--@{value} {
-                .outer {
-                    background: darken(#ff7d52, @value * 2%);
-
-                    .inner {
-                        background: darken(hsl(354, 70%, 54%), @value * 3%);
-                    }
-                }
-            }
-        }
-    )
-
-    // 橙色
-    each(range(6), {
-            &.style--orange.level--@{value} {
-                .outer {
-                    background: darken(#f9c31f, @value * 1%);
-                    
-                    .inner {
-                        background: darken(#fd7e14, @value * 2%);
-                    }
-                }
-            }
-        }
-    )
-
-    // 黄色
-    each(range(6), {
-            &.style--yellow.level--@{value} {
-                .outer {
-                    background: darken(#fdfd77, @value * 2%);
-                    
-                    .inner {
-                        background: darken(#f9c31f, @value * 3%);
-                    }
-                }
-            }
-        }
-    )
-
-    // 蓝色
-    each(range(6), {
-            &.style--blue.level--@{value} {
-                .outer {
-                    background: darken(hsl(200, 100%, 67%), @value * 2%);
-
-                    .inner {
-                        background: darken(hsl(211, 100%, 45%), @value * 3%);
-                    }
-                }
-            }
-        }
-    )
-
-    // 绿色
-    each(range(6), {
-            &.style--green.level--@{value} {
-                .outer {
-                    background: darken(hsl(100, 54%, 58%), @value * 2%);
-
-                    .inner {
-                        background: darken(hsl(134, 61%, 41%), @value * 3%);
-                    }
-                }
-            }
-        }
-    )
-
-    // 青绿
-    each(range(6), {
-            &.style--cyan.level--@{value} {
-                .outer {
-                    background: darken(aqua, @value * 1%);
-                    
-                    .inner {
-                        background: darken(#17a2b8, @value * 2%);
-                    }
-                }
-            }
-        }
-    )
-
-    // 紫色
-    each(range(6), {
-            &.style--purple.level--@{value} {
-                .outer {
-                    background: darken(hsl(211, 90%, 70%), @value * 2%);
-                    
-                    .inner {
-                        background: darken(#5c11d4, @value * 3%);
-                    }
-                }
-            }
-        }
-    )
-
-    // 粉色
-    each(range(6), {
-            &.style--pink.level--@{value} {
-                .outer {
-                    background: darken(#f7bac9, @value * 2%);
-                    
-                    .inner {
-                        background: darken(#e83e8c, @value * 3%);
-                    }
-                }
-            }
-        }
-    )
-
-
-    // 灰色
-    each(range(6), {
-            &.style--gray.level--@{value} {
-                .outer {
-                    background: darken(#c0c4cc, @value * 2%);
-
-                    .inner {
-                        background: darken(#606266, @value * 3%);
-                    }
-                }
-            }
-        }
-    )
-  
-    // 透明
-    each(range(6), {
-            &.style--transparent.level--@{value} {
-                .outer {
-                    background: darken(rgba(0,0,0,0.2), @value * 2%);
-                    
-                    .inner {
-                        background: darken(rgba(0,0,0,0.6), @value * 3%);
-                    }
-                }
-            }
-        }
-    )    
-    
-}