@sl-utils/map 1.0.0

package/src/map/canvas-event.ts

@@ -0,0 +1,283 @@
+import { u_arrItemDel, u_mapGetPointByLatlng } from "../utils/slu-map";
+import rbush from 'rbush'
+/** 地图canvas事件类*/
+export class MapCanvasEvent {
+    /**地图事件控制类 */
+    constructor(map: AMAP.Map | L.Map) {
+        this.map = map;
+        this._eventSwitch(true);
+        this.map.on('moveend', this.resetRbush);
+        this.map.on('zoomend', this.resetRbush);
+    }
+    /**R树搜索 事件 */
+    private rbush = new rbush();
+    /**是否重新开始事件指针变化(使不同canvas的事件指针能正确显示)*/
+    private static ifInitCursor: boolean = true;
+    /**是否开启事件控制类初始化 */
+    private static ifInit: boolean = true;
+    /**地图销毁必须调用此方法，否则事件指针会异常 */
+    public static destory() {
+        MapCanvasEvent.ifInit = true;
+    }
+    private static initCursor() {
+        MapCanvasEvent.ifInitCursor = true
+    }
+    protected map: AMAP.Map | L.Map;
+    /** 监听事件 */
+    protected _listenCbs: { [key in SLTEventType]?: ((e: MapEventResponse<any>) => void)[] } = Object.create(null);
+    /** key 防止setEvent清除其他事件 */
+    public _allMapEvents: Map<string, MapEvent[]> = new Map();
+    /** Rbush查询子集 */
+    private _allRbush: SLTRbush<MapEvent>[] = [];
+    /** 上一次触发的事件集合 */
+    private perEvents: MapEventResponse[] = [];
+    /** 海图事件回调函数 */
+    private cbMapEvent = (e: MapEventResponse) => {
+        let { cb, cbs } = e.event;
+        if (cb) { cb(e); return; }
+        if (cbs) { cbs[e.type]?.(e); return }
+        /**响应的事件类型集合 */
+        let _cbs = this._listenCbs[e.type] || [];
+        _cbs.map(cb => cb(e));
+    };
+    /** 事件开关 
+     * @param flag true开启地图事件监听 false关闭地图事件监听
+    */
+    private _eventSwitch(flag: boolean) {
+        // this.map.off('mousemove', MapCanvasEvent.initCursor)
+        // this.map.on('mousemove', MapCanvasEvent.initCursor)
+        if (MapCanvasEvent.ifInit) {
+            MapCanvasEvent.ifInit = false;
+            this.map.on('mousemove', () => { MapCanvasEvent.ifInitCursor = true })
+        }
+        let types = ['click', 'dblclick', 'mousemove', 'mousedown', 'mouseup', 'rightclick'];
+        types.map(e => {
+            this.map[flag ? 'on' : 'off'](e, this.triggerEvent)
+        })
+    }
+    /**重设rbush */
+    private resetRbush = () => {
+        if (this.rbush) this.rbush.clear();
+        // 先暂时取消监听所有事件
+        this._eventSwitch(false);
+        this._allRbush = [];
+        this._allMapEvents.forEach(evs => {
+            evs.forEach(ev => {
+                this.transformRbush(ev);
+            })
+        })
+        this.rbush.load(this._allRbush);
+        // 设置完成重新监听
+        this._eventSwitch(true);
+    }
+    /**统一监听该类的指定事件 */
+    public on<T extends MapEvent<any>>(type: SLTEventType, cb: (e: MapEventResponse<T>) => void) {
+        let cbs = this._listenCbs[type] = this._listenCbs[type] || [];
+        cbs.push(cb);
+    }
+    /**统一关闭指定事件的监听 */
+    public off<T extends MapEvent<any>>(type: SLTEventType, cb?: (e: MapEventResponse<T>) => void) {
+        let cbs = this._listenCbs[type] = this._listenCbs[type] || [];
+        if (cb) {
+            u_arrItemDel(cbs, cb);
+        } else {
+            this._listenCbs[type] = [];
+        }
+    }
+    /**清空之前设置的统一监听事件 */
+    public clear() {
+        this._listenCbs = Object.create(null);
+    }
+    /** 
+     * @param evs 事件集合
+     * @param key 事件key
+     * 设置key 事件 会覆盖原来的事件 
+     * 不覆盖使用 pushEventByKey
+     *  */
+    public setEventsByKey<T extends MapEvent>(evs: T[], key: string) {
+        /**ifHide不显示,事件就不添加 */
+        this._allMapEvents.set(key, evs.filter(ev => !ev.ifHide));
+        this._allRbush = [];
+        this.rbush.clear();
+        // map所有事件
+        this._allMapEvents.forEach((evs) => {
+            evs.forEach(e => this.handleTransform(e));
+        });
+        this.rbush.load(this._allRbush);
+    }
+    /**
+     * 清除所有事件
+     */
+    public clearAllEvents() {
+        this._allMapEvents = new Map();
+        this._allRbush = [];
+        this.rbush.clear();
+    }
+    /**
+     * 清除指定类型事件
+     * @param key
+     */
+    public clearEventsByKey(key: string) {
+        this.setEventsByKey([], key);
+    }
+    /**
+     * 添加一个事件
+     * 尽量使用setEventsByKey 
+     * 或者pushEventByKey数组 而不是for 一个个push
+     * 不然每次for循环push都会重新构造rbush
+     *  */
+    public pushEventByKey<T extends MapEvent>(key: string, ev: T | T[]) {
+        if (!this._allMapEvents.has(key)) this._allMapEvents.set(key, []);
+        const eves = this._allMapEvents.get(key);
+        Array.isArray(ev) ? eves.push(...ev) : eves.push(ev);
+        this.setEventsByKey(eves, key);
+    }
+    /** 添加事件 */
+    private handleTransform<T extends MapEvent>(ev: T) {
+        this.transformEvent(ev);
+        this.transformRbush(ev);
+    }
+    /** 转换添加事件 */
+    private transformEvent<T extends MapEvent>(event: T) {
+        /**ifHide不显示,事件就不添加 */
+        if (event.ifHide === true) return;
+        let ev: MapEvent = {
+            latlng: event.latlng || undefined,
+            latlngs: event.latlngs || [],
+            type: event.type,
+            info: event.info,
+            cb: event.cb
+        }
+        // let ev = this.genDefaultMapEvent(event, event)
+    }
+    /** 转为Rbush数据格式 */
+    private transformRbush<T extends MapEvent>(event: T) {
+        /**ifHide不显示,事件就不添加 */
+        if (event.ifHide === true) return;
+        let { range = [5, 5], latlng, latlngs = [], left = 0, top = 0 } = event;
+        if (latlng && latlng.length === 2) latlngs = [...latlngs, latlng];
+        latlngs.forEach(latlng => {
+            const [lat, lng] = latlng;
+            let [onX, onY] = u_mapGetPointByLatlng(this.map, latlng);
+            let item: SLTRbush = {
+                minX: onX - range[0] + left,
+                minY: onY - range[1] + top,
+                maxX: onX + range[0] + left,
+                maxY: onY + range[1] + top,
+                data: event
+            }
+            this._allRbush.push(item)
+        })
+
+    }
+    /**准备触发事件 
+    * @param e 地图事件
+    */
+    private triggerEvent = (e: AMapMapsEvent | L.LeafletMouseEvent): void => {
+        let allEvents: MapEvent<any, any>[] = []
+        this._allMapEvents.forEach(eves => {
+            allEvents = allEvents.concat(eves);
+        });
+        let style: any = (document.querySelector('#map')! as HTMLElement).style;
+        style.cursor = MapCanvasEvent.ifInitCursor ? 'default' : style.cursor;
+        if (allEvents.length === 0) return;
+        let { curEvents, enterEvents, leaveEvents } = this.getEventsByRange(e);
+        enterEvents.forEach(resp => this.doCbByEventType(resp, 'mouseenter'))
+        leaveEvents.forEach(resp => this.doCbByEventType(resp, 'mouseleave'))
+        this.perEvents = curEvents;
+        if (curEvents.length == 0) return
+        MapCanvasEvent.ifInitCursor = false;
+        style.cursor = 'pointer';
+        curEvents.forEach(resp => this.doCbByEventType(resp, e.type as SLTEventType))
+    };
+    /**获取指针触发范围内的事件 */
+    private getEventsByRange(e: AMapMapsEvent | L.LeafletMouseEvent) {
+        let lng, lat, x, y, pageX, pageY, zoom = this.map.getZoom();
+        if ((e as L.LeafletMouseEvent).latlng) {
+            let event: L.LeafletMouseEvent = e as L.LeafletMouseEvent
+            ({ lng, lat } = event.latlng, { x, y } = event.containerPoint, { pageX, pageY } = event.originalEvent);
+        } else {
+            let event: AMapMapsEvent = e as AMapMapsEvent
+            ({ lng, lat } = event.lnglat, { x, y } = event.pixel, { pageX, pageY } = event.originEvent);
+        }
+        /**鼠标位置信息 */
+        let cursor: MapCursorInfo = { latlng: [lat, lng], page: [pageX, pageY], point: [x, y], }
+        /** curEvents 当前位置存在的所有事件  enterEvents 鼠标首次进入事件集合  leaveEvents 鼠标离开事件集合 */
+        let curEvents: MapEventResponse[] = [], enterEvents: MapEventResponse[] = [], leaveEvents: MapEventResponse[] = this.perEvents;
+        let curr = new Date()
+        if (e.type == 'click')
+            console.time('start');
+        // rbush查找
+        let ret = this.rbush.search({ minX: x, minY: y, maxX: x, maxY: y }) as SLTRbush<MapEvent>[]
+        ret.forEach(res => {
+            let ev = res.data;
+            let { latlng, latlngs = [], range = [5, 5], left = 0, top = 0, minZoom = 1, maxZoom = 50 } = res.data
+            if (minZoom > zoom || maxZoom < zoom) return;
+            if (latlng && latlng.length === 2) latlngs = [...latlngs, latlng];
+            let [onX, onY] = u_mapGetPointByLatlng(this.map, latlng);
+            let eventRes = this.genEventResponse(latlng, [onX, onY], ev, cursor);
+            curEvents.push(eventRes);
+            /**从之前的所有响应对象中查找是否存在位置一样的响应对象 */
+            let per = leaveEvents.find(e =>
+                e.position.latlng[0] === eventRes.position.latlng[0] && e.position.latlng[1] === eventRes.position.latlng[1]
+            );
+            if (per) {
+                /**存在则说明鼠标没有离开,则从离开事件集合中移除 */
+                u_arrItemDel(leaveEvents, per)
+            } else {
+                /**不存在则说明鼠标刚刚进入,则添加到进入事件集合 */
+                enterEvents.push(eventRes)
+            };
+        })
+        // for (let i = 0, len = allEvents.length; i < len; i++) {
+        //     let ev = allEvents[i];
+        //     let { latlng, latlngs = [], range = [5, 5], left = 0, top = 0, minZoom = 1, maxZoom = 50 } = ev;
+        //     if (minZoom > zoom || maxZoom < zoom) continue;
+        //     if (latlng && latlng.length === 2) latlngs = [...latlngs, latlng];
+        //     let sizeX = range[0], sizeY = range[1];
+        //     /**判断是否在范围内 */
+        //     for (let p = 0; p < latlngs.length; p++) {
+        //         let latlng = latlngs[p];
+        //         let [onX, onY] = u_mapGetPointByLatlng(this.map, latlng);
+        //         if ((onX - sizeX + left) <= x && x <= (onX + sizeX + left) && (onY - sizeY + top) <= y && y <= (onY + sizeY + top)) {
+        //             /**当前响应对象 */
+        //             let res = this.genEventResponse(latlng, [onX, onY], ev, cursor);
+        //             curEvents.push(res);
+        //             /**从之前的所有响应对象中查找是否存在位置一样的响应对象 */
+        //             let per = leaveEvents.find(e =>
+        //                 e.position.latlng[0] === res.position.latlng[0] && e.position.latlng[1] === res.position.latlng[1]
+        //             );
+        //             if (per) {
+        //                 /**存在则说明鼠标没有离开,则从离开事件集合中移除 */
+        //                 u_arrItemDel(leaveEvents, per)
+        //             } else {
+        //                 /**不存在则说明鼠标刚刚进入,则添加到进入事件集合 */
+        //                 enterEvents.push(res)
+        //             };
+        //         }
+        //     }
+        // }
+        if (e.type == 'click')
+            console.timeEnd('start');
+        return { curEvents, enterEvents, leaveEvents }
+    }
+    /**通过事件类型执行回调函数*/
+    private doCbByEventType(resp: MapEventResponse, type: SLTEventType) {
+        let types = resp.event.type;
+        if (!Array.isArray(types)) types = [types];
+        if (!types.includes(type)) return;
+        resp.type = type;
+        this.cbMapEvent(resp)
+    }
+    /**生成地图事件响应对象 
+     * @param latlng 该事件对象的地图坐标
+     * @param point 该事件对象的地图像素坐标
+     * @param event 地图事件
+     * @param cursor 鼠标位置信息
+    */
+    private genEventResponse(latlng: [number, number], point: [number, number], event: MapEvent, cursor: MapCursorInfo): MapEventResponse {
+        let pageX = point[0] + cursor.page[0] - cursor.point[0], pageY = point[1] + cursor.page[1] - cursor.point[1];
+        let position: MapCursorInfo = { latlng: latlng, page: [pageX, pageY], point: point, }
+        return { position, cursor, event, info: event.info ?? {}, type: 'unset' };
+    }
+}

package/src/map/canvas-layer.ts

@@ -0,0 +1,191 @@
+import * as L from "leaflet";
+import { u_mapGetMapSize } from "../utils/slu-map";
+declare var AMap: any;
+/** 地图canvas基础图层类(基本所有插件都要继承此类) 删除永远比新增简单 */
+export class MapCanvasLayer {
+    constructor(MAP: L.Map, opt?: MapCanvasPara)
+    constructor(MAP: AMAP.Map, opt?: AMAP.CustomLayerOption)
+    constructor(MAP: AMAP.Map | L.Map, opt?: AMAP.CustomLayerOption | MapCanvasPara)
+    constructor(map: AMAP.Map | L.Map, opt?: AMAP.CustomLayerOption | MapCanvasPara) {
+        this.map = map;
+        Object.assign(this.options, opt);
+        if (map instanceof L.Map) {
+            this.type = 0;
+            let layer = this.layer = new L.Layer(this.options);
+            this.layer.onAdd = () => { this.onAdd(); return layer }
+        } else if (map instanceof AMap.Map) {
+            this.type = 1;
+            opt = Object.assign({
+                zooms: [3, 18],
+                alwaysRender: false,//缩放过程中是否重绘，复杂绘制建议设为false
+                zIndex: 200,
+            }, opt);
+            this.layer = new AMap.CustomLayer(this.canvas, opt);
+        }
+        this.initCanvas();
+        this.onAdd();
+    }
+    /**开发自己设置项目使用了的地图插件类型Leaflet(0)、高德(1)、百度(2),防止网络加载的第三方插件再使用instanceof是为define*/
+    protected readonly type: 0 | 1 | 2;
+    protected readonly map!: AMAP.Map | L.Map;
+    private layer: L.Layer | AMAP.CustomLayer;
+    protected readonly canvas: HTMLCanvasElement = document.createElement('canvas');
+    protected readonly ctx: CanvasRenderingContext2D = this.canvas.getContext("2d")!;
+    protected width: number = 0;
+    protected height: number = 0;
+    public readonly options: SLPMap.Canvas = {
+        pane: 'canvas',
+    };
+    /**动画循环的id标识 */
+    protected flagAnimation: number = 0;
+    /**移除图层 */
+    public onRemove() {
+        const { flagAnimation } = this;
+        this._eventSwitch(false);
+        if (flagAnimation) cancelAnimationFrame(flagAnimation);
+        this._onAmapRemove();
+        this._onLeafletRemove();
+        return this;
+    }
+    /** 清空并重新设置画布 */
+    public resetCanvas(): void {
+        const { canvas, map } = this;
+        if (map instanceof L.Map) {
+            var topLeft = map.containerPointToLayerPoint([0, 0]);
+            L.DomUtil.setPosition(canvas, topLeft);
+        }
+        const { w, h } = u_mapGetMapSize(map);
+        canvas.style.width = w + 'px';
+        canvas.style.height = h + 'px';
+        //清除画布
+        this.width = canvas.width = w;
+        this.height = canvas.height = h;
+    }
+    /**添加或关闭地图特定的监听事件(_eventSwitch事件后自动调用) */
+    protected addMapEvents(map: AMAP.Map | L.Map, key: 'on' | 'off') { }
+    /**绘制静态数据推荐使用此方法(固定的图) */
+    protected renderFixedData() { };
+    /** 推荐使用此方法绘制动态图(跟随鼠标拖动，移动时需要立刻绘制时)
+     ** 动画图层绘制前的画布清空、计算等均在此方法中自行计算 
+     ** 与renderFixedData本质是一样的
+     */
+    protected renderAnimation() { };
+    /** */
+    protected on(key: string, cb: Function) {
+        this.map.on(key, (e) => { cb() })
+    }
+    /** */
+    protected off(key: string, cb: Function) {
+        this.map.off(key, (e) => { cb() })
+    }
+    /**初始化canvas */
+    private initCanvas() {
+        const { canvas, map, type, options, layer } = this;
+        canvas.className = `sl-layer ${options.className || 'sl-canvas-map'}`;
+        canvas.style['zIndex'] = `${options.zIndex || 100}`;
+        canvas.style['transformOrigin'] = '50% 50%';
+        this.initLeafletCanvas();
+    }
+    /** 将图层添加到map实例中显示 */
+    private onAdd() {
+        this._onAmapAdd();
+        this._eventSwitch(true);
+        let layer: any = this.layer
+        layer['render'] = this._redraw;
+        return this;
+    }
+    /**基础的监听事件   
+    * @param flag true开启重绘事件监听 false 关闭重绘事件监听
+    **/
+    private _eventSwitch(flag: boolean = true) {
+        let map = this.map;
+        let key: 'on' | 'off' = flag ? 'on' : 'off';
+        this.addLeafletEvent(flag);
+        this.addMapEvents(map, key);
+    }
+    /**基础绘制 */
+    /** 重绘(子类重写也无效)
+     ** 清空之前的绘制
+     ** ①高德地图渲染配置alwaysRender:true后拖动缩放会多次渲染
+     */
+    protected _redraw = () => {
+        console.log('##########--------MapCanvasLayer=>_redraw--------##########')
+        if (!this.map) return;
+        this.resetCanvas();
+        this.renderFixedData();
+        this.renderAnimation();
+    };
+    /**------------------------------高德地图的实现------------------------------*/
+    private _onAmapAdd() {
+        const { map, layer, type } = this;
+        if (type === 1) {
+            (layer as AMAP.CustomLayer).setMap(map as AMAP.Map);
+        }
+    }
+    private _onAmapRemove() {
+        const { map, layer, type } = this;
+        if (type === 1) {
+            map.remove(layer as AMAP.CustomLayer);
+            // (layer as AMAP.CustomLayer).destroy();
+        }
+    }
+    /**------------------------------Leaflet地图的实现------------------------------*/
+    /**初始化画布并添加到Pane中 */
+    private initLeafletCanvas() {
+        const { canvas, map, type, options } = this;
+        if (type || !(map instanceof L.Map)) return;
+        let pane = options.pane || 'overlayPane', paneEle = map.getPane(pane) || map.createPane(pane);
+        /**如果指定的pane不存在就自己创建(往map添加div Pane) */
+        paneEle.appendChild(canvas);
+        paneEle.style.pointerEvents = 'none';
+        let animated = map.options.zoomAnimation && L.Browser.any3d;
+        L.DomUtil.addClass(canvas, 'leaflet-zoom-' + (animated ? 'animated' : 'hide'));
+        L.extend(canvas, {
+            onselectstart: L.Util.falseFn,
+            onmousemove: L.Util.falseFn,
+            onload: L.bind(this._onCanvasLoad, this),
+        });
+    }
+    /**移除 */
+    private _onLeafletRemove() {
+        let { map, layer, options, type } = this;
+        if (type == 0) {
+            let pane = options.pane;
+            pane && (map as L.Map).getPane(pane)?.removeChild(this.canvas);
+            (layer as L.Layer).remove();
+        }
+    }
+    private addLeafletEvent(flag: boolean = true) {
+        let map = this.map;
+        if (map instanceof L.Map) {
+            /**为了和高德保持一致，初始化后渲染一次 */
+            requestAnimationFrame(() => this._reset());
+            let key: 'on' | 'off' = flag ? 'on' : 'off';
+            map[key]('viewreset', this._reset, this);
+            map[key]('resize', this._reset, this);
+            map[key]('moveend', this._reset, this);
+            if (map.options.zoomAnimation && L.Browser.any3d) {
+                /**缩放动画 */
+                map[key]('zoomanim', this._animateZoom, this);
+            }
+        };
+    }
+    /**重设画布,并重新渲染*/
+    private _reset() {
+        this.resetCanvas();
+        this._redraw();
+    }
+    /**缩放动画 */
+    private _animateZoom(e: any) {
+        let map: any = this.map;
+        var scale = map.getZoomScale(e.zoom),
+            offset = map._getCenterOffset(e.center)._multiplyBy(-scale).subtract(map._getMapPanePos());
+        L.DomUtil.setTransform(this.canvas, offset, scale);
+    }
+    private _onCanvasLoad() {
+        if (this.layer instanceof L.Layer) this.layer.fire('load');
+    }
+
+
+
+}