map-ol-utils 0.0.19 → 0.0.21

package/dist/index.cjs

@@ -43,6 +43,26 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 
 // src/index.ts
 var index_exports = {};
@@ -59,6 +79,7 @@ __export(index_exports, {
   createSelectByLayer: () => createSelectByLayer,
   createVectorFaceLayer: () => createVectorFaceLayer,
   createVectorLineLayer: () => createVectorLineLayer,
+  createWmtsLayer: () => createWmtsLayer,
   disposeMap: () => disposeMap,
   emitter: () => emitter_default,
   getMapInstance: () => getMapInstance,
@@ -77,9 +98,59 @@ var import_mitt = __toESM(require("mitt"), 1);
 var emitter = (0, import_mitt.default)();
 var emitter_default = emitter;
 
-// src/base-layer.ts
+// src/ogc-utils.ts
 var import_source = require("ol/source");
+var import_Tile = __toESM(require("ol/layer/Tile"), 1);
+var import_format = require("ol/format");
+var import_WMTS = require("ol/source/WMTS");
+var parser = new import_format.WMTSCapabilities();
+var capabilitiesMap = /* @__PURE__ */ new Map();
+var getCapabilities = (url) => {
+  return new Promise((resolve) => {
+    const capabilities = capabilitiesMap.get(url);
+    if (capabilities) {
+      resolve(capabilities);
+    } else {
+      fetch(url).then((data) => data.text()).then((text) => {
+        const capabilities2 = parser.read(text);
+        capabilitiesMap.set(url, capabilities2);
+        resolve(capabilities2);
+      });
+    }
+  });
+};
+var createWmtsLayer = (serverUrl) => (config) => __async(void 0, null, function* () {
+  const { style, format, version, layerName, matrixSet } = config;
+  const [workspace, datastore] = layerName.split(":");
+  const capabilitiesUrl = `${serverUrl}/${workspace}/${datastore}/gwc/service/wmts?request=GetCapabilities`;
+  return new Promise((resolve, reject) => {
+    getCapabilities(capabilitiesUrl).then((data) => {
+      const options = (0, import_WMTS.optionsFromCapabilities)(data, {
+        Style: style || "",
+        layer: datastore,
+        version: version || "1.1.0",
+        format: format || "image/png",
+        matrixSet: matrixSet || "EPSG:4326"
+      });
+      console.log(options);
+      if (options) {
+        resolve(
+          new import_Tile.default({
+            zIndex: 3,
+            className: layerName,
+            source: new import_source.WMTS(options)
+          })
+        );
+      } else {
+        reject(new Error("Unable to create TileLayer"));
+      }
+    });
+  });
+});
+
+// src/base-layer.ts
 var import_source2 = require("ol/source");
+var import_source3 = require("ol/source");
 var import_tilegrid = require("ol/tilegrid");
 var import_layer = require("ol/layer");
 
@@ -90,7 +161,7 @@ var import_control = require("ol/control");
 
 // src/layer-utils.ts
 var import_geom = require("ol/geom");
-var import_format = require("ol/format");
+var import_format2 = require("ol/format");
 var import_ol = require("ol");
 var import_interaction = require("ol/interaction");
 var import_Vector = __toESM(require("ol/layer/Vector"), 1);
@@ -157,7 +228,7 @@ var createGeoJsonLayer = (dataList, config) => {
   const vectorLayer = new import_Vector.default({
     className: layerName ? layerName : "ol-layer",
     source: new import_Vector2.default({
-      features: new import_format.GeoJSON().readFeatures(geoJson)
+      features: new import_format2.GeoJSON().readFeatures(geoJson)
     }),
     style: isLine ? new import_style.Style({
       stroke: new import_style.Stroke({
@@ -342,6 +413,7 @@ var createMassMarksLayer = (dataList, styleList = []) => {
     return feature;
   });
   const vectorLayer = new import_Vector.default({
+    zIndex: 2e3,
     source: new import_Vector2.default({
       features
     })
@@ -480,13 +552,13 @@ var resetMap = (config = { center: mapCenter, isClearAll: true }) => {
 };
 
 // src/base-layer.ts
-var import_WMTS = __toESM(require("ol/tilegrid/WMTS"), 1);
+var import_WMTS2 = __toESM(require("ol/tilegrid/WMTS"), 1);
 var createBaseLayer = (isDark = true) => {
   return new import_layer.Tile({
     zIndex: -1,
     minZoom: 8,
     maxZoom: 21,
-    source: new import_source.XYZ({
+    source: new import_source2.XYZ({
       tileGrid: new import_tilegrid.TileGrid({
         tileSize: 256,
         resolutions: [
@@ -504,13 +576,8 @@ var createBaseLayer = (isDark = true) => {
           26817861328125e-19,
           134089306640625e-20
         ],
-        origin: [118.122911693886, 31.2869311022836],
-        extent: [
-          118.340502132662,
-          29.2073269598186,
-          120.724787992425,
-          30.5617943760008
-        ]
+        origin: [118.125614083886, 31.2857011022836],
+        extent: [118.340502132662, 29.2073269598186, 120.724787992425, 30.5617943760008]
       }),
       projection: "EPSG:4326",
       urls: isDark ? [
@@ -532,13 +599,12 @@ var createBaseLayer = (isDark = true) => {
     }
   });
 };
-var createMapWorldLayer = (layerName, className, tk = "c77eddc667c5bed016fded560baf93e7") => {
+var createMapWorldLayer = (layerName, tk = "c77eddc667c5bed016fded560baf93e7") => {
   const [name, matrixSet] = layerName.split("_");
   return new import_layer.Tile({
-    className,
     cacheSize: 20240,
     zIndex: -1,
-    source: new import_source2.WMTS({
+    source: new import_source3.WMTS({
       crossOrigin: "anonymous",
       projection: "EPSG:4326",
       wrapX: true,
@@ -547,7 +613,7 @@ var createMapWorldLayer = (layerName, className, tk = "c77eddc667c5bed016fded560
       version: "1.0.0",
       format: "image/png",
       matrixSet,
-      tileGrid: new import_WMTS.default({
+      tileGrid: new import_WMTS2.default({
         origin: [-180, 90],
         matrixIds: [
           "1",
@@ -595,7 +661,8 @@ var createMapWorldLayer = (layerName, className, tk = "c77eddc667c5bed016fded560
       url: `https://t{0-7}.tianditu.gov.cn/${layerName}/wmts?tk=${tk}`
     }),
     properties: {
-      _isBaseLayer: true
+      _isBaseLayer: true,
+      _layerName: layerName
     }
   });
 };
@@ -626,6 +693,7 @@ var changeLayersByNames = (activeNames, allLayerNames) => {
   createSelectByLayer,
   createVectorFaceLayer,
   createVectorLineLayer,
+  createWmtsLayer,
   disposeMap,
   emitter,
   getMapInstance,

package/dist/index.d.cts

@@ -2,6 +2,7 @@ import { Map, Feature } from 'ol';
 import { Layer, Tile } from 'ol/layer';
 import { Source, XYZ, WMTS } from 'ol/source';
 import { Emitter, EventType } from 'mitt';
+import TileLayer from 'ol/layer/Tile';
 import * as ol_geom from 'ol/geom';
 import { Point } from 'ol/geom';
 import { Select } from 'ol/interaction';
@@ -72,21 +73,29 @@ type MassMarkersStyleOptions = {
     size: [number, number];
     anchor?: [number, number];
 };
+type WmtsSourceOptions = {
+    style?: string;
+    format?: string;
+    version?: string;
+    layerName: string;
+    matrixSet?: string;
+};
 
 declare const emitter: Emitter<Record<EventType, any>>;
 
+declare const createWmtsLayer: (serverUrl: string) => (config: WmtsSourceOptions) => Promise<TileLayer>;
+
 /**
- * 创建杭州规资地图
+ * 创建杭州规自地图
  * @param isDark
  */
 declare const createBaseLayer: (isDark?: boolean) => Tile<XYZ>;
 /**
  * 创建天地图
  * @param layerName - 图层名称
- * @param className - className
  * @param tk - 天地图TK
  */
-declare const createMapWorldLayer: (layerName: string, className: string, tk?: string) => Tile<WMTS>;
+declare const createMapWorldLayer: (layerName: string, tk?: string) => Tile<WMTS>;
 
 declare let instance: CustomMap;
 declare const createMapInstance: (config?: {}) => CustomMap;
@@ -156,4 +165,4 @@ declare const addMassMarksLayer: (getImgUrlFn: GetImgUrlFn) => (dataList: never[
  */
 declare const updateMarksLayersByStatus: (checkedStatusList?: any[]) => void;
 
-export { type CustomMap, type GetImgUrl, type GetImgUrlFn, type IconConfig, type LayerConfig, type LineConfig, type MassData, type MassMarkersStyleOptions, type VectorConfig, activeMarkerByUid, addMassMarksLayer, buildMassMarksStyles, createAnimationMarker, createBaseLayer, createGeoJsonLayer, createMapInstance, createMapWorldLayer, createMassMarksLayer, createSelectByLayer, createVectorFaceLayer, createVectorLineLayer, disposeMap, emitter, getMapInstance, instance, removeAllLayers, resetActiveMarker, resetActiveVector, resetMap, resetZoomAndCenter, updateMarksLayersByStatus };
+export { type CustomMap, type GetImgUrl, type GetImgUrlFn, type IconConfig, type LayerConfig, type LineConfig, type MassData, type MassMarkersStyleOptions, type VectorConfig, type WmtsSourceOptions, activeMarkerByUid, addMassMarksLayer, buildMassMarksStyles, createAnimationMarker, createBaseLayer, createGeoJsonLayer, createMapInstance, createMapWorldLayer, createMassMarksLayer, createSelectByLayer, createVectorFaceLayer, createVectorLineLayer, createWmtsLayer, disposeMap, emitter, getMapInstance, instance, removeAllLayers, resetActiveMarker, resetActiveVector, resetMap, resetZoomAndCenter, updateMarksLayersByStatus };

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import { Map, Feature } from 'ol';
 import { Layer, Tile } from 'ol/layer';
 import { Source, XYZ, WMTS } from 'ol/source';
 import { Emitter, EventType } from 'mitt';
+import TileLayer from 'ol/layer/Tile';
 import * as ol_geom from 'ol/geom';
 import { Point } from 'ol/geom';
 import { Select } from 'ol/interaction';
@@ -72,21 +73,29 @@ type MassMarkersStyleOptions = {
     size: [number, number];
     anchor?: [number, number];
 };
+type WmtsSourceOptions = {
+    style?: string;
+    format?: string;
+    version?: string;
+    layerName: string;
+    matrixSet?: string;
+};
 
 declare const emitter: Emitter<Record<EventType, any>>;
 
+declare const createWmtsLayer: (serverUrl: string) => (config: WmtsSourceOptions) => Promise<TileLayer>;
+
 /**
- * 创建杭州规资地图
+ * 创建杭州规自地图
  * @param isDark
  */
 declare const createBaseLayer: (isDark?: boolean) => Tile<XYZ>;
 /**
  * 创建天地图
  * @param layerName - 图层名称
- * @param className - className
  * @param tk - 天地图TK
  */
-declare const createMapWorldLayer: (layerName: string, className: string, tk?: string) => Tile<WMTS>;
+declare const createMapWorldLayer: (layerName: string, tk?: string) => Tile<WMTS>;
 
 declare let instance: CustomMap;
 declare const createMapInstance: (config?: {}) => CustomMap;
@@ -156,4 +165,4 @@ declare const addMassMarksLayer: (getImgUrlFn: GetImgUrlFn) => (dataList: never[
  */
 declare const updateMarksLayersByStatus: (checkedStatusList?: any[]) => void;
 
-export { type CustomMap, type GetImgUrl, type GetImgUrlFn, type IconConfig, type LayerConfig, type LineConfig, type MassData, type MassMarkersStyleOptions, type VectorConfig, activeMarkerByUid, addMassMarksLayer, buildMassMarksStyles, createAnimationMarker, createBaseLayer, createGeoJsonLayer, createMapInstance, createMapWorldLayer, createMassMarksLayer, createSelectByLayer, createVectorFaceLayer, createVectorLineLayer, disposeMap, emitter, getMapInstance, instance, removeAllLayers, resetActiveMarker, resetActiveVector, resetMap, resetZoomAndCenter, updateMarksLayersByStatus };
+export { type CustomMap, type GetImgUrl, type GetImgUrlFn, type IconConfig, type LayerConfig, type LineConfig, type MassData, type MassMarkersStyleOptions, type VectorConfig, type WmtsSourceOptions, activeMarkerByUid, addMassMarksLayer, buildMassMarksStyles, createAnimationMarker, createBaseLayer, createGeoJsonLayer, createMapInstance, createMapWorldLayer, createMassMarksLayer, createSelectByLayer, createVectorFaceLayer, createVectorLineLayer, createWmtsLayer, disposeMap, emitter, getMapInstance, instance, removeAllLayers, resetActiveMarker, resetActiveVector, resetMap, resetZoomAndCenter, updateMarksLayersByStatus };

package/dist/index.js

@@ -17,20 +17,90 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
 
 // src/emitter.ts
 import mitt from "mitt";
 var emitter = mitt();
 var emitter_default = emitter;
 
+// src/ogc-utils.ts
+import { WMTS } from "ol/source";
+import TileLayer from "ol/layer/Tile";
+import { WMTSCapabilities } from "ol/format";
+import { optionsFromCapabilities } from "ol/source/WMTS";
+var parser = new WMTSCapabilities();
+var capabilitiesMap = /* @__PURE__ */ new Map();
+var getCapabilities = (url) => {
+  return new Promise((resolve) => {
+    const capabilities = capabilitiesMap.get(url);
+    if (capabilities) {
+      resolve(capabilities);
+    } else {
+      fetch(url).then((data) => data.text()).then((text) => {
+        const capabilities2 = parser.read(text);
+        capabilitiesMap.set(url, capabilities2);
+        resolve(capabilities2);
+      });
+    }
+  });
+};
+var createWmtsLayer = (serverUrl) => (config) => __async(void 0, null, function* () {
+  const { style, format, version, layerName, matrixSet } = config;
+  const [workspace, datastore] = layerName.split(":");
+  const capabilitiesUrl = `${serverUrl}/${workspace}/${datastore}/gwc/service/wmts?request=GetCapabilities`;
+  return new Promise((resolve, reject) => {
+    getCapabilities(capabilitiesUrl).then((data) => {
+      const options = optionsFromCapabilities(data, {
+        Style: style || "",
+        layer: datastore,
+        version: version || "1.1.0",
+        format: format || "image/png",
+        matrixSet: matrixSet || "EPSG:4326"
+      });
+      console.log(options);
+      if (options) {
+        resolve(
+          new TileLayer({
+            zIndex: 3,
+            className: layerName,
+            source: new WMTS(options)
+          })
+        );
+      } else {
+        reject(new Error("Unable to create TileLayer"));
+      }
+    });
+  });
+});
+
 // src/base-layer.ts
 import { XYZ } from "ol/source";
-import { WMTS } from "ol/source";
+import { WMTS as WMTS2 } from "ol/source";
 import { TileGrid } from "ol/tilegrid";
 import { Tile } from "ol/layer";
 
 // src/create-map.ts
-import Map from "ol/Map";
+import Map2 from "ol/Map";
 import View from "ol/View";
 import { defaults } from "ol/control";
 
@@ -288,6 +358,7 @@ var createMassMarksLayer = (dataList, styleList = []) => {
     return feature;
   });
   const vectorLayer = new VectorLayer({
+    zIndex: 2e3,
     source: new VectorSource({
       features
     })
@@ -379,7 +450,7 @@ var createMapInstance = (config = {}) => {
   if (instance) {
     return instance;
   }
-  instance = new Map({
+  instance = new Map2({
     view: new View(innerConfig),
     controls: defaults({
       zoom: false,
@@ -450,13 +521,8 @@ var createBaseLayer = (isDark = true) => {
           26817861328125e-19,
           134089306640625e-20
         ],
-        origin: [118.122911693886, 31.2869311022836],
-        extent: [
-          118.340502132662,
-          29.2073269598186,
-          120.724787992425,
-          30.5617943760008
-        ]
+        origin: [118.125614083886, 31.2857011022836],
+        extent: [118.340502132662, 29.2073269598186, 120.724787992425, 30.5617943760008]
       }),
       projection: "EPSG:4326",
       urls: isDark ? [
@@ -478,13 +544,12 @@ var createBaseLayer = (isDark = true) => {
     }
   });
 };
-var createMapWorldLayer = (layerName, className, tk = "c77eddc667c5bed016fded560baf93e7") => {
+var createMapWorldLayer = (layerName, tk = "c77eddc667c5bed016fded560baf93e7") => {
   const [name, matrixSet] = layerName.split("_");
   return new Tile({
-    className,
     cacheSize: 20240,
     zIndex: -1,
-    source: new WMTS({
+    source: new WMTS2({
       crossOrigin: "anonymous",
       projection: "EPSG:4326",
       wrapX: true,
@@ -541,7 +606,8 @@ var createMapWorldLayer = (layerName, className, tk = "c77eddc667c5bed016fded560
       url: `https://t{0-7}.tianditu.gov.cn/${layerName}/wmts?tk=${tk}`
     }),
     properties: {
-      _isBaseLayer: true
+      _isBaseLayer: true,
+      _layerName: layerName
     }
   });
 };
@@ -571,6 +637,7 @@ export {
   createSelectByLayer,
   createVectorFaceLayer,
   createVectorLineLayer,
+  createWmtsLayer,
   disposeMap,
   emitter_default as emitter,
   getMapInstance,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "map-ol-utils",
-  "version": "0.0.19",
+  "version": "0.0.21",
   "type": "module",
   "description": "Openlayers utils library",
   "files": [
@@ -26,9 +26,12 @@
   ],
   "dependencies": {
     "ol": "^10.5.0",
-    "mitt": "^3.0.1"
+    "mitt": "^3.0.1",
+    "proj4": "^2.15.0"
+  },
+  "devDependencies": {
+    "@types/proj4": "^2.5.6"
   },
-  "devDependencies": {},
   "peerDependencies": {
     "ol": ">=10.5.0"
   },