map-ol-utils 0.0.20 → 0.0.22

package/dist/index.cjs

@@ -72,7 +72,7 @@ __export(index_exports, {
   buildMassMarksStyles: () => buildMassMarksStyles,
   createAnimationMarker: () => createAnimationMarker,
   createBaseLayer: () => createBaseLayer,
-  createGeoJsonLayer: () => createGeoJsonLayer,
+  createBusinessLayer: () => createBusinessLayer,
   createMapInstance: () => createMapInstance,
   createMapWorldLayer: () => createMapWorldLayer,
   createMassMarksLayer: () => createMassMarksLayer,
@@ -119,15 +119,18 @@ var getCapabilities = (url) => {
     }
   });
 };
-var createWmtsLayer = (serverUrl) => (layerName) => __async(void 0, null, function* () {
+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,
-        format: "image/png",
-        matrixSet: "EPSG:4326"
+        version: version || "1.1.0",
+        format: format || "image/png",
+        matrixSet: matrixSet || "EPSG:4326"
       });
       console.log(options);
       if (options) {
@@ -219,36 +222,40 @@ var assembleGeoJson = (dataList, config) => {
   });
   return { type: "FeatureCollection", features: tempList };
 };
-var createGeoJsonLayer = (dataList, config) => {
-  const { isLine, layerName } = config || {};
+var createVectorStyle = (data, config) => {
+  const { isLine, colorMap, fillColor, colorKey, strokeColor, strokeWeight } = config || {};
+  const style = new import_style.Style({
+    stroke: new import_style.Stroke({
+      width: strokeWeight,
+      color: colorKey ? (colorMap == null ? void 0 : colorMap.get(data[colorKey])) || strokeColor : strokeColor
+    })
+  });
+  if (!isLine) {
+    style.setFill(
+      new import_style.Fill({
+        color: colorKey ? (colorMap == null ? void 0 : colorMap.get(data[colorKey])) || fillColor : fillColor
+      })
+    );
+  }
+  return style;
+};
+var createBusinessLayer = (dataList, config) => {
+  const { layerName } = config || {};
   const geoJson = assembleGeoJson(dataList, config);
   const vectorLayer = new import_Vector.default({
     className: layerName ? layerName : "ol-layer",
     source: new import_Vector2.default({
-      features: new import_format2.GeoJSON().readFeatures(geoJson)
-    }),
-    style: isLine ? new import_style.Style({
-      stroke: new import_style.Stroke({
-        color: "red",
-        lineDash: [10],
-        width: 3
-      })
-    }) : new import_style.Style({
-      stroke: new import_style.Stroke({
-        color: "red",
-        lineDash: [10],
-        width: 3
-      }),
-      fill: new import_style.Fill({
-        color: "rgba(0, 0, 255, 0.1)"
+      features: new import_format2.GeoJSON().readFeatures(geoJson).map((feature) => {
+        feature.setStyle(createVectorStyle(feature.getProperties(), config));
+        return feature;
       })
     })
   });
   vectorLayer.set("_layerName", layerName);
   return vectorLayer;
 };
-var createVectorFaceLayer = (dataList = [], config) => createGeoJsonLayer(dataList, Object.assign(config, { isLine: false }));
-var createVectorLineLayer = (dataList = [], config) => createGeoJsonLayer(dataList, Object.assign(config, { isLine: true }));
+var createVectorFaceLayer = (dataList = [], config) => createBusinessLayer(dataList, Object.assign(config, { isLine: false }));
+var createVectorLineLayer = (dataList = [], config) => createBusinessLayer(dataList, Object.assign(config, { isLine: true }));
 var removeAllLayers = (isClearAll = true) => {
   removeOverlays();
   console.log(isClearAll);
@@ -419,7 +426,7 @@ var createMassMarksLayer = (dataList, styleList = []) => {
     _isCustom: true,
     _isMassMarksLayer: true,
     _statusNum: styleList.length / 2,
-    _dataList: dataList,
+    _dataList: [...dataList],
     _uuidSet: new Set(dataList.map((item) => item._uuid) || [])
   });
   return vectorLayer;
@@ -433,7 +440,8 @@ var addMassMarksLayer = (getImgUrlFn) => {
       isDynamic,
       statusNum,
       markerIcon,
-      markerSize
+      markerSize,
+      vectorConfig
     } = iconConfig;
     const massMarksStyles = buildMassMarksStyles(getImgUrlFn)({
       baseUrl,
@@ -447,7 +455,7 @@ var addMassMarksLayer = (getImgUrlFn) => {
       createSelectByLayer(massMarksLayer);
     }
     if (hasLine) {
-      const vectorLayer = createGeoJsonLayer(dataList, {
+      const vectorLayer = createBusinessLayer(dataList, vectorConfig ? vectorConfig : {
         key: "line",
         isLine: true,
         strokeColor: "rgba(29, 235, 255, 0.8)"
@@ -455,10 +463,9 @@ var addMassMarksLayer = (getImgUrlFn) => {
       instance.addLayer(vectorLayer);
     }
     if (hasFace) {
-      const vectorLayer = createGeoJsonLayer(dataList, {
+      const vectorLayer = createBusinessLayer(dataList, vectorConfig ? vectorConfig : {
         isLine: false,
         key: "faceList",
-        fillOpacity: 0.1,
         fillColor: "#4247DF",
         strokeWeight: 1,
         strokeStyle: "dashed",
@@ -683,7 +690,7 @@ var changeLayersByNames = (activeNames, allLayerNames) => {
   buildMassMarksStyles,
   createAnimationMarker,
   createBaseLayer,
-  createGeoJsonLayer,
+  createBusinessLayer,
   createMapInstance,
   createMapWorldLayer,
   createMassMarksLayer,

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { Map, Feature } from 'ol';
 import { Layer, Tile } from 'ol/layer';
+import { Map as Map$1, Feature } from 'ol';
 import { Source, XYZ, WMTS } from 'ol/source';
 import { Emitter, EventType } from 'mitt';
 import TileLayer from 'ol/layer/Tile';
@@ -10,7 +10,7 @@ import VectorLayer from 'ol/layer/Vector';
 import { StyleLike } from 'ol/style/Style';
 import VectorSource from 'ol/source/Vector';
 
-interface CustomMap extends Map {
+interface CustomMap extends Map$1 {
     activeBaseLayer?: string;
     changeBaseLayer?: () => void;
     removeLayerByName?: (name: string) => void;
@@ -19,53 +19,49 @@ interface CustomMap extends Map {
 }
 type GetImgUrl = (name: string, ext?: string) => string;
 type GetImgUrlFn = (baseUrl: string) => GetImgUrl;
-type LayerConfig = {
-    zIndex?: number;
-    visible?: boolean;
-    minZoom?: number;
-    maxZoom?: number;
-    layerName: string;
-};
 type VectorConfig = {
     key: string;
     zIndex?: number;
     isRaw?: boolean;
     isLine: boolean;
+    colorKey?: string;
     layerName?: string;
     openClick?: boolean;
     fillColor?: string;
-    fillOpacity?: number;
     strokeColor?: string;
     strokeStyle?: string;
     strokeWeight?: number;
-};
-type LineConfig = {
-    key: string;
-    width?: number;
-    isRaw?: boolean;
-    openClick?: boolean;
-    strokeColor?: string;
-    strokeStyle?: string;
-};
-type MassData = {
-    style: number;
-    _uuid?: string;
-    width?: number;
-    height?: number;
-    status?: number | string | undefined;
-    _status?: number | string | undefined;
-    lnglat: [string, string] | [number, number];
+    colorMap?: Map<string, string>;
 };
 type IconConfig = {
     baseUrl: string;
     hasLine?: boolean;
     hasFace?: boolean;
-    statusNum: number;
+    statusNum?: number;
     isDynamic?: boolean;
     markerIcon: string;
     activeScale?: number;
+    vectorConfig?: VectorConfig;
     markerSize: [number, number];
 };
+type MassData = {
+    _uuid?: string;
+    id: string;
+    style: number;
+    name: string;
+    status: string;
+    width?: number;
+    height?: number;
+    itemName: string;
+    rawData: {
+        [key: string]: any;
+    };
+    imgList: {
+        text: string;
+        icon: string;
+    }[];
+    lnglat: [string, string] | [number, number];
+};
 type MassMarkersStyleOptions = {
     url: string;
     zIndex?: number;
@@ -73,10 +69,17 @@ 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) => (layerName: string) => Promise<TileLayer>;
+declare const createWmtsLayer: (serverUrl: string) => (config: WmtsSourceOptions) => Promise<TileLayer>;
 
 /**
  * 创建杭州规自地图
@@ -105,7 +108,7 @@ declare const createAnimationMarker: (imgUrl: string, data: MassData) => void;
  * 重置激活的矢量数据
  */
 declare const resetActiveVector: () => void;
-declare const createGeoJsonLayer: (dataList: any, config: VectorConfig) => VectorLayer<VectorSource<Feature<ol_geom.Geometry>>, Feature<ol_geom.Geometry>>;
+declare const createBusinessLayer: (dataList: any, config: VectorConfig) => VectorLayer<VectorSource<Feature<ol_geom.Geometry>>, Feature<ol_geom.Geometry>>;
 /**
  * 创建面状数据
  * @param dataList
@@ -156,6 +159,6 @@ declare const addMassMarksLayer: (getImgUrlFn: GetImgUrlFn) => (dataList: never[
  * 更新图层根据选中状态列表
  * @param checkedStatusList
  */
-declare const updateMarksLayersByStatus: (checkedStatusList?: any[]) => void;
+declare const updateMarksLayersByStatus: (checkedStatusList?: string[]) => 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, createWmtsLayer, disposeMap, emitter, getMapInstance, instance, removeAllLayers, resetActiveMarker, resetActiveVector, resetMap, resetZoomAndCenter, updateMarksLayersByStatus };
+export { type CustomMap, type GetImgUrl, type GetImgUrlFn, type IconConfig, type MassData, type MassMarkersStyleOptions, type VectorConfig, type WmtsSourceOptions, activeMarkerByUid, addMassMarksLayer, buildMassMarksStyles, createAnimationMarker, createBaseLayer, createBusinessLayer, createMapInstance, createMapWorldLayer, createMassMarksLayer, createSelectByLayer, createVectorFaceLayer, createVectorLineLayer, createWmtsLayer, disposeMap, emitter, getMapInstance, instance, removeAllLayers, resetActiveMarker, resetActiveVector, resetMap, resetZoomAndCenter, updateMarksLayersByStatus };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { Map, Feature } from 'ol';
 import { Layer, Tile } from 'ol/layer';
+import { Map as Map$1, Feature } from 'ol';
 import { Source, XYZ, WMTS } from 'ol/source';
 import { Emitter, EventType } from 'mitt';
 import TileLayer from 'ol/layer/Tile';
@@ -10,7 +10,7 @@ import VectorLayer from 'ol/layer/Vector';
 import { StyleLike } from 'ol/style/Style';
 import VectorSource from 'ol/source/Vector';
 
-interface CustomMap extends Map {
+interface CustomMap extends Map$1 {
     activeBaseLayer?: string;
     changeBaseLayer?: () => void;
     removeLayerByName?: (name: string) => void;
@@ -19,53 +19,49 @@ interface CustomMap extends Map {
 }
 type GetImgUrl = (name: string, ext?: string) => string;
 type GetImgUrlFn = (baseUrl: string) => GetImgUrl;
-type LayerConfig = {
-    zIndex?: number;
-    visible?: boolean;
-    minZoom?: number;
-    maxZoom?: number;
-    layerName: string;
-};
 type VectorConfig = {
     key: string;
     zIndex?: number;
     isRaw?: boolean;
     isLine: boolean;
+    colorKey?: string;
     layerName?: string;
     openClick?: boolean;
     fillColor?: string;
-    fillOpacity?: number;
     strokeColor?: string;
     strokeStyle?: string;
     strokeWeight?: number;
-};
-type LineConfig = {
-    key: string;
-    width?: number;
-    isRaw?: boolean;
-    openClick?: boolean;
-    strokeColor?: string;
-    strokeStyle?: string;
-};
-type MassData = {
-    style: number;
-    _uuid?: string;
-    width?: number;
-    height?: number;
-    status?: number | string | undefined;
-    _status?: number | string | undefined;
-    lnglat: [string, string] | [number, number];
+    colorMap?: Map<string, string>;
 };
 type IconConfig = {
     baseUrl: string;
     hasLine?: boolean;
     hasFace?: boolean;
-    statusNum: number;
+    statusNum?: number;
     isDynamic?: boolean;
     markerIcon: string;
     activeScale?: number;
+    vectorConfig?: VectorConfig;
     markerSize: [number, number];
 };
+type MassData = {
+    _uuid?: string;
+    id: string;
+    style: number;
+    name: string;
+    status: string;
+    width?: number;
+    height?: number;
+    itemName: string;
+    rawData: {
+        [key: string]: any;
+    };
+    imgList: {
+        text: string;
+        icon: string;
+    }[];
+    lnglat: [string, string] | [number, number];
+};
 type MassMarkersStyleOptions = {
     url: string;
     zIndex?: number;
@@ -73,10 +69,17 @@ 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) => (layerName: string) => Promise<TileLayer>;
+declare const createWmtsLayer: (serverUrl: string) => (config: WmtsSourceOptions) => Promise<TileLayer>;
 
 /**
  * 创建杭州规自地图
@@ -105,7 +108,7 @@ declare const createAnimationMarker: (imgUrl: string, data: MassData) => void;
  * 重置激活的矢量数据
  */
 declare const resetActiveVector: () => void;
-declare const createGeoJsonLayer: (dataList: any, config: VectorConfig) => VectorLayer<VectorSource<Feature<ol_geom.Geometry>>, Feature<ol_geom.Geometry>>;
+declare const createBusinessLayer: (dataList: any, config: VectorConfig) => VectorLayer<VectorSource<Feature<ol_geom.Geometry>>, Feature<ol_geom.Geometry>>;
 /**
  * 创建面状数据
  * @param dataList
@@ -156,6 +159,6 @@ declare const addMassMarksLayer: (getImgUrlFn: GetImgUrlFn) => (dataList: never[
  * 更新图层根据选中状态列表
  * @param checkedStatusList
  */
-declare const updateMarksLayersByStatus: (checkedStatusList?: any[]) => void;
+declare const updateMarksLayersByStatus: (checkedStatusList?: string[]) => 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, createWmtsLayer, disposeMap, emitter, getMapInstance, instance, removeAllLayers, resetActiveMarker, resetActiveVector, resetMap, resetZoomAndCenter, updateMarksLayersByStatus };
+export { type CustomMap, type GetImgUrl, type GetImgUrlFn, type IconConfig, type MassData, type MassMarkersStyleOptions, type VectorConfig, type WmtsSourceOptions, activeMarkerByUid, addMassMarksLayer, buildMassMarksStyles, createAnimationMarker, createBaseLayer, createBusinessLayer, createMapInstance, createMapWorldLayer, createMassMarksLayer, createSelectByLayer, createVectorFaceLayer, createVectorLineLayer, createWmtsLayer, disposeMap, emitter, getMapInstance, instance, removeAllLayers, resetActiveMarker, resetActiveVector, resetMap, resetZoomAndCenter, updateMarksLayersByStatus };

package/dist/index.js

@@ -64,15 +64,18 @@ var getCapabilities = (url) => {
     }
   });
 };
-var createWmtsLayer = (serverUrl) => (layerName) => __async(void 0, null, function* () {
+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,
-        format: "image/png",
-        matrixSet: "EPSG:4326"
+        version: version || "1.1.0",
+        format: format || "image/png",
+        matrixSet: matrixSet || "EPSG:4326"
       });
       console.log(options);
       if (options) {
@@ -164,36 +167,40 @@ var assembleGeoJson = (dataList, config) => {
   });
   return { type: "FeatureCollection", features: tempList };
 };
-var createGeoJsonLayer = (dataList, config) => {
-  const { isLine, layerName } = config || {};
+var createVectorStyle = (data, config) => {
+  const { isLine, colorMap, fillColor, colorKey, strokeColor, strokeWeight } = config || {};
+  const style = new Style({
+    stroke: new Stroke({
+      width: strokeWeight,
+      color: colorKey ? (colorMap == null ? void 0 : colorMap.get(data[colorKey])) || strokeColor : strokeColor
+    })
+  });
+  if (!isLine) {
+    style.setFill(
+      new Fill({
+        color: colorKey ? (colorMap == null ? void 0 : colorMap.get(data[colorKey])) || fillColor : fillColor
+      })
+    );
+  }
+  return style;
+};
+var createBusinessLayer = (dataList, config) => {
+  const { layerName } = config || {};
   const geoJson = assembleGeoJson(dataList, config);
   const vectorLayer = new VectorLayer({
     className: layerName ? layerName : "ol-layer",
     source: new VectorSource({
-      features: new GeoJSON().readFeatures(geoJson)
-    }),
-    style: isLine ? new Style({
-      stroke: new Stroke({
-        color: "red",
-        lineDash: [10],
-        width: 3
-      })
-    }) : new Style({
-      stroke: new Stroke({
-        color: "red",
-        lineDash: [10],
-        width: 3
-      }),
-      fill: new Fill({
-        color: "rgba(0, 0, 255, 0.1)"
+      features: new GeoJSON().readFeatures(geoJson).map((feature) => {
+        feature.setStyle(createVectorStyle(feature.getProperties(), config));
+        return feature;
       })
     })
   });
   vectorLayer.set("_layerName", layerName);
   return vectorLayer;
 };
-var createVectorFaceLayer = (dataList = [], config) => createGeoJsonLayer(dataList, Object.assign(config, { isLine: false }));
-var createVectorLineLayer = (dataList = [], config) => createGeoJsonLayer(dataList, Object.assign(config, { isLine: true }));
+var createVectorFaceLayer = (dataList = [], config) => createBusinessLayer(dataList, Object.assign(config, { isLine: false }));
+var createVectorLineLayer = (dataList = [], config) => createBusinessLayer(dataList, Object.assign(config, { isLine: true }));
 var removeAllLayers = (isClearAll = true) => {
   removeOverlays();
   console.log(isClearAll);
@@ -364,7 +371,7 @@ var createMassMarksLayer = (dataList, styleList = []) => {
     _isCustom: true,
     _isMassMarksLayer: true,
     _statusNum: styleList.length / 2,
-    _dataList: dataList,
+    _dataList: [...dataList],
     _uuidSet: new Set(dataList.map((item) => item._uuid) || [])
   });
   return vectorLayer;
@@ -378,7 +385,8 @@ var addMassMarksLayer = (getImgUrlFn) => {
       isDynamic,
       statusNum,
       markerIcon,
-      markerSize
+      markerSize,
+      vectorConfig
     } = iconConfig;
     const massMarksStyles = buildMassMarksStyles(getImgUrlFn)({
       baseUrl,
@@ -392,7 +400,7 @@ var addMassMarksLayer = (getImgUrlFn) => {
       createSelectByLayer(massMarksLayer);
     }
     if (hasLine) {
-      const vectorLayer = createGeoJsonLayer(dataList, {
+      const vectorLayer = createBusinessLayer(dataList, vectorConfig ? vectorConfig : {
         key: "line",
         isLine: true,
         strokeColor: "rgba(29, 235, 255, 0.8)"
@@ -400,10 +408,9 @@ var addMassMarksLayer = (getImgUrlFn) => {
       instance.addLayer(vectorLayer);
     }
     if (hasFace) {
-      const vectorLayer = createGeoJsonLayer(dataList, {
+      const vectorLayer = createBusinessLayer(dataList, vectorConfig ? vectorConfig : {
         isLine: false,
         key: "faceList",
-        fillOpacity: 0.1,
         fillColor: "#4247DF",
         strokeWeight: 1,
         strokeStyle: "dashed",
@@ -627,7 +634,7 @@ export {
   buildMassMarksStyles,
   createAnimationMarker,
   createBaseLayer,
-  createGeoJsonLayer,
+  createBusinessLayer,
   createMapInstance,
   createMapWorldLayer,
   createMassMarksLayer,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "map-ol-utils",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "type": "module",
   "description": "Openlayers utils library",
   "files": [