my-openlayer 0.0.18 → 0.1.0

package/dist/MyOl.d.ts

@@ -4,7 +4,7 @@ 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';
+import { MapInitType } from './types';
 export default class MyOl {
     map: Map;
     private baseLayers;
@@ -32,29 +32,6 @@ export default class MyOl {
      */
     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
@@ -65,13 +42,6 @@ export default class MyOl {
      * @returns Line
      */
     getLine(): Line;
-    /**
-     * 设置闪烁点
-     * @param twinkleList 闪烁点数据
-     * @param className 闪烁点样式
-     * @param key 闪烁点索引
-     */
-    setFlashWarnPoint(twinkleList: any[], className: string, key: string): void;
     /**
      * 获取 地图 工具 操作
      * @returns MapTools
@@ -93,4 +63,10 @@ export default class MyOl {
      * @param callback 回调函数
      */
     mapOnEvent(eventType: string | undefined, callback: (feature?: any, e?: any) => void, clickType?: 'point' | 'line' | 'polygon' | undefined): void;
+    /**
+     * 隐藏&展示图层
+     * @param layerName 图层名称
+     * @param show 是否显示
+     */
+    showMapLayer(layerName: string, show?: boolean): boolean;
 }

package/dist/MyOl.js

@@ -17,10 +17,16 @@ class MyOl {
     constructor(id, options) {
         options.center = options.center || MyOl.DefaultOptions.center;
         this.options = { ...MyOl.DefaultOptions, ...options };
+        let layers = [];
+        if (Array.isArray(options.layers)) {
+            layers = options.layers;
+        }
+        else {
+        }
         this.map = new Map({
             target: id, // 地图容器
             view: MyOl.getView(this.options), // 视图
-            layers: this.options.layers || [],
+            layers: layers,
             controls: defaultControls({
                 zoom: false,
                 rotate: false,
@@ -75,40 +81,80 @@ class MyOl {
         return this.polygon;
     }
     getMapBaseLayers() {
+        if (Array.isArray(this.options.layers)) {
+            console.warn('已设置默认底图，MapBaseLayers中的switchBaseLayer方法将失效');
+        }
+        const options = {
+            layers: this.options.layers,
+            annotation: this.options.annotation,
+            zIndex: 1,
+            mapClip: !!this.options.mapClipData,
+            mapClipData: this.options.mapClipData,
+            token: this.options.token || ''
+        };
         if (!this.baseLayers)
-            this.baseLayers = new MapBaseLayers(this.map, {
-                zIndex: 1,
-                mapClip: !!this.options.mapClipData,
-                mapClipData: this.options.mapClipData,
-                token: this.options.token || ''
-            });
+            this.baseLayers = new MapBaseLayers(this.map, options);
         return this.baseLayers;
     }
+    //  ╔══════════╗
+    //  ║  地图 点  ║
+    //  ╚══════════╝
     /**
-     * 设置底图
+     * 获取 地图 点 操作
+     * @returns Point
      */
-    setMapLayer(type = 'tianditu') {
-        // 添加影像底图
-        this.getMapBaseLayers().addMapLayer(type);
+    getPoint() {
+        if (!this.point)
+            this.point = new Point(this.map);
+        return this.point;
     }
-    setZhujiMapLayer(show) {
-        this.getMapBaseLayers().addZhujiLayer(show);
+    //  ╔══════════╗
+    //  ║  地图 线  ║
+    //  ╚══════════╝
+    /**
+     * 获取 地图 线 操作
+     * @returns Line
+     */
+    getLine() {
+        if (!this.line)
+            this.line = new Line(this.map);
+        return this.line;
     }
+    //  ╔════════════╗
+    //  ║  地图 工具  ║
+    //  ╚════════════╝
     /**
-     * 设置地图边界
+     * 获取 地图 工具 操作
+     * @returns MapTools
      */
-    addPolygonToMap(data, type = 'fuyangqu', options) {
-        this.getPolygon().addPolygonMapLayer(data, type, options);
+    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 layerName 图层名称
-     * @param img 图片地址
-     * @param extent 图片范围
-     * @param options 图片配置
+     * 地图定位
+     * @param lgtd 经度
+     * @param lttd 纬度
+     * @param zoom 缩放级别
+     * @param duration 动画时间
      */
-    setImgLayer(layerName, img, extent, options = {}) {
-        this.getPolygon().addImgLayer(layerName, img, extent, options);
+    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);
     }
     /**
      * 隐藏&展示图层
@@ -167,75 +213,6 @@ class MyOl {
         }
         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,

package/dist/core/MapBaseLayers.d.ts

@@ -2,28 +2,31 @@
  * 地图底图图层
  */
 import Map from "ol/Map";
+import { Tile as TileLayer } from "ol/layer";
+import { WMTS } from "ol/source";
 import WMTSTileGrid from "ol/tilegrid/WMTS";
-import { MapbaseType, MapJSONData } from "../types";
-interface MapLayersOptions {
-    zIndex?: number;
-    mapClip?: boolean;
-    mapClipData?: MapJSONData;
-    token?: string;
-}
+import XYZ from "ol/source/XYZ";
+import { MapLayersOptions, TiandituType, AnnotationLayerOptions } from "../types";
 export default class MapBaseLayers {
     private map;
-    private mapLayers;
     private readonly options;
-    private zhujiMapLayer;
+    private readonly layers;
     constructor(map: Map, options: MapLayersOptions);
-    addMapLayer(type: MapbaseType): void;
+    switchBaseLayer(type: TiandituType): void;
+    initLayer(): void;
+    addAnnotationLayer(options: AnnotationLayerOptions): void;
+    static addAnnotationLayer(map: Map, options: AnnotationLayerOptions): TileLayer<XYZ>;
+    addMapLayer(): void;
     createLayer(layer: any): any;
-    getTileGrid(length: number): WMTSTileGrid;
-    getTiandiTuLayer(tiandituType?: 'img_c' | 'ter_c'): any;
-    getTerrainLayer(): any;
+    static getTiandiTuLayer(options: {
+        type: TiandituType;
+        token: string;
+        zIndex: number;
+        visible: boolean;
+    }): TileLayer<WMTS>;
     /**
      * 地图注记
      */
-    addZhujiLayer(show: boolean): void;
+    static getAnnotationLayer(options: AnnotationLayerOptions): TileLayer<XYZ>;
+    static getTileGrid(length: number): WMTSTileGrid;
 }
-export {};

package/dist/core/MapBaseLayers.js

@@ -8,45 +8,96 @@ import { WMTS } from "ol/source";
 import WMTSTileGrid from "ol/tilegrid/WMTS";
 import XYZ from "ol/source/XYZ";
 import MapTools from "./MapTools";
-const LAYER_TYPES = {
-    TIANDITU: 'tianditu',
-    TERRAIN: 'terrain'
-};
 export default class MapBaseLayers {
     constructor(map, options) {
-        this.mapLayers = {
-            tianditu: null,
-            shengting: null,
-            terrain: null
-        };
         this.options = {
             zIndex: 0,
+            annotation: false,
             mapClip: false,
             mapClipData: undefined,
-            token: ''
         };
+        this.layers = {};
         this.map = map;
         this.options = { ...this.options, ...options };
-        if (!this.options.token) {
-            throw new Error('请配置token');
+        //如果没有配置底图，则默认使用天地图底图
+        if (!Array.isArray(this.options.layers)) {
+            this.layers = this.options.layers || {};
+            if (!this.options.token) {
+                throw new Error('请配置token后才能使用天地图底图');
+            }
+            else {
+                this.initLayer();
+            }
+            if (this.layers && Object.keys(this.layers).length !== 0) {
+                this.addMapLayer();
+                // this.switchBaseLayer(<string>Object.keys(this.layers)[0])
+            }
+        }
+    }
+    switchBaseLayer(type) {
+        if (Array.isArray(this.options.layers)) {
+            console.error('需要按照键值对的方式配置底图才可使用切换底图功能');
+            return;
         }
-        else {
-            this.addMapLayer('tianditu');
+        for (const key in this.layers) {
+            this.layers[key]?.forEach((layer) => {
+                layer.setVisible(key === type);
+                console.log(layer);
+            });
         }
     }
-    addMapLayer(type) {
-        const layerGenerators = {
-            [LAYER_TYPES.TIANDITU]: this.getTiandiTuLayer,
-            [LAYER_TYPES.TERRAIN]: this.getTerrainLayer
-        };
-        const layerGenerator = layerGenerators[type];
-        if (layerGenerator) {
-            this.mapLayers[type] = layerGenerator.call(this);
+    initLayer() {
+        if (this.layers && this.options.token) {
+            const { token, zIndex = 10 } = this.options;
+            this.layers.vec_c = [MapBaseLayers.getTiandiTuLayer({ type: 'vec_c', token, zIndex, visible: false })];
+            this.layers.img_c = [MapBaseLayers.getTiandiTuLayer({ type: 'img_c', token, zIndex, visible: false })];
+            this.layers.ter_c = [MapBaseLayers.getTiandiTuLayer({ type: 'ter_c', token, zIndex, visible: false })];
+            if (this.options.annotation) {
+                this.layers.vec_c.push(MapBaseLayers.getAnnotationLayer({
+                    type: 'cva_c',
+                    token,
+                    zIndex: zIndex + 1,
+                    visible: false
+                }));
+                this.layers.img_c.push(MapBaseLayers.getAnnotationLayer({
+                    type: 'cia_c',
+                    token,
+                    zIndex: zIndex + 1,
+                    visible: false
+                }));
+                this.layers.ter_c.push(MapBaseLayers.getAnnotationLayer({
+                    type: 'cta_c',
+                    token,
+                    zIndex: zIndex + 1,
+                    visible: false
+                }));
+            }
         }
-        for (const key in this.mapLayers) {
-            this.mapLayers[key] && this.mapLayers[key].setVisible(type === key);
+    }
+    //添加注记图层
+    addAnnotationLayer(options) {
+        MapBaseLayers.addAnnotationLayer(this.map, options);
+    }
+    //添加注记图层
+    static addAnnotationLayer(map, options) {
+        const layer = MapBaseLayers.getAnnotationLayer({
+            type: options.type,
+            token: options.token,
+            zIndex: options.zIndex,
+            visible: options.visible
+        });
+        map.addLayer(layer);
+        return layer;
+    }
+    addMapLayer() {
+        if (this.layers) {
+            for (const key in this.layers) {
+                this.layers[key]?.forEach((layer) => {
+                    layer = this.createLayer(layer);
+                    this.map.addLayer(layer);
+                });
+            }
         }
-        this.mapLayers[type] && this.map.addLayer(this.mapLayers[type]);
     }
     createLayer(layer) {
         if (this.options.mapClip && this.options.mapClipData) {
@@ -54,29 +105,11 @@ export default class MapBaseLayers {
         }
         return layer;
     }
-    getTileGrid(length) {
-        const projection = getProjection('EPSG:4326');
-        const projectionExtent = projection?.getExtent();
-        const size = getWidth(projectionExtent) / 256;
-        const resolutions = new Array(length);
-        const matrixIds = new Array(length);
-        for (let i = 0; i < length; i += 1) {
-            const pow = Math.pow(2, i);
-            resolutions[i] = size / pow;
-            matrixIds[i] = i;
-        }
-        return new WMTSTileGrid({
-            origin: getTopLeft(projectionExtent),
-            resolutions,
-            matrixIds
-        });
-    }
     //img_c 影像底图 ter_c 地形底图
-    getTiandiTuLayer(tiandituType = 'img_c') {
-        const layer = new TileLayer({
+    static getTiandiTuLayer(options) {
+        return new TileLayer({
             source: new WMTS({
-                url: `https://t{0-7}.tianditu.gov.cn/${tiandituType}/wmts?tk=${this.options.token}`,
-                // subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
+                url: `https://t{0-7}.tianditu.gov.cn/${options.type}/wmts?tk=${options.token}`,
                 layer: 'img',
                 style: 'default',
                 matrixSet: 'c',
@@ -84,28 +117,38 @@ export default class MapBaseLayers {
                 wrapX: true,
                 tileGrid: this.getTileGrid(19)
             }),
-            zIndex: this.options.zIndex
+            zIndex: options.zIndex,
+            visible: options.visible
         });
-        return this.createLayer(layer);
-    }
-    getTerrainLayer() {
-        return this.getTiandiTuLayer('ter_c');
     }
     /**
      * 地图注记
      */
-    addZhujiLayer(show) {
-        console.log('[注记加载]');
-        if (!this.zhujiMapLayer) {
-            this.zhujiMapLayer = new TileLayer({
-                source: new XYZ({
-                    url: `http://t{0-7}.tianditu.gov.cn/DataServer?T=cia_c&tk=${this.options.token}&x={x}&y={y}&l={z}`,
-                    projection: 'EPSG:4326'
-                }),
-                zIndex: 11
-            });
-            this.map.addLayer(this.createLayer(this.zhujiMapLayer));
+    static getAnnotationLayer(options) {
+        return new TileLayer({
+            source: new XYZ({
+                url: `http://t{0-7}.tianditu.gov.cn/DataServer?T=${options.type}&tk=${options.token}&x={x}&y={y}&l={z}`,
+                projection: 'EPSG:4326'
+            }),
+            zIndex: options.zIndex,
+            visible: options.visible
+        });
+    }
+    static getTileGrid(length) {
+        const projection = getProjection('EPSG:4326');
+        const projectionExtent = projection?.getExtent();
+        const size = getWidth(projectionExtent) / 256;
+        const resolutions = new Array(length);
+        const matrixIds = new Array(length);
+        for (let i = 0; i < length; i += 1) {
+            const pow = Math.pow(2, i);
+            resolutions[i] = size / pow;
+            matrixIds[i] = i;
         }
-        this.zhujiMapLayer.setVisible(show);
+        return new WMTSTileGrid({
+            origin: getTopLeft(projectionExtent),
+            resolutions,
+            matrixIds
+        });
     }
 }

package/dist/types.d.ts

@@ -1,3 +1,4 @@
+import BaseLayer from "ol/layer/Base";
 export interface Feature {
     type: string;
     properties: any;
@@ -12,7 +13,9 @@ export interface MapJSONData {
     features: Feature[];
 }
 export interface MapInitType {
-    layers?: any[];
+    layers?: BaseLayer[] | {
+        [key: string]: BaseLayer[];
+    };
     zoom?: number;
     center?: number[];
     view?: any;
@@ -21,8 +24,30 @@ export interface MapInitType {
     extent?: number[];
     mapClipData?: MapJSONData;
     token?: string;
+    annotation?: boolean;
+}
+export type AnnotationType = 'cva_c' | 'cia_c' | 'cta_c';
+export type TiandituType = 'vec_c' | 'img_c' | 'ter_c' | string;
+export interface MapLayers {
+    vec_c?: BaseLayer[];
+    img_c?: BaseLayer[];
+    ter_c?: BaseLayer[];
+    [key: string]: BaseLayer[] | undefined;
+}
+export interface MapLayersOptions {
+    layers?: BaseLayer[] | MapLayers;
+    zIndex?: number;
+    mapClip?: boolean;
+    mapClipData?: MapJSONData;
+    token?: string;
+    annotation?: boolean;
+}
+export interface AnnotationLayerOptions {
+    type: AnnotationType;
+    token: string;
+    zIndex: number;
+    visible: boolean;
 }
-export type MapbaseType = 'tianditu' | 'shengting' | 'terrain';
 export interface OptionsType {
     type?: string;
     nameKey?: string;

package/package.json

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