my-openlayer 0.0.15 → 0.0.17

package/dist/MyOl.d.ts

@@ -0,0 +1,96 @@
+import View from "ol/View";
+import Map from "ol/Map";
+import Polygon from "./core/Polygon";
+import Point from "./core/Point";
+import Line from "./core/Line";
+import MapTools from "./core/MapTools";
+import { OptionsType, MapInitType, MapbaseType } from './types';
+export default class MyOl {
+    map: Map;
+    private baseLayers;
+    private polygon;
+    private mapTools;
+    private point;
+    private line;
+    private readonly options;
+    static DefaultOptions: MapInitType;
+    constructor(id: string, options: MapInitType);
+    /**
+     * 获取视图
+     * @param options 视图配置
+     * @param options.center 中心点
+     * @param options.zoom 缩放级别
+     * @param options.minZoom 最小缩放级别
+     * @param options.maxZoom 最大缩放级别
+     * @param options.extent 视图范围
+     * @returns View
+     */
+    static getView(options?: MapInitType): View;
+    /**
+     * 获取 地图 面 操作
+     * @returns Polygon
+     */
+    getPolygon(): Polygon;
+    getMapBaseLayers(): any;
+    /**
+     * 设置底图
+     */
+    setMapLayer(type?: MapbaseType): void;
+    setZhujiMapLayer(show: boolean): void;
+    /**
+     * 设置地图边界
+     */
+    addPolygonToMap(data: any, type: string | undefined, options: OptionsType): void;
+    /**
+     * 设置 图片致地图
+     * @param layerName 图层名称
+     * @param img 图片地址
+     * @param extent 图片范围
+     * @param options 图片配置
+     */
+    setImgLayer(layerName: string, img: string, extent: number[], options?: {}): void;
+    /**
+     * 隐藏&展示图层
+     * @param layerName 图层名称
+     * @param show 是否显示
+     */
+    showMapLayer(layerName: string, show?: boolean): boolean;
+    /**
+     * 获取 地图 点 操作
+     * @returns Point
+     */
+    getPoint(): Point;
+    /**
+     * 获取 地图 线 操作
+     * @returns Line
+     */
+    getLine(): Line;
+    /**
+     * 设置闪烁点
+     * @param twinkleList 闪烁点数据
+     * @param className 闪烁点样式
+     * @param key 闪烁点索引
+     */
+    setFlashWarnPoint(twinkleList: any[], className: string, key: string): void;
+    /**
+     * 获取 地图 工具 操作
+     * @returns MapTools
+     */
+    getTools(): MapTools;
+    restPosition(duration?: number): void;
+    /**
+     * 地图定位
+     * @param lgtd 经度
+     * @param lttd 纬度
+     * @param zoom 缩放级别
+     * @param duration 动画时间
+     */
+    locationAction(lgtd: number, lttd: number, zoom?: number, duration?: number): void;
+    /**
+     * 地图监听事件
+     * @param eventType 事件类型
+     * @param clickType 点击类型
+     * @param callback 回调函数
+     */
+    mapOnEvent(eventType: string | undefined, callback: (feature?: any, e?: any) => void, clickType?: 'point' | 'line' | 'polygon' | undefined): void;
+}

package/dist/MyOl.js

@@ -0,0 +1,248 @@
+"use strict";
+import { register as olProj4Register } from 'ol/proj/proj4';
+import { Projection as olProjProjection, addProjection as olProjAddProjection, fromLonLat as olProjFromLonLat } from 'ol/proj';
+import View from "ol/View";
+import Map from "ol/Map";
+import Polygon from "./core/Polygon";
+import Point from "./core/Point";
+import Line from "./core/Line";
+import MapBaseLayers from "./core/MapBaseLayers";
+import proj4 from "proj4";
+import MapTools from "./core/MapTools";
+import { defaults as defaultControls } from 'ol/control';
+// import { Pixel } from "ol/pixel";
+// import { FeatureLike } from "ol/Feature";
+// import { MapBrowserEvent } from "ol";
+class MyOl {
+    constructor(id, options) {
+        options.center = options.center || MyOl.DefaultOptions.center;
+        this.options = { ...MyOl.DefaultOptions, ...options };
+        this.map = new Map({
+            target: id, // 地图容器
+            view: MyOl.getView(this.options), // 视图
+            layers: this.options.layers || [],
+            controls: defaultControls({
+                zoom: false,
+                rotate: false,
+                attribution: false
+            }).extend([])
+        });
+    }
+    /**
+     * 获取视图
+     * @param options 视图配置
+     * @param options.center 中心点
+     * @param options.zoom 缩放级别
+     * @param options.minZoom 最小缩放级别
+     * @param options.maxZoom 最大缩放级别
+     * @param options.extent 视图范围
+     * @returns View
+     */
+    static getView(options = MyOl.DefaultOptions) {
+        proj4.defs("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs");
+        proj4.defs("EPSG:4549", "+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs");
+        olProj4Register(proj4);
+        const cgsc2000 = new olProjProjection({
+            code: "EPSG:4490",
+            extent: [-180, -90, 180, 90],
+            worldExtent: [-180, -90, 180, 90],
+            units: "degrees"
+        });
+        olProjAddProjection(cgsc2000);
+        // debugger
+        // 视图配置
+        const viewOptions = {
+            projection: cgsc2000, // 坐标系
+            center: olProjFromLonLat(options.center, cgsc2000), // 中心点
+            zoom: options.zoom || 10, // 缩放级别
+            minZoom: options.minZoom || 8,
+            maxZoom: options.maxZoom || 20
+        };
+        if (options.extent)
+            viewOptions.extent = options.extent;
+        return new View(viewOptions);
+    }
+    //  ╔══════════╗
+    //  ║  地图 面  ║
+    //  ╚══════════╝
+    /**
+     * 获取 地图 面 操作
+     * @returns Polygon
+     */
+    getPolygon() {
+        if (!this.polygon)
+            this.polygon = new Polygon(this.map);
+        return this.polygon;
+    }
+    getMapBaseLayers() {
+        if (!this.baseLayers)
+            this.baseLayers = new MapBaseLayers(this.map, {
+                zIndex: 1,
+                mapClip: !!this.options.mapClipData,
+                mapClipData: this.options.mapClipData,
+                token: this.options.token || ''
+            });
+        return this.baseLayers;
+    }
+    /**
+     * 设置底图
+     */
+    setMapLayer(type = 'tianditu') {
+        // 添加影像底图
+        this.getMapBaseLayers().addMapLayer(type);
+    }
+    setZhujiMapLayer(show) {
+        this.getMapBaseLayers().addZhujiLayer(show);
+    }
+    /**
+     * 设置地图边界
+     */
+    addPolygonToMap(data, type = 'fuyangqu', options) {
+        this.getPolygon().addPolygonMapLayer(data, type, options);
+    }
+    /**
+     * 设置 图片致地图
+     * @param layerName 图层名称
+     * @param img 图片地址
+     * @param extent 图片范围
+     * @param options 图片配置
+     */
+    setImgLayer(layerName, img, extent, options = {}) {
+        this.getPolygon().addImgLayer(layerName, img, extent, options);
+    }
+    /**
+     * 隐藏&展示图层
+     * @param layerName 图层名称
+     * @param show 是否显示
+     */
+    showMapLayer(layerName, show = true) {
+        if (!layerName) {
+            console.error("缺少图层名称");
+            return false;
+        }
+        let layers = this.getTools().getLayerByLayerName(layerName);
+        if (!Array.isArray(layers))
+            layers = [layers];
+        // 无图层返回不继续操作
+        if (layers.length === 0)
+            return false;
+        const zoom = this.map.getView().getZoom();
+        for (const layer of layers) {
+            if (layer) {
+                if (layer.getVisible() === show)
+                    return false; // 相同则不处理
+                const layerName = layer.values_.layerName;
+                let isMoreLayer = false;
+                // 若为打开，查找是否按层级显示的图层
+                if (show) {
+                    for (let i = 2; i <= 5; i++) {
+                        if (["reservoir_frgrd_" + i, "city_frgrd_" + i, "rain_frgrd_" + i].includes(layerName)) {
+                            let minZoom = 10;
+                            switch (i) {
+                                case 2:
+                                    minZoom = 10;
+                                    break;
+                                case 3:
+                                    minZoom = 11;
+                                    break;
+                                case 4:
+                                    minZoom = 12;
+                                    break;
+                                case 5:
+                                    minZoom = 13;
+                                    break;
+                            }
+                            isMoreLayer = true; // 有进入，单下面未进入则代表不显示与下面的continue使用
+                            if (zoom && (zoom > minZoom && zoom < 20)) {
+                                layer.setVisible(true);
+                                break;
+                            }
+                        }
+                    }
+                }
+                if (!isMoreLayer) {
+                    layer.setVisible(show);
+                }
+            }
+        }
+        return true;
+    }
+    //  ╔══════════╗
+    //  ║  地图 点  ║
+    //  ╚══════════╝
+    /**
+     * 获取 地图 点 操作
+     * @returns Point
+     */
+    getPoint() {
+        if (!this.point)
+            this.point = new Point(this.map);
+        return this.point;
+    }
+    //  ╔══════════╗
+    //  ║  地图 线  ║
+    //  ╚══════════╝
+    /**
+     * 获取 地图 线 操作
+     * @returns Line
+     */
+    getLine() {
+        if (!this.line)
+            this.line = new Line(this.map);
+        return this.line;
+    }
+    /**
+     * 设置闪烁点
+     * @param twinkleList 闪烁点数据
+     * @param className 闪烁点样式
+     * @param key 闪烁点索引
+     */
+    setFlashWarnPoint(twinkleList, className, key) {
+        this.getPoint().setTwinkleLayer(twinkleList, className, key);
+    }
+    //  ╔════════════╗
+    //  ║  地图 工具  ║
+    //  ╚════════════╝
+    /**
+     * 获取 地图 工具 操作
+     * @returns MapTools
+     */
+    getTools() {
+        if (!this.mapTools)
+            this.mapTools = new MapTools(this.map);
+        return this.mapTools;
+    }
+    restPosition(duration = 3000) {
+        if (!this.options.center)
+            return console.error('未设置中心点');
+        this.locationAction(this.options.center[0], this.options.center[1], this.options.zoom, duration);
+    }
+    /**
+     * 地图定位
+     * @param lgtd 经度
+     * @param lttd 纬度
+     * @param zoom 缩放级别
+     * @param duration 动画时间
+     */
+    locationAction(lgtd, lttd, zoom = 20, duration = 3000) {
+        this.getPoint().locationAction(lgtd, lttd, zoom, duration);
+    }
+    /**
+     * 地图监听事件
+     * @param eventType 事件类型
+     * @param clickType 点击类型
+     * @param callback 回调函数
+     */
+    mapOnEvent(eventType = "def", callback, clickType) {
+        MapTools.mapOnEvent(this.map, eventType, callback, clickType);
+    }
+}
+MyOl.DefaultOptions = {
+    layers: undefined,
+    zoom: 10,
+    center: [119.81, 29.969],
+    minZoom: 8,
+    maxZoom: 20,
+    extent: undefined
+};
+export default MyOl;

package/dist/core/DomPoint.d.ts

@@ -1,4 +1,4 @@
-import MyOl from "../index";
+import Map from "ol/Map";
 interface Options {
     Vue: any;
     Template: any;
@@ -10,11 +10,11 @@ interface Options {
     zIndex?: number;
 }
 export default class DomPoint {
-    private myOlMap;
+    private map;
     private app;
     private anchor;
     private dom;
-    constructor(map: MyOl, options: Options);
+    constructor(map: Map, options: Options);
     setVisible(visible: boolean): void;
     remove(): void;
 }

package/dist/core/DomPoint.js

@@ -2,10 +2,10 @@
 import Overlay from "ol/Overlay";
 export default class DomPoint {
     constructor(map, options) {
-        this.myOlMap = map;
+        this.map = map;
         const { Vue, Template, lgtd, lttd, props, } = options;
         this.dom = document.createElement('div');
-        this.myOlMap.map.getViewport().appendChild(this.dom);
+        this.map.getViewport().appendChild(this.dom);
         if (Vue.version.startsWith('3')) {
             this.app = Vue.createApp(Object.assign(Template, {
                 props: { ...props }
@@ -24,13 +24,13 @@ export default class DomPoint {
             stopEvent: false
         });
         this.anchor.setPosition([lgtd, lttd]);
-        this.myOlMap.map.addOverlay(this.anchor);
+        this.map.addOverlay(this.anchor);
     }
     setVisible(visible) {
         this.dom.style.visibility = visible ? 'visible' : 'hidden';
     }
     remove() {
         this.app.unmount();
-        this.myOlMap.map.removeOverlay(this.anchor);
+        this.map.removeOverlay(this.anchor);
     }
 }

package/dist/core/Line.d.ts

@@ -1,19 +1,20 @@
 import Map from "ol/Map";
-import MyOl from "../index";
+import VectorSource from "ol/source/Vector";
+import VectorLayer from "ol/layer/Vector";
+import { Style } from "ol/style";
 import { OptionsType, MapJSONData } from "../types";
 export default class Line {
     private map;
-    private myOlMap;
     riverLayerList: any[];
     riverLayerShow: boolean;
     [propertyName: string]: any;
-    constructor(myOlMap: MyOl, map: Map);
-    addLineCommon(data: MapJSONData, options: OptionsType): any;
+    constructor(map: Map);
+    addLineCommon(data: MapJSONData, options: OptionsType): VectorLayer<VectorSource<import("ol/geom").Geometry>>;
     addRiverLayersByZoom(fyRiverJson: MapJSONData, options?: OptionsType): void;
     showRiverLayer(show: boolean): void;
     showRiverLayerByZoom(): void;
     addRiverWidthByLev(arr?: any): void;
     setFeatureAttr(feature: {
         get: (arg0: string) => any;
-    }): any;
+    }): Style;
 }

package/dist/core/Line.js

@@ -2,11 +2,11 @@ import VectorSource from "ol/source/Vector";
 import GeoJSON from "ol/format/GeoJSON";
 import VectorLayer from "ol/layer/Vector";
 import { Stroke, Style } from "ol/style";
+import MapTools from "./MapTools";
 export default class Line {
-    constructor(myOlMap, map) {
+    constructor(map) {
         this.riverLayerList = [];
         this.riverLayerShow = false;
-        this.myOlMap = myOlMap;
         this.map = map;
     }
     addLineCommon(data, options) {
@@ -71,7 +71,7 @@ export default class Line {
             this.map.addLayer(riverLayer);
         }
         this.showRiverLayerByZoom();
-        this.myOlMap.mapOnEvent('moveend', () => {
+        MapTools.mapOnEvent(this.map, 'moveend', () => {
             this.showRiverLayerByZoom();
         });
     }

package/dist/core/MapBaseLayers.d.ts

@@ -2,6 +2,7 @@
  * 地图底图图层
  */
 import Map from "ol/Map";
+import WMTSTileGrid from "ol/tilegrid/WMTS";
 import { MapbaseType, MapJSONData } from "../types";
 interface MapLayersOptions {
     zIndex?: number;
@@ -17,7 +18,7 @@ export default class MapBaseLayers {
     constructor(map: Map, options: MapLayersOptions);
     addMapLayer(type: MapbaseType): void;
     createLayer(layer: any): any;
-    getTileGrid(length: number): any;
+    getTileGrid(length: number): WMTSTileGrid;
     getTiandiTuLayer(tiandituType?: 'img_c' | 'ter_c'): any;
     getTerrainLayer(): any;
     /**

package/dist/core/MapTools.d.ts

@@ -13,4 +13,12 @@ export default class MapTools {
      */
     static setMapClip(baseLayer: any, data: MapJSONData): any;
     removeLayer(layerName: string): void;
+    /**
+     * 地图监听事件
+     * @param map
+     * @param eventType 事件类型
+     * @param clickType 点击类型
+     * @param callback 回调函数
+     */
+    static mapOnEvent(map: Map, eventType: string | undefined, callback: (feature?: any, e?: any) => void, clickType?: 'point' | 'line' | 'polygon' | undefined): void;
 }

package/dist/core/MapTools.js

@@ -63,4 +63,44 @@ export default class MapTools {
     removeLayer(layerName) {
         this.map.removeLayer(this.getLayerByLayerName(layerName));
     }
+    /**
+     * 地图监听事件
+     * @param map
+     * @param eventType 事件类型
+     * @param clickType 点击类型
+     * @param callback 回调函数
+     */
+    static mapOnEvent(map, eventType = "def", callback, clickType) {
+        const clickTypeObj = {
+            point: ['point'],
+            line: ['line'],
+            polygon: ['polygon', 'MultiPolygon']
+        };
+        if (eventType === "click") {
+            map.on("click", (e) => {
+                // 获取点位 feature
+                const pixel = map.getEventPixel(e.originalEvent);
+                const features = map.getFeaturesAtPixel(pixel);
+                let feature = undefined;
+                if (features.length > 0)
+                    feature = features[0];
+                callback(feature, { features, pixel });
+            });
+        }
+        else if (eventType === 'moveend') {
+            map.on('moveend', function () {
+                const zoom = map.getView().getZoom();
+                if (zoom) {
+                    callback(zoom);
+                }
+            });
+        }
+        else if (eventType === 'hover') {
+            map.on('pointermove', (e) => {
+                const pixel = map.getEventPixel(e.originalEvent);
+                const features = map.getFeaturesAtPixel(pixel);
+                callback({ features, pixel });
+            });
+        }
+    }
 }

package/dist/core/Point.d.ts

@@ -1,10 +1,10 @@
 import Map from "ol/Map";
-import MyOl from "../index";
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
 import { OptionsType, PointData } from '../types';
 export default class Point {
-    private myOlMap;
     private map;
-    constructor(myOlMap: MyOl, map: Map);
+    constructor(map: Map);
     /**
      *
      * @param pointData
@@ -15,7 +15,7 @@ export default class Point {
      *   hasImg: Boolean 是否显示图标
      * }
      */
-    addPoint(pointData: PointData[], type: string, options: OptionsType): any;
+    addPoint(pointData: PointData[], type: string, options: OptionsType): VectorLayer<VectorSource<import("ol/geom").Geometry>>;
     addClusterPoint(pointData: any[], type: string | undefined, options: OptionsType): void;
     /**
      * 添加点 - 闪烁
@@ -43,7 +43,7 @@ export default class Point {
      * 设置dom元素为点位
      */
     setDomPoint(id: string, lgtd: number, lttd: number): void;
-    setDomPointVue(pointInfoList: any[], template: any): {
+    setDomPointVue(pointInfoList: any[], template: any, Vue: any): {
         setVisible: (visible: boolean) => void;
         remove: () => void;
     };

package/dist/core/Point.js

@@ -10,9 +10,9 @@ import { Cluster } from 'ol/source';
 import * as turf from 'turf';
 import GeoJSON from "ol/format/GeoJSON";
 import DomPoint from "./DomPoint";
+import MapTools from "./MapTools";
 export default class Point {
-    constructor(myOlMap, map) {
-        this.myOlMap = myOlMap;
+    constructor(map) {
         this.map = map;
     }
     /**
@@ -142,7 +142,7 @@ export default class Point {
     }
     // 在流域中心添加闪烁点位
     setTwinkleLayerFromPolygon(twinkleList, className, key, json) {
-        this.myOlMap.getTools().removeLayer('twinklePoint');
+        new MapTools(this.map).removeLayer('twinklePoint');
         // 计算多边形的中心点坐标
         const calculatePolygonCenter = (polygonCoordinates) => {
             const polygon = turf.polygon(polygonCoordinates[0]);
@@ -272,9 +272,10 @@ export default class Point {
             this.map.addOverlay(anchor);
         }
     }
-    setDomPointVue(pointInfoList, template) {
+    setDomPointVue(pointInfoList, template, Vue) {
         const layer = pointInfoList.map((pointInfo) => {
-            return new DomPoint(this.myOlMap, {
+            return new DomPoint(this.map, {
+                Vue,
                 Template: template,
                 lgtd: pointInfo.lgtd,
                 lttd: pointInfo.lttd,

package/dist/core/Polygon.d.ts

@@ -1,12 +1,13 @@
 import Map from "ol/Map";
-import MyOl from "../index";
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
+import { Geometry } from "ol/geom";
 import { OptionsType, MapJSONData } from '../types';
 export default class Polygon {
-    private myOlMap;
     map: Map;
     private colorMap;
     [key: string]: any;
-    constructor(myOlMap: MyOl, map: Map);
+    constructor(map: Map);
     /**
      * 获取等级颜色
      * @param lev
@@ -19,7 +20,7 @@ export default class Polygon {
      * @param options 图层配置
      */
     addPolygonMapLayer(data: MapJSONData, type: string | undefined, options: OptionsType): void;
-    addPolygonLayerCommon(dataJSON: MapJSONData, options?: OptionsType): any;
+    addPolygonLayerCommon(dataJSON: MapJSONData, options?: OptionsType): VectorLayer<VectorSource<Geometry>>;
     /**
      * 根据数据数组更新某个面颜色
      * @param layerName 图层名称

package/dist/core/Polygon.js

@@ -10,14 +10,13 @@ import Feature from "ol/Feature";
 import ImageStatic from "ol/source/ImageStatic";
 import MapTools from "./MapTools";
 export default class Polygon {
-    constructor(myOlMap, map) {
+    constructor(map) {
         this.colorMap = {
             '0': 'rgba(255, 0, 0, 0.6)',
             '1': 'rgba(245, 154, 35, 0.6)',
             '2': 'rgba(255, 238, 0, 0.6)',
             '3': 'rgba(1, 111, 255, 0.6)'
         };
-        this.myOlMap = myOlMap;
         this.map = map;
     }
     /**
@@ -71,7 +70,7 @@ export default class Polygon {
     //fyBasinJson中的id的key需要跟options中的nameKey一致
     addPolygonLayerCommon(dataJSON, options = {}) {
         if (options.type != null) {
-            this.myOlMap.getTools().removeLayer(options.type);
+            new MapTools(this.map).removeLayer(options.type);
         }
         const layer = new VectorLayer({
             name: options.type,
@@ -283,7 +282,7 @@ export default class Polygon {
         return this[layerName];
     }
     removePolygonLayer(layerName) {
-        this.myOlMap.getTools().removeLayer(layerName);
+        new MapTools(this.map).removeLayer(layerName);
         this[layerName] = null;
     }
 }

package/dist/index.d.ts

@@ -1,95 +1,9 @@
-import Map from "ol/Map";
-import Polygon from "./core/Polygon";
-import Point from "./core/Point";
+import MyOl from "./MyOl";
 import Line from "./core/Line";
+import Point from "./core/Point";
 import MapTools from "./core/MapTools";
-import { OptionsType, MapInitType, MapbaseType } from './types';
-export default class MyOl {
-    map: Map;
-    private baseLayers;
-    private polygon;
-    private mapTools;
-    private point;
-    private line;
-    private readonly options;
-    static DefaultOptions: MapInitType;
-    constructor(id: string, options: MapInitType);
-    /**
-     * 获取视图
-     * @param options 视图配置
-     * @param options.center 中心点
-     * @param options.zoom 缩放级别
-     * @param options.minZoom 最小缩放级别
-     * @param options.maxZoom 最大缩放级别
-     * @param options.extent 视图范围
-     * @returns View
-     */
-    static getView(options?: MapInitType): any;
-    /**
-     * 获取 地图 面 操作
-     * @returns Polygon
-     */
-    getPolygon(): Polygon;
-    getMapBaseLayers(): any;
-    /**
-     * 设置底图
-     */
-    setMapLayer(type?: MapbaseType): void;
-    setZhujiMapLayer(show: boolean): void;
-    /**
-     * 设置地图边界
-     */
-    addPolygonToMap(data: any, type: string | undefined, options: OptionsType): void;
-    /**
-     * 设置 图片致地图
-     * @param layerName 图层名称
-     * @param img 图片地址
-     * @param extent 图片范围
-     * @param options 图片配置
-     */
-    setImgLayer(layerName: string, img: string, extent: number[], options?: {}): void;
-    /**
-     * 隐藏&展示图层
-     * @param layerName 图层名称
-     * @param show 是否显示
-     */
-    showMapLayer(layerName: string, show?: boolean): boolean;
-    /**
-     * 获取 地图 点 操作
-     * @returns Point
-     */
-    getPoint(): Point;
-    /**
-     * 获取 地图 线 操作
-     * @returns Line
-     */
-    getLine(): Line;
-    /**
-     * 设置闪烁点
-     * @param twinkleList 闪烁点数据
-     * @param className 闪烁点样式
-     * @param key 闪烁点索引
-     */
-    setFlashWarnPoint(twinkleList: any[], className: string, key: string): void;
-    /**
-     * 获取 地图 工具 操作
-     * @returns MapTools
-     */
-    getTools(): MapTools;
-    restPosition(duration?: number): void;
-    /**
-     * 地图定位
-     * @param lgtd 经度
-     * @param lttd 纬度
-     * @param zoom 缩放级别
-     * @param duration 动画时间
-     */
-    locationAction(lgtd: number, lttd: number, zoom?: number, duration?: number): void;
-    /**
-     * 地图监听事件
-     * @param eventType 事件类型
-     * @param clickType 点击类型
-     * @param callback 回调函数
-     */
-    mapOnEvent(eventType: string | undefined, callback: (feature?: any, e?: any) => void, clickType?: 'point' | 'line' | 'polygon' | undefined): void;
-}
+import Polygon from "./core/Polygon";
+import MapBaseLayers from "./core/MapBaseLayers";
+import DomPoint from "./core/DomPoint";
+export { Line, Point, MapTools, Polygon, MapBaseLayers, DomPoint };
+export default MyOl;

package/dist/index.js

@@ -1,276 +1,9 @@
-"use strict";
-import { register as olProj4Register } from 'ol/proj/proj4';
-import { Projection as olProjProjection, addProjection as olProjAddProjection, fromLonLat as olProjFromLonLat } from 'ol/proj';
-import View from "ol/View";
-import Map from "ol/Map";
-import Polygon from "./core/Polygon";
-import Point from "./core/Point";
+import MyOl from "./MyOl";
 import Line from "./core/Line";
-import MapBaseLayers from "./core/MapBaseLayers";
-import proj4 from "proj4";
+import Point from "./core/Point";
 import MapTools from "./core/MapTools";
-import { defaults as defaultControls } from 'ol/control';
-class MyOl {
-    constructor(id, options) {
-        options.center = options.center || MyOl.DefaultOptions.center;
-        this.options = { ...MyOl.DefaultOptions, ...options };
-        this.map = new Map({
-            target: id, // 地图容器
-            view: MyOl.getView(this.options), // 视图
-            layers: this.options.layers || [],
-            controls: defaultControls({
-                zoom: false,
-                rotate: false,
-                attribution: false
-            }).extend([])
-        });
-    }
-    /**
-     * 获取视图
-     * @param options 视图配置
-     * @param options.center 中心点
-     * @param options.zoom 缩放级别
-     * @param options.minZoom 最小缩放级别
-     * @param options.maxZoom 最大缩放级别
-     * @param options.extent 视图范围
-     * @returns View
-     */
-    static getView(options = MyOl.DefaultOptions) {
-        proj4.defs("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs");
-        proj4.defs("EPSG:4549", "+proj=tmerc +lat_0=0 +lon_0=120 +k=1 +x_0=500000 +y_0=0 +ellps=GRS80 +units=m +no_defs");
-        olProj4Register(proj4);
-        const cgsc2000 = new olProjProjection({
-            code: "EPSG:4490",
-            extent: [-180, -90, 180, 90],
-            worldExtent: [-180, -90, 180, 90],
-            units: "degrees"
-        });
-        olProjAddProjection(cgsc2000);
-        // debugger
-        // 视图配置
-        const viewOptions = {
-            projection: cgsc2000, // 坐标系
-            center: olProjFromLonLat(options.center, cgsc2000), // 中心点
-            zoom: options.zoom || 10, // 缩放级别
-            minZoom: options.minZoom || 8,
-            maxZoom: options.maxZoom || 20
-        };
-        if (options.extent)
-            viewOptions.extent = options.extent;
-        return new View(viewOptions);
-    }
-    //  ╔══════════╗
-    //  ║  地图 面  ║
-    //  ╚══════════╝
-    /**
-     * 获取 地图 面 操作
-     * @returns Polygon
-     */
-    getPolygon() {
-        if (!this.polygon)
-            this.polygon = new Polygon(this, this.map);
-        return this.polygon;
-    }
-    getMapBaseLayers() {
-        if (!this.baseLayers)
-            this.baseLayers = new MapBaseLayers(this.map, {
-                zIndex: 1,
-                mapClip: !!this.options.mapClipData,
-                mapClipData: this.options.mapClipData,
-                token: this.options.token || ''
-            });
-        return this.baseLayers;
-    }
-    /**
-     * 设置底图
-     */
-    setMapLayer(type = 'tianditu') {
-        // 添加影像底图
-        this.getMapBaseLayers().addMapLayer(type);
-    }
-    setZhujiMapLayer(show) {
-        this.getMapBaseLayers().addZhujiLayer(show);
-    }
-    /**
-     * 设置地图边界
-     */
-    addPolygonToMap(data, type = 'fuyangqu', options) {
-        this.getPolygon().addPolygonMapLayer(data, type, options);
-    }
-    /**
-     * 设置 图片致地图
-     * @param layerName 图层名称
-     * @param img 图片地址
-     * @param extent 图片范围
-     * @param options 图片配置
-     */
-    setImgLayer(layerName, img, extent, options = {}) {
-        this.getPolygon().addImgLayer(layerName, img, extent, options);
-    }
-    /**
-     * 隐藏&展示图层
-     * @param layerName 图层名称
-     * @param show 是否显示
-     */
-    showMapLayer(layerName, show = true) {
-        if (!layerName) {
-            console.error("缺少图层名称");
-            return false;
-        }
-        let layers = this.getTools().getLayerByLayerName(layerName);
-        if (!Array.isArray(layers))
-            layers = [layers];
-        // 无图层返回不继续操作
-        if (layers.length === 0)
-            return false;
-        const zoom = this.map.getView().getZoom();
-        for (const layer of layers) {
-            if (layer) {
-                if (layer.getVisible() === show)
-                    return false; // 相同则不处理
-                const layerName = layer.values_.layerName;
-                let isMoreLayer = false;
-                // 若为打开，查找是否按层级显示的图层
-                if (show) {
-                    for (let i = 2; i <= 5; i++) {
-                        if (["reservoir_frgrd_" + i, "city_frgrd_" + i, "rain_frgrd_" + i].includes(layerName)) {
-                            let minZoom = 10;
-                            switch (i) {
-                                case 2:
-                                    minZoom = 10;
-                                    break;
-                                case 3:
-                                    minZoom = 11;
-                                    break;
-                                case 4:
-                                    minZoom = 12;
-                                    break;
-                                case 5:
-                                    minZoom = 13;
-                                    break;
-                            }
-                            isMoreLayer = true; // 有进入，单下面未进入则代表不显示与下面的continue使用
-                            if (zoom && (zoom > minZoom && zoom < 20)) {
-                                layer.setVisible(true);
-                                break;
-                            }
-                        }
-                    }
-                }
-                if (!isMoreLayer) {
-                    layer.setVisible(show);
-                }
-            }
-        }
-        return true;
-    }
-    //  ╔══════════╗
-    //  ║  地图 点  ║
-    //  ╚══════════╝
-    /**
-     * 获取 地图 点 操作
-     * @returns Point
-     */
-    getPoint() {
-        if (!this.point)
-            this.point = new Point(this, this.map);
-        return this.point;
-    }
-    //  ╔══════════╗
-    //  ║  地图 线  ║
-    //  ╚══════════╝
-    /**
-     * 获取 地图 线 操作
-     * @returns Line
-     */
-    getLine() {
-        if (!this.line)
-            this.line = new Line(this, this.map);
-        return this.line;
-    }
-    /**
-     * 设置闪烁点
-     * @param twinkleList 闪烁点数据
-     * @param className 闪烁点样式
-     * @param key 闪烁点索引
-     */
-    setFlashWarnPoint(twinkleList, className, key) {
-        this.getPoint().setTwinkleLayer(twinkleList, className, key);
-    }
-    //  ╔════════════╗
-    //  ║  地图 工具  ║
-    //  ╚════════════╝
-    /**
-     * 获取 地图 工具 操作
-     * @returns MapTools
-     */
-    getTools() {
-        if (!this.mapTools)
-            this.mapTools = new MapTools(this.map);
-        return this.mapTools;
-    }
-    restPosition(duration = 3000) {
-        if (!this.options.center)
-            return console.error('未设置中心点');
-        this.locationAction(this.options.center[0], this.options.center[1], this.options.zoom, duration);
-    }
-    /**
-     * 地图定位
-     * @param lgtd 经度
-     * @param lttd 纬度
-     * @param zoom 缩放级别
-     * @param duration 动画时间
-     */
-    locationAction(lgtd, lttd, zoom = 20, duration = 3000) {
-        this.getPoint().locationAction(lgtd, lttd, zoom, duration);
-    }
-    /**
-     * 地图监听事件
-     * @param eventType 事件类型
-     * @param clickType 点击类型
-     * @param callback 回调函数
-     */
-    mapOnEvent(eventType = "def", callback, clickType) {
-        const clickTypeObj = {
-            point: ['point'],
-            line: ['line'],
-            polygon: ['polygon', 'MultiPolygon']
-        };
-        const map = this.map;
-        if (eventType === "click") {
-            map.on("click", (e) => {
-                // 获取点位 feature
-                const pixel = map.getEventPixel(e.originalEvent);
-                const features = map.getFeaturesAtPixel(pixel);
-                let feature = undefined;
-                if (features.length > 0)
-                    feature = features[0];
-                callback(feature, { features, pixel });
-            });
-        }
-        else if (eventType === 'moveend') {
-            map.on('moveend', function () {
-                const zoom = map.getView().getZoom();
-                if (zoom) {
-                    callback(zoom);
-                }
-            });
-        }
-        else if (eventType === 'hover') {
-            map.on('pointermove', (e) => {
-                const pixel = map.getEventPixel(e.originalEvent);
-                const features = map.getFeaturesAtPixel(pixel);
-                callback({ features, pixel });
-            });
-        }
-    }
-}
-MyOl.DefaultOptions = {
-    layers: undefined,
-    zoom: 10,
-    center: [119.81, 29.969],
-    minZoom: 8,
-    maxZoom: 20,
-    extent: undefined
-};
+import Polygon from "./core/Polygon";
+import MapBaseLayers from "./core/MapBaseLayers";
+import DomPoint from "./core/DomPoint";
+export { Line, Point, MapTools, Polygon, MapBaseLayers, DomPoint };
 export default MyOl;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "my-openlayer",
   "private": false,
-  "version": "0.0.15",
+  "version": "0.0.17",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",