@sword916/vae-map-plus 1.0.0

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

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

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

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

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

@@ -0,0 +1,162 @@
+// 聚合图标
+.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%);
+                    }
+                }
+            }
+        }
+    )    
+    
+}