tg-map-echarts 4.3.0

package/dist/tg-map-echarts.mjs

@@ -0,0 +1,407 @@
+import { ComponentModel, graphic, matrix, ComponentView } from 'echarts/core';
+import { exhaustiveCheck, lateinit } from 'tg-commons';
+import { COORD_TYPE_DEFAULT, MapZoom, TgMapType, LatLng, TgMapFactory, ElementOverlay, MapPane } from 'tg-map-core';
+
+const DYNAMIC_UI_OPTION_KEYS = [
+    'gestureHandling',
+    'minZoom',
+    'maxZoom',
+    'mapStyle',
+    'hideLogo',
+    'fractionalZoom',
+];
+class TgMapModel extends ComponentModel {
+    static type = 'tgMap';
+    type = TgMapModel.type;
+    static defaultOption = {
+        engine: TgMapType.google,
+        mapOptions: {
+            center: { lat: 0, lng: 0, coord: COORD_TYPE_DEFAULT },
+            zoom: MapZoom.STATE,
+        },
+        dataCoordType: COORD_TYPE_DEFAULT,
+    };
+    coordinateSystem;
+    runtime;
+    getEngine() {
+        return this.option.engine;
+    }
+    getDataCoordType() {
+        return this.option.dataCoordType;
+    }
+    getMapOptions() {
+        return this.option.mapOptions;
+    }
+    getMap() {
+        if (!this.runtime) {
+            throw new Error('tgMap尚未创建');
+        }
+        return this.runtime.map;
+    }
+    getRuntime() {
+        return this.runtime;
+    }
+    setRuntime(runtime) {
+        this.runtime = runtime;
+    }
+    setCenterAndZoom(center, zoom) {
+        this.option.mapOptions.center = {
+            lat: center.lat,
+            lng: center.lng,
+            coord: center.coord,
+        };
+        this.option.mapOptions.zoom = zoom;
+    }
+    /** 应用坐标相关选项到地图 */
+    applyCoordinateOptions(runtime) {
+        const options = this.getMapOptions();
+        runtime.applyingOptions = true;
+        try {
+            if (runtime.dynamicOptionSnapshots.get('buildInMapTypeId') !== options.buildInMapTypeId && options.buildInMapTypeId) {
+                runtime.map.setBuildInMapTypeId(options.buildInMapTypeId);
+                runtime.dynamicOptionSnapshots.set('buildInMapTypeId', options.buildInMapTypeId);
+            }
+            if (runtime.map.getZoom() !== options.zoom) {
+                runtime.map.setZoom(options.zoom);
+            }
+            const center = LatLng.fromLiteral(options.center);
+            runtime.map.setCenterIfChanged(center);
+        }
+        finally {
+            runtime.applyingOptions = false;
+        }
+    }
+    /** 应用UI相关选项到地图 */
+    applyUIOptions(runtime) {
+        const options = this.getMapOptions();
+        runtime.applyingOptions = true;
+        try {
+            DYNAMIC_UI_OPTION_KEYS.forEach(key => {
+                const value = options[key];
+                const snapshot = typeof value !== 'object'
+                    ? value // 非对象, 可以直接缓存值
+                    : JSON.stringify(value);
+                if (runtime.dynamicOptionSnapshots.get(key) === snapshot) {
+                    return;
+                }
+                runtime.dynamicOptionSnapshots.set(key, snapshot);
+                switch (key) {
+                    case 'gestureHandling':
+                        options.gestureHandling != null && runtime.map.setGestureHandling(options.gestureHandling);
+                        break;
+                    case 'minZoom':
+                        options.minZoom != null && runtime.map.setMinZoom(options.minZoom);
+                        break;
+                    case 'maxZoom':
+                        options.maxZoom != null && runtime.map.setMaxZoom(options.maxZoom);
+                        break;
+                    case 'mapStyle':
+                        runtime.map.setMapStyle(options.mapStyle ? JSON.parse(options.mapStyle) : undefined);
+                        break;
+                    case 'hideLogo':
+                        runtime.map.setHideLogo(options.hideLogo ?? false);
+                        break;
+                    case 'fractionalZoom':
+                        runtime.map.setFractionalZoom(options.fractionalZoom ?? false);
+                        break;
+                    default:
+                        exhaustiveCheck(key);
+                        break;
+                }
+            });
+        }
+        finally {
+            runtime.applyingOptions = false;
+        }
+    }
+}
+
+class TgMapViewportOverlay extends ElementOverlay {
+    viewportRoot;
+    onOverlayDraw;
+    constructor(map, viewportRoot, onOverlayDraw) {
+        super(map, { mapPane: MapPane.overlayMouseTarget });
+        this.viewportRoot = viewportRoot;
+        this.onOverlayDraw = onOverlayDraw;
+    }
+    onCreate() {
+        return this.viewportRoot;
+    }
+    onDraw(_projection) {
+        this.onOverlayDraw();
+    }
+}
+class TgMapCoordSys {
+    map;
+    api;
+    dataCoordType;
+    static dimensions = ['lng', 'lat'];
+    static create = (ecModel, api) => {
+        let coordinateSystem;
+        ecModel.eachComponent('tgMap', (model) => {
+            if (!(model instanceof TgMapModel))
+                return;
+            if (coordinateSystem) {
+                throw new Error('一个ECharts实例只能配置一个tgMap组件');
+            }
+            let runtime = model.getRuntime();
+            if (runtime) {
+                model.applyCoordinateOptions(runtime);
+            }
+            else {
+                runtime = TgMapCoordSys.createMapRuntime(model, api);
+            }
+            console.log('TgMapCoordSys.create', runtime);
+            coordinateSystem = new TgMapCoordSys(runtime.map, api, model.getDataCoordType());
+            model.coordinateSystem = coordinateSystem;
+        });
+        ecModel.eachSeries((seriesModel) => {
+            if (seriesModel.get('coordinateSystem') === 'tgMap') {
+                if (!coordinateSystem) {
+                    throw new Error('series使用了tgMap坐标系，但option中没有配置tgMap组件');
+                }
+                seriesModel.coordinateSystem = coordinateSystem;
+            }
+        });
+        return coordinateSystem ? [coordinateSystem] : [];
+    };
+    type = 'tgMap';
+    dimensions = TgMapCoordSys.dimensions;
+    constructor(map, api, dataCoordType) {
+        this.map = map;
+        this.api = api;
+        this.dataCoordType = dataCoordType;
+    }
+    getMap() {
+        return this.map;
+    }
+    dataToPoint(data, _clamp, out = []) {
+        // bmap的实现中使用的是`overlay.getProjection()`表示的相对Pane的坐标, 再减去pane在平移时的偏移, 最终得到相对地图容器的坐标
+        // 这里直接使用containerPoint, 省得偏移来偏移去
+        const point = this.map.fromLatLngToContainerPoint(LatLng.fromLngLat(data[0], data[1], this.dataCoordType));
+        out[0] = point.x;
+        out[1] = point.y;
+        return out;
+    }
+    pointToData(point) {
+        const latLng = this.map.fromContainerPointToLatLng({ x: point[0], y: point[1] }).to(this.dataCoordType);
+        return [latLng.lng, latLng.lat];
+    }
+    containPoint(point) {
+        return this.getViewRect().contain(point[0], point[1]);
+    }
+    getViewRect() {
+        return new graphic.BoundingRect(0, 0, this.api.getWidth(), this.api.getHeight());
+    }
+    getRoamTransform() {
+        return matrix.create();
+    }
+    prepareCustoms() {
+        const rect = this.getViewRect();
+        return {
+            coordSys: {
+                type: 'tgMap',
+                x: rect.x,
+                y: rect.y,
+                width: rect.width,
+                height: rect.height,
+            },
+            api: {
+                coord: this.dataToPoint.bind(this),
+                size: this.dataToCoordSize.bind(this),
+            },
+        };
+    }
+    dataToCoordSize(dataSize, dataItem = [0, 0]) {
+        return [0, 1].map(dimIndex => {
+            const value = dataItem[dimIndex];
+            const halfSize = dataSize[dimIndex] / 2;
+            const first = [dataItem[0], dataItem[1]];
+            const second = [...first];
+            first[dimIndex] = value - halfSize;
+            second[dimIndex] = value + halfSize;
+            return Math.abs(this.dataToPoint(first)[dimIndex] - this.dataToPoint(second)[dimIndex]);
+        });
+    }
+    /**
+     * 创建的DOM层级:
+     * ```
+     * root/viewportParent         echarts的元素, viewportRoot原本的parent
+     * |--mapRoot                  class=ec-extension-tg-map
+     *    |--pane
+     *        |--viewportRoot      painter的viewportRoot
+     * ```
+     */
+    static createMapRuntime(model, api) {
+        const root = api.getDom();
+        const painter = api.getZr().painter;
+        const viewportRoot = painter.getViewportRoot();
+        const viewportParent = viewportRoot.parentNode;
+        if (!viewportParent) {
+            throw new Error('无法获取ECharts viewportRoot的父节点');
+        }
+        const mapRoot = document.createElement('div');
+        mapRoot.className = 'ec-extension-tg-map';
+        mapRoot.style.cssText = 'position:absolute;left:0;top:0;width:100%;height:100%';
+        root.insertBefore(mapRoot, root.firstChild);
+        const mapOptions = model.getMapOptions();
+        const map = TgMapFactory.createMap(model.getEngine(), mapRoot, {
+            ...mapOptions,
+            center: LatLng.fromLiteral(mapOptions.center),
+            mapStyle: mapOptions.mapStyle ? JSON.parse(mapOptions.mapStyle) : undefined,
+        });
+        const runtime = {
+            map,
+            mapRoot,
+            overlay: lateinit(),
+            viewportRoot,
+            viewportBackup: {
+                parent: viewportParent,
+                nextSibling: viewportRoot.nextSibling,
+                className: viewportRoot.className,
+                position: viewportRoot.style.position,
+                left: viewportRoot.style.left,
+                top: viewportRoot.style.top,
+                getViewportRootOffset: painter.getViewportRootOffset,
+            },
+            syncViewportPosition: lateinit(),
+            applyingOptions: false,
+            dynamicOptionSnapshots: new Map(),
+        };
+        runtime.syncViewportPosition = () => {
+            const pane = viewportRoot.parentElement;
+            if (!pane) {
+                return;
+            }
+            // 地图平移后, pane的左上角可能变化, 这里补偿变化的值, 保证viewportRoot始终和mapRoot的左上角对齐
+            const mapRect = mapRoot.getBoundingClientRect();
+            const paneRect = pane.getBoundingClientRect();
+            viewportRoot.style.left = `${mapRect.left - paneRect.left}px`;
+            viewportRoot.style.top = `${mapRect.top - paneRect.top}px`;
+        };
+        runtime.overlay = new TgMapViewportOverlay(map, viewportRoot, runtime.syncViewportPosition);
+        viewportRoot.style.position = 'absolute';
+        viewportRoot.style.left = '0';
+        viewportRoot.style.top = '0';
+        map.addElementOverlay(runtime.overlay);
+        runtime.syncViewportPosition();
+        painter.getViewportRootOffset = () => ({ offsetLeft: 0, offsetTop: 0 });
+        model.setRuntime(runtime);
+        return runtime;
+    }
+}
+
+class TgMapView extends ComponentView {
+    static type = 'tgMap';
+    type = TgMapView.type;
+    model;
+    map;
+    rendering = false;
+    changeHandler;
+    render(model, _ecModel, api) {
+        this.rendering = true;
+        try {
+            this.model = model;
+            const runtime = model.getRuntime();
+            if (!runtime) {
+                throw new Error('tgMap尚未创建');
+            }
+            if (this.map !== runtime.map) {
+                this.unbindMapEvents();
+                this.map = runtime.map;
+                this.bindMapEvents(runtime, api);
+            }
+            model.applyUIOptions(runtime);
+            console.log('TgMapView.render', runtime);
+            runtime.syncViewportPosition();
+        }
+        finally {
+            this.rendering = false;
+        }
+    }
+    dispose(_ecModel, api) {
+        this.unbindMapEvents();
+        const model = this.model;
+        const runtime = model?.getRuntime();
+        if (!model || !runtime) {
+            return;
+        }
+        if (runtime.animationFrameId !== undefined) {
+            cancelAnimationFrame(runtime.animationFrameId);
+        }
+        runtime.map.removeElementOverlay(runtime.overlay);
+        const backup = runtime.viewportBackup;
+        if (backup.nextSibling?.parentNode === backup.parent) {
+            backup.parent.insertBefore(runtime.viewportRoot, backup.nextSibling);
+        }
+        else {
+            backup.parent.appendChild(runtime.viewportRoot);
+        }
+        runtime.viewportRoot.className = backup.className;
+        runtime.viewportRoot.style.position = backup.position;
+        runtime.viewportRoot.style.left = backup.left;
+        runtime.viewportRoot.style.top = backup.top;
+        runtime.mapRoot.parentNode?.removeChild(runtime.mapRoot);
+        const painter = api.getZr().painter;
+        painter.getViewportRootOffset = backup.getViewportRootOffset;
+        model.setRuntime(undefined);
+        this.model = undefined;
+    }
+    bindMapEvents(runtime, api) {
+        this.changeHandler = () => {
+            if (this.rendering || runtime.applyingOptions || runtime.animationFrameId !== undefined) {
+                return;
+            }
+            runtime.animationFrameId = requestAnimationFrame(() => {
+                runtime.animationFrameId = undefined;
+                runtime.syncViewportPosition();
+                api.dispatchAction({
+                    type: 'tgMapRoam',
+                    animation: { duration: 0 },
+                });
+            });
+        };
+        runtime.map.addEventListener('center-changed', this.changeHandler);
+        runtime.map.addEventListener('zoom-changed', this.changeHandler);
+        runtime.map.addEventListener('tilesloaded', this.changeHandler);
+    }
+    unbindMapEvents() {
+        if (!this.map || !this.changeHandler) {
+            return;
+        }
+        this.map.removeEventListener('center-changed', this.changeHandler);
+        this.map.removeEventListener('zoom-changed', this.changeHandler);
+        this.map.removeEventListener('tilesloaded', this.changeHandler);
+        this.changeHandler = undefined;
+        this.map = undefined;
+    }
+}
+
+const TgMapExtension = {
+    install(registers) {
+        registers.registerComponentModel(TgMapModel);
+        registers.registerComponentView(TgMapView);
+        registers.registerCoordinateSystem('tgMap', TgMapCoordSys);
+        // 注册地图漫游Action：dispatchAction后先将地图实际的center/zoom回写到Model，
+        // 再通过updateLayout触发完整更新，重新创建坐标系并渲染图表；event用于更新完成后的对外通知。
+        registers.registerAction({ type: 'tgMapRoam', event: 'tgMapRoam', update: 'updateLayout' }, (_payload, ecModel) => {
+            ecModel.eachComponent('tgMap', (model) => {
+                if (!(model instanceof TgMapModel))
+                    return;
+                const runtime = model.getRuntime();
+                if (runtime) {
+                    model.setCenterAndZoom(runtime.map.getCenter(), runtime.map.getZoom());
+                }
+            });
+        });
+    },
+    // {@template echarts_on_demand_import}
+    // 导入echarts, 会自动安装LineChart等常用组件, 当前包是个echarts扩展, 不需要导入那些东西, 故只导入了echarts/core;
+    //
+    // 而echarts和echarts/core的类型声明是当前是两个独立的d.ts文件, 相互没有关系, 虽然他们的类型声明类似,
+    // 但是依然TS依然会报不兼容错误, 故对于需要导出给外部使用的类型, 需要抹除详细的类型信息
+    //
+    // {@endtemplate}
+};
+
+export { TgMapExtension };