my-openlayer 0.0.8 → 0.0.10

package/dist/core/DomPoint.js

@@ -1,18 +1,16 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const vue_1 = require("vue");
-const Overlay_1 = require("ol/Overlay");
-class DomPoint {
+import { createApp } from "vue";
+import Overlay from "ol/Overlay";
+export default class DomPoint {
     constructor(map, options) {
         this.myOlMap = map;
         const { Template, lgtd, lttd, props, } = options;
         this.dom = document.createElement('div');
         this.myOlMap.map.getViewport().appendChild(this.dom);
-        this.app = (0, vue_1.createApp)(Object.assign(Template, {
-            props: Object.assign({}, props)
+        this.app = createApp(Object.assign(Template, {
+            props: { ...props }
         }));
         this.app.mount(this.dom);
-        this.anchor = new Overlay_1.default({
+        this.anchor = new Overlay({
             element: this.dom,
             positioning: 'center-center',
             stopEvent: false
@@ -28,4 +26,3 @@ class DomPoint {
         this.myOlMap.map.removeOverlay(this.anchor);
     }
 }
-exports.default = DomPoint;

package/dist/core/Line.d.ts

@@ -1,6 +1,5 @@
 import Map from "ol/Map";
 import MyOl from "../index";
-import { Style } from "ol/style";
 import { OptionsType, MapJSONData } from "../types";
 export default class Line {
     private map;
@@ -16,5 +15,5 @@ export default class Line {
     addRiverWidthByLev(arr?: any): Promise<void>;
     setFeatureAttr(feature: {
         get: (arg0: string) => any;
-    }): Style;
+    }): any;
 }

package/dist/core/Line.js

@@ -1,19 +1,8 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const Vector_1 = require("ol/source/Vector");
-const GeoJSON_1 = require("ol/format/GeoJSON");
-const Vector_2 = require("ol/layer/Vector");
-const style_1 = require("ol/style");
-class Line {
+import VectorSource from "ol/source/Vector";
+import GeoJSON from "ol/format/GeoJSON";
+import VectorLayer from "ol/layer/Vector";
+import { Stroke, Style } from "ol/style";
+export default class Line {
     constructor(myOlMap, map) {
         this.riverLayerList = [];
         this.riverLayerShow = false;
@@ -21,65 +10,64 @@ class Line {
         this.map = map;
     }
     addLineCommon(data, options) {
-        const layer = new Vector_2.default({
+        const layer = new VectorLayer({
             name: options.type,
             layerName: options.type,
-            source: new Vector_1.default({
-                features: (new GeoJSON_1.default()).readFeatures(data)
+            source: new VectorSource({
+                features: (new GeoJSON()).readFeatures(data)
             }),
             style: function (feature) {
-                return new style_1.Style({
-                    stroke: new style_1.Stroke({
+                return new Style({
+                    stroke: new Stroke({
                         color: options.strokeColor || 'rgba(3, 122, 255, 1)',
                         width: options.strokeWidth || 3
                     }),
                 });
-            }
+            },
+            zIndex: options.zIndex ?? 3
         });
         this[options.type + 'Layer'] = layer;
         this.map.addLayer(layer);
     }
     // 添加水系并按照zoom显示不同级别
-    addRiverLayersByZoom(fyRiverJson_1) {
-        return __awaiter(this, arguments, void 0, function* (fyRiverJson, options = { type: 'river' }) {
-            this.riverLayerShow = !!options.show;
-            this.riverLayerList = [];
-            for (let i = 1; i <= 5; i++) {
-                const vectorSource = new Vector_1.default({
-                    format: new GeoJSON_1.default(),
-                    loader: function () {
-                        const geojson = new GeoJSON_1.default();
-                        fyRiverJson.features.forEach((feature) => {
-                            if (feature.properties.level === i) {
-                                const olFeature = geojson.readFeature(feature);
-                                vectorSource.addFeature(olFeature);
-                            }
-                        });
-                    },
-                    // 其他配置
-                });
-                const riverLayer = new Vector_2.default({
-                    name: 'river',
-                    layerName: 'river',
-                    source: vectorSource,
-                    style: function () {
-                        return new style_1.Style({
-                            stroke: new style_1.Stroke({
-                                color: options.strokeColor || 'rgb(0,113,255)',
-                                width: options.strokeWidth || 3
-                            })
-                        });
-                    },
-                    zIndex: 6,
-                });
-                riverLayer.setVisible(false);
-                this.riverLayerList.push(riverLayer);
-                this.map.addLayer(riverLayer);
-            }
-            this.showRiverLayerByZoom();
-            this.myOlMap.mapOnEvent('moveend', () => {
-                this.showRiverLayerByZoom();
+    async addRiverLayersByZoom(fyRiverJson, options = { type: 'river' }) {
+        this.riverLayerShow = !!options.show;
+        this.riverLayerList = [];
+        for (let i = 1; i <= 5; i++) {
+            const vectorSource = new VectorSource({
+                format: new GeoJSON(),
+                loader: function () {
+                    const geojson = new GeoJSON();
+                    fyRiverJson.features.forEach((feature) => {
+                        if (feature.properties.level === i) {
+                            const olFeature = geojson.readFeature(feature);
+                            vectorSource.addFeature(olFeature);
+                        }
+                    });
+                },
+                // 其他配置
+            });
+            const riverLayer = new VectorLayer({
+                name: 'river',
+                layerName: 'river',
+                source: vectorSource,
+                style: function () {
+                    return new Style({
+                        stroke: new Stroke({
+                            color: options.strokeColor || 'rgb(0,113,255)',
+                            width: options.strokeWidth || 3
+                        })
+                    });
+                },
+                zIndex: options.zIndex ?? 6
             });
+            riverLayer.setVisible(false);
+            this.riverLayerList.push(riverLayer);
+            this.map.addLayer(riverLayer);
+        }
+        this.showRiverLayerByZoom();
+        this.myOlMap.mapOnEvent('moveend', () => {
+            this.showRiverLayerByZoom();
         });
     }
     showRiverLayer(show) {
@@ -101,29 +89,26 @@ class Line {
         });
     }
     // 添加全部级别河流根据级别显示不同宽度
-    addRiverWidthByLev() {
-        return __awaiter(this, arguments, void 0, function* (arr = {}) {
-            const riverLayer = new Vector_2.default({
-                name: 'river',
-                layerName: 'river',
-                source: new Vector_1.default({
-                    features: (new GeoJSON_1.default()).readFeatures(arr)
-                }),
-                style: (feature) => this.setFeatureAttr(feature),
-                zIndex: 3
-            });
-            this.map.addLayer(riverLayer);
+    async addRiverWidthByLev(arr = {}) {
+        const riverLayer = new VectorLayer({
+            name: 'river',
+            layerName: 'river',
+            source: new VectorSource({
+                features: (new GeoJSON()).readFeatures(arr)
+            }),
+            style: (feature) => this.setFeatureAttr(feature),
+            zIndex: 3
         });
+        this.map.addLayer(riverLayer);
     }
     setFeatureAttr(feature) {
         const level = feature.get('level');
         const levelWidth = { 1: 2, 2: 1, 3: 0.5, 4: 0.5, 5: 0.5 };
-        return new style_1.Style({
-            stroke: new style_1.Stroke({
+        return new Style({
+            stroke: new Stroke({
                 color: 'rgba(3, 122, 255, 1)',
                 width: levelWidth[Number(level)]
             }),
         });
     }
 }
-exports.default = Line;

package/dist/core/MapBaseLayers.d.ts

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

package/dist/core/MapBaseLayers.js

@@ -1,20 +1,18 @@
-"use strict";
 /**
  * 地图底图图层
  */
-Object.defineProperty(exports, "__esModule", { value: true });
-const layer_1 = require("ol/layer");
-const proj_1 = require("ol/proj");
-const extent_1 = require("ol/extent");
-const source_1 = require("ol/source");
-const WMTS_1 = require("ol/tilegrid/WMTS");
-const XYZ_1 = require("ol/source/XYZ");
-const MapTools_1 = require("./MapTools");
+import { Tile as TileLayer } from "ol/layer";
+import { get as getProjection } from "ol/proj";
+import { getTopLeft, getWidth } from "ol/extent";
+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'
 };
-class MapBaseLayers {
+export default class MapBaseLayers {
     constructor(map, options) {
         this.mapLayers = {
             tianditu: null,
@@ -28,7 +26,7 @@ class MapBaseLayers {
             token: ''
         };
         this.map = map;
-        this.options = Object.assign(Object.assign({}, this.options), options);
+        this.options = { ...this.options, ...options };
         if (!this.options.token) {
             throw new Error('请配置token');
         }
@@ -52,14 +50,14 @@ class MapBaseLayers {
     }
     createLayer(layer) {
         if (this.options.mapClip && this.options.mapClipData) {
-            layer = MapTools_1.default.setMapClip(layer, this.options.mapClipData);
+            layer = MapTools.setMapClip(layer, this.options.mapClipData);
         }
         return layer;
     }
     getTileGrid(length) {
-        const projection = (0, proj_1.get)('EPSG:4326');
-        const projectionExtent = projection === null || projection === void 0 ? void 0 : projection.getExtent();
-        const size = (0, extent_1.getWidth)(projectionExtent) / 256;
+        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) {
@@ -67,16 +65,16 @@ class MapBaseLayers {
             resolutions[i] = size / pow;
             matrixIds[i] = i;
         }
-        return new WMTS_1.default({
-            origin: (0, extent_1.getTopLeft)(projectionExtent),
+        return new WMTSTileGrid({
+            origin: getTopLeft(projectionExtent),
             resolutions,
             matrixIds
         });
     }
     //img_c 影像底图 ter_c 地形底图
     getTiandiTuLayer(tiandituType = 'img_c') {
-        const layer = new layer_1.Tile({
-            source: new source_1.WMTS({
+        const layer = 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'],
                 layer: 'img',
@@ -99,8 +97,8 @@ class MapBaseLayers {
     addZhujiLayer(show) {
         console.log('[注记加载]');
         if (!this.zhujiMapLayer) {
-            this.zhujiMapLayer = new layer_1.Tile({
-                source: new XYZ_1.default({
+            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'
                 }),
@@ -111,4 +109,3 @@ class MapBaseLayers {
         this.zhujiMapLayer.setVisible(show);
     }
 }
-exports.default = MapBaseLayers;

package/dist/core/MapTools.js

@@ -1,11 +1,10 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const Vector_1 = require("ol/layer/Vector");
-const Vector_2 = require("ol/source/Vector");
-const GeoJSON_1 = require("ol/format/GeoJSON");
-const style_1 = require("ol/style");
-const render_1 = require("ol/render");
-class MapTools {
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
+import GeoJSON from "ol/format/GeoJSON";
+import { Fill, Style } from "ol/style";
+import { getVectorContext } from "ol/render";
+export default class MapTools {
     constructor(map) {
         this.map = map;
     }
@@ -31,25 +30,23 @@ class MapTools {
      * 设置地图裁剪
      */
     static setMapClip(baseLayer, data) {
-        var _a;
-        const clipLayer = new Vector_1.default({
+        const clipLayer = new VectorLayer({
             style: null,
-            source: new Vector_2.default({
-                features: new GeoJSON_1.default().readFeatures(data)
+            source: new VectorSource({
+                features: new GeoJSON().readFeatures(data)
             })
         });
-        const style = new style_1.Style({
-            fill: new style_1.Fill({
+        const style = new Style({
+            fill: new Fill({
                 color: 'transparent'
             })
         });
         baseLayer.on("prerender", (event) => {
-            var _a;
-            const vectorContext = (0, render_1.getVectorContext)(event);
+            const vectorContext = getVectorContext(event);
             event.context.globalCompositeOperation = 'source-over';
             const ctx = event.context;
             ctx.save();
-            (_a = clipLayer.getSource()) === null || _a === void 0 ? void 0 : _a.forEachFeature(function (feature) {
+            clipLayer.getSource()?.forEachFeature(function (feature) {
                 vectorContext.drawFeature(feature, style);
             });
             ctx.clip();
@@ -58,9 +55,8 @@ class MapTools {
             const ctx = event.context;
             ctx.restore();
         });
-        (_a = clipLayer.getSource()) === null || _a === void 0 ? void 0 : _a.on('addfeature', function () {
-            var _a;
-            baseLayer.setExtent((_a = clipLayer.getSource()) === null || _a === void 0 ? void 0 : _a.getExtent());
+        clipLayer.getSource()?.on('addfeature', function () {
+            baseLayer.setExtent(clipLayer.getSource()?.getExtent());
         });
         return baseLayer;
     }
@@ -68,4 +64,3 @@ class MapTools {
         this.map.removeLayer(this.getLayerByLayerName(layerName));
     }
 }
-exports.default = MapTools;

package/dist/core/Point.d.ts

@@ -1,6 +1,4 @@
 import Map from "ol/Map";
-import VectorLayer from "ol/layer/Vector";
-import VectorSource from "ol/source/Vector";
 import MyOl from "../index";
 import { OptionsType, PointData } from '../types';
 export default class Point {
@@ -17,7 +15,7 @@ export default class Point {
      *   hasImg: Boolean 是否显示图标
      * }
      */
-    addPoint(pointData: PointData[], type: string, options: OptionsType): VectorLayer<VectorSource<import("ol/geom").Geometry>>;
+    addPoint(pointData: PointData[], type: string, options: OptionsType): any;
     addClusterPoint(pointData: any[], type: string | undefined, options: OptionsType): void;
     /**
      * 添加点 - 闪烁

package/dist/core/Point.js

@@ -1,17 +1,16 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const Overlay_1 = require("ol/Overlay");
-const Feature_1 = require("ol/Feature");
-const geom_1 = require("ol/geom");
-const style_1 = require("ol/style");
+import Overlay from 'ol/Overlay';
+import Feature from "ol/Feature";
+import { Point as olPoint } from "ol/geom";
+import { Text, Style, Fill, Stroke, Icon } from "ol/style";
 // import {Style, Icon, Text} from "ol/style";
-const Vector_1 = require("ol/layer/Vector");
-const Vector_2 = require("ol/source/Vector");
-const source_1 = require("ol/source");
-const turf = require("turf");
-const GeoJSON_1 = require("ol/format/GeoJSON");
-const DomPoint_1 = require("./DomPoint");
-class Point {
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
+import { Cluster } from 'ol/source';
+import * as turf from 'turf';
+import GeoJSON from "ol/format/GeoJSON";
+import DomPoint from "./DomPoint";
+export default class Point {
     constructor(myOlMap, map) {
         this.myOlMap = myOlMap;
         this.map = map;
@@ -29,23 +28,22 @@ class Point {
     addPoint(pointData, type, options) {
         const pointFeatureList = [];
         pointData.forEach((item) => {
-            var _a;
-            const pointFeature = new Feature_1.default({
+            const pointFeature = new Feature({
                 // clickLocation: options.clickLocation,
                 // all: JSON.stringify(item),
                 rawData: item, //保存原始数据
                 type: type,
-                geometry: new geom_1.Point([item.lgtd, item.lttd])
+                geometry: new olPoint([item.lgtd, item.lttd])
             });
             const style = {};
             if (options.nameKey) {
-                style.text = new style_1.Text({
+                style.text = new Text({
                     text: item[options.nameKey],
                     font: options.textFont || '12px Calibri,sans-serif',
-                    fill: new style_1.Fill({
+                    fill: new Fill({
                         color: options.textFillColor || '#FFF'
                     }),
-                    stroke: new style_1.Stroke({
+                    stroke: new Stroke({
                         color: options.textStrokeColor || '#000',
                         width: options.textStrokeWidth || 3
                     }),
@@ -55,19 +53,19 @@ class Point {
             if (options.hasImg || options.hasImg === undefined) {
                 const iconOptions = {
                     src: options.img,
-                    scale: (_a = options.scale) !== null && _a !== void 0 ? _a : 1,
+                    scale: options.scale ?? 1,
                 };
                 if (options.color) {
                     iconOptions.color = options.color;
                 }
-                style.image = new style_1.Icon(iconOptions);
+                style.image = new Icon(iconOptions);
             }
-            pointFeature.setStyle(new style_1.Style(style));
+            pointFeature.setStyle(new Style(style));
             pointFeatureList.push(pointFeature);
         });
-        const PointVectorLayer = new Vector_1.default({
+        const PointVectorLayer = new VectorLayer({
             layerName: type,
-            source: new Vector_2.default({
+            source: new VectorSource({
                 features: pointFeatureList
             }),
             zIndex: options.zIndex || 4,
@@ -79,35 +77,35 @@ class Point {
     addClusterPoint(pointData, type = 'village', options) {
         const pointFeatureList = [];
         pointData.forEach(item => {
-            const pointFeature = new Feature_1.default({
-                geometry: new geom_1.Point([item.lgtd, item.lttd]),
+            const pointFeature = new Feature({
+                geometry: new olPoint([item.lgtd, item.lttd]),
                 name: options.nameKey ? item[options.nameKey] : '',
             });
             pointFeatureList.push(pointFeature);
         });
-        const source = new Vector_2.default({
+        const source = new VectorSource({
             features: pointFeatureList,
         });
-        const clusterSource = new source_1.Cluster({
+        const clusterSource = new Cluster({
             distance: 40, // The distance for clustering in pixels
             source: source,
         });
-        const clusterLayer = new Vector_1.default({
+        const clusterLayer = new VectorLayer({
             layerName: type,
             source: clusterSource,
             style: function (feature) {
                 const aviValue = feature.get('features')[0].get('name');
-                return new style_1.Style({
-                    image: new style_1.Icon({
+                return new Style({
+                    image: new Icon({
                         src: options.img,
                     }),
-                    text: new style_1.Text({
+                    text: new Text({
                         text: aviValue,
                         font: '12px Calibri,sans-serif',
-                        fill: new style_1.Fill({
+                        fill: new Fill({
                             color: '#FFF'
                         }),
-                        stroke: new style_1.Stroke({
+                        stroke: new Stroke({
                             color: '#000',
                             width: 3
                         }),
@@ -125,16 +123,16 @@ class Point {
      *
      */
     addFlashWarnPoint(img) {
-        const flashIconLayer = new Vector_1.default({
-            source: new Vector_2.default({
+        const flashIconLayer = new VectorLayer({
+            source: new VectorSource({
                 features: [
-                    new Feature_1.default({
-                        geometry: new geom_1.Point([119.81, 29.969]),
+                    new Feature({
+                        geometry: new olPoint([119.81, 29.969]),
                     })
                 ]
             }),
-            style: new style_1.Style({
-                image: new style_1.Icon({
+            style: new Style({
+                image: new Icon({
                     src: img,
                 })
             }),
@@ -152,8 +150,8 @@ class Point {
             return centroid.geometry.coordinates;
         };
         const features = json.features;
-        const vectorSource = new Vector_2.default({
-            format: new GeoJSON_1.default(),
+        const vectorSource = new VectorSource({
+            format: new GeoJSON(),
         });
         twinkleList.forEach(item => {
             const feature = features.find((ele) => {
@@ -162,7 +160,7 @@ class Point {
             if (!feature)
                 return;
             feature.properties.level = item.lev;
-            const geojson = new GeoJSON_1.default();
+            const geojson = new GeoJSON();
             const olFeature = geojson.readFeature(feature);
             vectorSource.addFeature(olFeature);
             if (feature) {
@@ -171,22 +169,22 @@ class Point {
                 item.lttd = polygonCenter[1];
             }
         });
-        const basinLayer = new Vector_1.default({
+        const basinLayer = new VectorLayer({
             name: 'twinklePoint',
             layerName: 'twinklePoint',
             source: vectorSource,
             style: function (feature) {
-                return new style_1.Style({
-                    stroke: new style_1.Stroke({
+                return new Style({
+                    stroke: new Stroke({
                         color: 'rgb(139,188,245)',
                         width: 3
                     }),
-                    fill: new style_1.Fill({ color: 'rgba(255, 255, 255, 0)' }),
-                    text: new style_1.Text({
+                    fill: new Fill({ color: 'rgba(255, 255, 255, 0)' }),
+                    text: new Text({
                         text: feature.values_['BASIN'] || "",
                         font: '14px Calibri,sans-serif',
-                        fill: new style_1.Fill({ color: '#FFF' }),
-                        stroke: new style_1.Stroke({
+                        fill: new Fill({ color: '#FFF' }),
+                        stroke: new Stroke({
                             color: '#409EFF', width: 2
                         }),
                     })
@@ -206,13 +204,12 @@ class Point {
      * @param callback
      */
     setTwinkleLayer(twinkleList, className = 'marker_warning', key, callback) {
-        var _a;
         // 查找class是warn-points的dom，并删除
         const arr = document.getElementsByClassName(className);
         const l = arr.length;
         for (let i = l - 1; i >= 0; i--) {
             if (arr[i] !== null) {
-                (_a = arr[i].parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(arr[i]);
+                arr[i].parentNode?.removeChild(arr[i]);
             }
         }
         const el = document.getElementById('marker_warning');
@@ -230,7 +227,7 @@ class Point {
             if (el)
                 el.insertAdjacentElement('afterend', el2);
             // 创建一个覆盖物
-            const anchor = new Overlay_1.default({
+            const anchor = new Overlay({
                 element: document.getElementById(className + i) || undefined,
                 positioning: 'center-center',
                 className: className
@@ -261,7 +258,7 @@ class Point {
     setDomPoint(id, lgtd, lttd) {
         const el = document.getElementById(id);
         if (el) {
-            const anchor = new Overlay_1.default({
+            const anchor = new Overlay({
                 id: id,
                 element: el,
                 positioning: 'center-center',
@@ -277,7 +274,7 @@ class Point {
     }
     setDomPointVue(pointInfoList, template) {
         const layer = pointInfoList.map((pointInfo) => {
-            return new DomPoint_1.default(this.myOlMap, {
+            return new DomPoint(this.myOlMap, {
                 Template: template,
                 lgtd: pointInfo.lgtd,
                 lttd: pointInfo.lttd,
@@ -303,4 +300,3 @@ class Point {
         };
     }
 }
-exports.default = Point;

package/dist/core/Polygon.d.ts

@@ -1,7 +1,4 @@
 import Map from "ol/Map";
-import VectorLayer from "ol/layer/Vector";
-import VectorSource from "ol/source/Vector";
-import { Geometry } from "ol/geom";
 import MyOl from "../index";
 import { OptionsType, MapJSONData } from '../types';
 export default class Polygon {
@@ -22,7 +19,7 @@ export default class Polygon {
      * @param options 图层配置
      */
     addPolygonMapLayer(data: MapJSONData, type: string | undefined, options: OptionsType): void;
-    addPolygonLayerCommon(dataJSON: MapJSONData, options?: OptionsType): Promise<VectorLayer<VectorSource<Geometry>>>;
+    addPolygonLayerCommon(dataJSON: MapJSONData, options?: OptionsType): Promise<any>;
     /**
      * 根据数据数组更新某个面颜色
      * @param layerName 图层名称

package/dist/core/Polygon.js

@@ -1,25 +1,15 @@
 "use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const Vector_1 = require("ol/layer/Vector");
-const Vector_2 = require("ol/source/Vector");
-const GeoJSON_1 = require("ol/format/GeoJSON");
-const style_1 = require("ol/style");
-const layer_1 = require("ol/layer");
-const geom_1 = require("ol/geom");
-const Polygon_1 = require("ol/geom/Polygon");
-const Feature_1 = require("ol/Feature");
-const ImageStatic_1 = require("ol/source/ImageStatic");
-const MapTools_1 = require("./MapTools");
-class Polygon {
+import VectorLayer from "ol/layer/Vector";
+import VectorSource from "ol/source/Vector";
+import GeoJSON from "ol/format/GeoJSON";
+import { Fill, Stroke, Style, Text } from "ol/style";
+import { Image as ImageLayer } from "ol/layer";
+import { Geometry, LinearRing } from "ol/geom";
+import { fromExtent } from "ol/geom/Polygon";
+import Feature from "ol/Feature";
+import ImageStatic from "ol/source/ImageStatic";
+import MapTools from "./MapTools";
+export default class Polygon {
     constructor(myOlMap, map) {
         this.colorMap = {
             '0': 'rgba(255, 0, 0, 0.6)',
@@ -44,34 +34,32 @@ class Polygon {
      * @param options 图层配置
      */
     addPolygonMapLayer(data, type = 'fuyangqu', options) {
-        var _a;
-        const borderLayer = new Vector_1.default({
+        const borderLayer = new VectorLayer({
             name: type,
             layerName: options.type || type,
-            source: new Vector_2.default({
-                features: (new GeoJSON_1.default()).readFeatures(data)
+            source: new VectorSource({
+                features: (new GeoJSON()).readFeatures(data)
             }),
             style: function (feature) {
-                var _a, _b, _c, _d;
                 feature.set('layerName', type);
-                return new style_1.Style({
-                    stroke: new style_1.Stroke({
+                return new Style({
+                    stroke: new Stroke({
                         color: options.strokeColor || '#EBEEF5',
                         width: options.strokeWidth || 3
                     }),
-                    fill: new style_1.Fill({ color: 'rgba(255, 255, 255, 0)' }),
-                    text: new style_1.Text({
+                    fill: new Fill({ color: 'rgba(255, 255, 255, 0)' }),
+                    text: new Text({
                         text: options.nameKey ? feature.values_[options.nameKey] : "",
-                        font: (_a = options.textFont) !== null && _a !== void 0 ? _a : '14px Calibri,sans-serif',
-                        fill: new style_1.Fill({ color: (_b = options.textFillColor) !== null && _b !== void 0 ? _b : '#FFF' }),
-                        stroke: new style_1.Stroke({
-                            color: (_c = options.textStrokeColor) !== null && _c !== void 0 ? _c : '#409EFF',
-                            width: (_d = options.textStrokeWidth) !== null && _d !== void 0 ? _d : 2
+                        font: options.textFont ?? '14px Calibri,sans-serif',
+                        fill: new Fill({ color: options.textFillColor ?? '#FFF' }),
+                        stroke: new Stroke({
+                            color: options.textStrokeColor ?? '#409EFF',
+                            width: options.textStrokeWidth ?? 2
                         })
                     })
                 });
             },
-            zIndex: (_a = options.zIndex) !== null && _a !== void 0 ? _a : 2
+            zIndex: options.zIndex ?? 2
         });
         borderLayer.setVisible(options.show === undefined ? true : options.show);
         this.map.addLayer(borderLayer);
@@ -80,53 +68,49 @@ class Polygon {
     }
     // 添加分区
     //fyBasinJson中的id的key需要跟options中的nameKey一致
-    addPolygonLayerCommon(dataJSON_1) {
-        return __awaiter(this, arguments, void 0, function* (dataJSON, options = {}) {
-            var _a, _b, _c;
-            if (options.type != null) {
-                this.myOlMap.getTools().removeLayer(options.type);
-            }
-            const layer = new Vector_1.default({
-                name: options.type,
-                layerName: options.type,
-                source: new Vector_2.default({
-                    features: (new GeoJSON_1.default()).readFeatures(dataJSON, (_a = options.projectionOptOptions) !== null && _a !== void 0 ? _a : {})
-                }),
-                style: function (feature) {
-                    var _a, _b, _c, _d, _e, _f;
-                    feature.set('layerName', options.type);
-                    return new style_1.Style({
-                        stroke: new style_1.Stroke({
-                            color: (_a = options.strokeColor) !== null && _a !== void 0 ? _a : '#EBEEF5',
-                            width: (_b = options.strokeWidth) !== null && _b !== void 0 ? _b : 3,
-                            lineDash: options.lineDash,
-                            lineDashOffset: options.lineDashOffset
-                        }),
-                        fill: new style_1.Fill({ color: options.fillColor || 'rgba(255, 255, 255, 0.3)' }),
-                        text: new style_1.Text({
-                            text: options.nameKey ? feature.values_[options.nameKey] : "",
-                            font: (_c = options.textFont) !== null && _c !== void 0 ? _c : '14px Calibri,sans-serif',
-                            fill: new style_1.Fill({ color: (_d = options.textFillColor) !== null && _d !== void 0 ? _d : '#FFF' }),
-                            stroke: new style_1.Stroke({
-                                color: (_e = options.textStrokeColor) !== null && _e !== void 0 ? _e : '#409EFF',
-                                width: (_f = options.textStrokeWidth) !== null && _f !== void 0 ? _f : 2
-                            })
+    async addPolygonLayerCommon(dataJSON, options = {}) {
+        if (options.type != null) {
+            this.myOlMap.getTools().removeLayer(options.type);
+        }
+        const layer = new VectorLayer({
+            name: options.type,
+            layerName: options.type,
+            source: new VectorSource({
+                features: (new GeoJSON()).readFeatures(dataJSON, options.projectionOptOptions ?? {})
+            }),
+            style: function (feature) {
+                feature.set('layerName', options.type);
+                return new Style({
+                    stroke: new Stroke({
+                        color: options.strokeColor ?? '#EBEEF5',
+                        width: options.strokeWidth ?? 3,
+                        lineDash: options.lineDash,
+                        lineDashOffset: options.lineDashOffset
+                    }),
+                    fill: new Fill({ color: options.fillColor || 'rgba(255, 255, 255, 0.3)' }),
+                    text: new Text({
+                        text: options.nameKey ? feature.values_[options.nameKey] : "",
+                        font: options.textFont ?? '14px Calibri,sans-serif',
+                        fill: new Fill({ color: options.textFillColor ?? '#FFF' }),
+                        stroke: new Stroke({
+                            color: options.textStrokeColor ?? '#409EFF',
+                            width: options.textStrokeWidth ?? 2
                         })
-                    });
-                },
-                zIndex: (_b = options.zIndex) !== null && _b !== void 0 ? _b : 2
-            });
-            layer.setVisible(options.show === undefined ? true : options.show);
-            this.map.addLayer(layer);
-            if (options.fitView) {
-                // 获取面的范围
-                const extent = (_c = layer.getSource()) === null || _c === void 0 ? void 0 : _c.getExtent();
-                // 适应这个范围
-                if (extent)
-                    this.map.getView().fit(extent, { duration: 500 });
-            }
-            return layer;
+                    })
+                });
+            },
+            zIndex: options.zIndex ?? 2
         });
+        layer.setVisible(options.show === undefined ? true : options.show);
+        this.map.addLayer(layer);
+        if (options.fitView) {
+            // 获取面的范围
+            const extent = layer.getSource()?.getExtent();
+            // 适应这个范围
+            if (extent)
+                this.map.getView().fit(extent, { duration: 500 });
+        }
+        return layer;
     }
     /**
      * 根据数据数组更新某个面颜色
@@ -140,28 +124,27 @@ class Polygon {
      */
     updateFeatureColors(layerName, colorObj, options) {
         const layer = this.map.getLayers().getArray().find(layer => layer.get('name') === layerName);
-        if (layer instanceof Vector_1.default) {
+        if (layer instanceof VectorLayer) {
             const source = layer.getSource();
             const features = source.getFeatures();
             features.forEach((feature) => {
-                var _a, _b, _c, _d, _e;
                 if (options.nameKey) {
                     const name = feature['values_'][options.nameKey];
                     const newColor = colorObj[name];
                     if (newColor) {
-                        feature.setStyle(new style_1.Style({
-                            stroke: new style_1.Stroke({
-                                color: (_a = options.strokeColor) !== null && _a !== void 0 ? _a : '#EBEEF5',
-                                width: (_b = options.strokeWidth) !== null && _b !== void 0 ? _b : 3
+                        feature.setStyle(new Style({
+                            stroke: new Stroke({
+                                color: options.strokeColor ?? '#EBEEF5',
+                                width: options.strokeWidth ?? 3
                             }),
-                            fill: new style_1.Fill({ color: newColor }),
-                            text: new style_1.Text({
+                            fill: new Fill({ color: newColor }),
+                            text: new Text({
                                 text: options.showText === false ? "" : name,
-                                font: (_c = options.textFont) !== null && _c !== void 0 ? _c : '14px Calibri,sans-serif',
-                                fill: new style_1.Fill({ color: options.textFillColor || '#FFF' }),
-                                stroke: new style_1.Stroke({
-                                    color: (_d = options.textStrokeColor) !== null && _d !== void 0 ? _d : '#409EFF',
-                                    width: (_e = options.textStrokeWidth) !== null && _e !== void 0 ? _e : 2
+                                font: options.textFont ?? '14px Calibri,sans-serif',
+                                fill: new Fill({ color: options.textFillColor || '#FFF' }),
+                                stroke: new Stroke({
+                                    color: options.textStrokeColor ?? '#409EFF',
+                                    width: options.textStrokeWidth ?? 2
                                 })
                             })
                         }));
@@ -179,7 +162,6 @@ class Polygon {
      * @param options
      */
     setOutLayer(data, options) {
-        var _a, _b, _c;
         /** geom转坐标数组 **/
         function getCoordsGroup(geom) {
             let group = []; //
@@ -211,19 +193,19 @@ class Polygon {
                 return;
             }
             const extent = view.getProjection().getExtent();
-            const polygonRing = (0, Polygon_1.fromExtent)(extent);
+            const polygonRing = fromExtent(extent);
             part.forEach((item) => {
-                const linearRing = new geom_1.LinearRing(item);
+                const linearRing = new LinearRing(item);
                 polygonRing.appendLinearRing(linearRing);
             });
             return polygonRing;
         }
         /** 添加遮罩 **/
         function createShade(geom, view) {
-            if (geom instanceof geom_1.Geometry) {
+            if (geom instanceof Geometry) {
                 const source = geom.clone();
                 const polygon = erase(source, view);
-                const feature = new Feature_1.default({
+                const feature = new Feature({
                     geometry: polygon
                 });
                 return {
@@ -233,31 +215,31 @@ class Polygon {
             }
         }
         // 遮罩样式
-        const shadeStyle = new style_1.Style({
-            fill: new style_1.Fill({
-                color: (_a = options === null || options === void 0 ? void 0 : options.fillColor) !== null && _a !== void 0 ? _a : 'rgba(0,27,59,0.8)'
+        const shadeStyle = new Style({
+            fill: new Fill({
+                color: options?.fillColor ?? 'rgba(0,27,59,0.8)'
             }),
-            stroke: new style_1.Stroke({
-                width: (_b = options === null || options === void 0 ? void 0 : options.strokeWidth) !== null && _b !== void 0 ? _b : 1,
-                color: (_c = options === null || options === void 0 ? void 0 : options.strokeColor) !== null && _c !== void 0 ? _c : 'rgba(0,27,59,0.8)'
+            stroke: new Stroke({
+                width: options?.strokeWidth ?? 1,
+                color: options?.strokeColor ?? 'rgba(0,27,59,0.8)'
             })
         });
         // 遮罩数据源
-        const vtSource = new Vector_2.default();
+        const vtSource = new VectorSource();
         // 遮罩图层
-        const vtLayer = new Vector_1.default({
+        const vtLayer = new VectorLayer({
             source: vtSource,
             style: shadeStyle,
             zIndex: 99
         });
         this.map.addLayer(vtLayer);
-        const features = new GeoJSON_1.default().readFeatures(data);
+        const features = new GeoJSON().readFeatures(data);
         const ft = features[0];
         const bound = ft.getGeometry();
         const result = createShade(bound, this.map.getView());
         if (result) {
             vtSource.addFeature(result.feature);
-            if (options === null || options === void 0 ? void 0 : options.extent)
+            if (options?.extent)
                 this.map.getView().fit(result.shade);
         }
     }
@@ -269,9 +251,8 @@ class Polygon {
      * @param options 图层配置
      */
     addImgLayer(layerName, img, extent, options = { zIndex: 3 }) {
-        var _a, _b;
         if (img && extent) {
-            const source = new ImageStatic_1.default({
+            const source = new ImageStatic({
                 url: img,
                 imageExtent: extent
             });
@@ -279,16 +260,16 @@ class Polygon {
                 this[layerName].setSource(source);
             }
             else {
-                let imageLayer = new layer_1.Image();
+                let imageLayer = new ImageLayer();
                 imageLayer.set('name', layerName);
                 imageLayer.set('layerName', layerName);
                 imageLayer.setSource(source);
-                imageLayer.setZIndex((_a = options.zIndex) !== null && _a !== void 0 ? _a : 3);
-                imageLayer.setOpacity((_b = options.opacity) !== null && _b !== void 0 ? _b : 1);
+                imageLayer.setZIndex(options.zIndex ?? 3);
+                imageLayer.setOpacity(options.opacity ?? 1);
                 if (options.show !== undefined)
                     imageLayer.setVisible(options.show);
                 if (options.mapClip && options.mapClipData) {
-                    imageLayer = MapTools_1.default.setMapClip(imageLayer, options.mapClipData);
+                    imageLayer = MapTools.setMapClip(imageLayer, options.mapClipData);
                 }
                 this.map.addLayer(imageLayer);
                 this[layerName] = imageLayer;
@@ -304,4 +285,3 @@ class Polygon {
         this[layerName] = null;
     }
 }
-exports.default = Polygon;

package/dist/index.d.ts

@@ -1,4 +1,3 @@
-import View from "ol/View";
 import Map from "ol/Map";
 import Polygon from "./core/Polygon";
 import Point from "./core/Point";
@@ -25,7 +24,7 @@ export default class MyOl {
      * @param options.extent 视图范围
      * @returns View
      */
-    static getView(options?: MapInitType): View;
+    static getView(options?: MapInitType): any;
     /**
      * 获取 地图 面 操作
      * @returns Polygon

package/dist/index.js

@@ -1,25 +1,24 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const proj4_1 = require("ol/proj/proj4");
-const proj_1 = require("ol/proj");
-const View_1 = require("ol/View");
-const Map_1 = require("ol/Map");
-const Polygon_1 = require("./core/Polygon");
-const Point_1 = require("./core/Point");
-const Line_1 = require("./core/Line");
-const MapBaseLayers_1 = require("./core/MapBaseLayers");
-const proj4_2 = require("proj4");
-const MapTools_1 = require("./core/MapTools");
-const control_1 = require("ol/control");
+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';
 class MyOl {
     constructor(id, options) {
         options.center = options.center || MyOl.DefaultOptions.center;
-        this.options = Object.assign(Object.assign({}, MyOl.DefaultOptions), options);
-        this.map = new Map_1.default({
+        this.options = { ...MyOl.DefaultOptions, ...options };
+        this.map = new Map({
             target: id, // 地图容器
             view: MyOl.getView(this.options), // 视图
             layers: this.options.layers || [],
-            controls: (0, control_1.defaults)({
+            controls: defaultControls({
                 zoom: false,
                 rotate: false,
                 attribution: false
@@ -37,28 +36,28 @@ class MyOl {
      * @returns View
      */
     static getView(options = MyOl.DefaultOptions) {
-        proj4_2.default.defs("EPSG:4490", "+proj=longlat +ellps=GRS80 +no_defs");
-        proj4_2.default.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");
-        (0, proj4_1.register)(proj4_2.default);
-        const cgsc2000 = new proj_1.Projection({
+        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"
         });
-        (0, proj_1.addProjection)(cgsc2000);
+        olProjAddProjection(cgsc2000);
         // debugger
         // 视图配置
         const viewOptions = {
             projection: cgsc2000, // 坐标系
-            center: (0, proj_1.fromLonLat)(options.center, 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_1.default(viewOptions);
+        return new View(viewOptions);
     }
     //  ╔══════════╗
     //  ║  地图 面  ║
@@ -69,12 +68,12 @@ class MyOl {
      */
     getPolygon() {
         if (!this.polygon)
-            this.polygon = new Polygon_1.default(this, this.map);
+            this.polygon = new Polygon(this, this.map);
         return this.polygon;
     }
     getMapBaseLayers() {
         if (!this.baseLayers)
-            this.baseLayers = new MapBaseLayers_1.default(this.map, {
+            this.baseLayers = new MapBaseLayers(this.map, {
                 zIndex: 1,
                 mapClip: !!this.options.mapClipData,
                 mapClipData: this.options.mapClipData,
@@ -174,7 +173,7 @@ class MyOl {
      */
     getPoint() {
         if (!this.point)
-            this.point = new Point_1.default(this, this.map);
+            this.point = new Point(this, this.map);
         return this.point;
     }
     //  ╔══════════╗
@@ -186,7 +185,7 @@ class MyOl {
      */
     getLine() {
         if (!this.line)
-            this.line = new Line_1.default(this, this.map);
+            this.line = new Line(this, this.map);
         return this.line;
     }
     /**
@@ -207,7 +206,7 @@ class MyOl {
      */
     getTools() {
         if (!this.mapTools)
-            this.mapTools = new MapTools_1.default(this.map);
+            this.mapTools = new MapTools(this.map);
         return this.mapTools;
     }
     restPosition(duration = 3000) {
@@ -274,4 +273,4 @@ MyOl.DefaultOptions = {
     maxZoom: 20,
     extent: undefined
 };
-exports.default = MyOl;
+export default MyOl;

package/dist/types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/package.json

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