@summeruse/ol 0.3.1 → 0.3.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @summeruse/ol
 
+## 0.3.2
+
+### Patch Changes
+
+- 92af465: refactor(ol-map): 添加组件名称定义以提升可维护性
+- 432f073: feat(图层工具): 添加 WebGL 矢量图层支持并重构矢量图层创建逻辑
+
 ## 0.3.1
 
 ### Patch Changes

package/dist/index.js

@@ -8,6 +8,7 @@ import VectorLayer from "ol/layer/Vector";
 import VectorSource from "ol/source/Vector";
 import { Circle as Circle$1, Fill, Icon, Stroke, Style, Text } from "ol/style";
 import { Graticule, Tile } from "ol/layer";
+import WebGLVectorLayer from "ol/layer/WebGLVector";
 import { BingMaps, OSM, XYZ } from "ol/source";
 import { transform, transformExtent } from "ol/proj";
 const olMapInjectionKey = Symbol("olMapInjectionKey");
@@ -15,6 +16,7 @@ function useOlMap() {
 	return inject(olMapInjectionKey);
 }
 var ol_map_default = /* @__PURE__ */ defineComponent({
+	name: "OlMap",
 	__name: "index",
 	props: {
 		olMap: { default: () => new Map() },
@@ -382,14 +384,28 @@ function createOpenStreetMapLayer(r) {
 		...l
 	});
 }
+function createVectorSource(r) {
+	return new VectorSource({ ...r });
+}
 function createVectorLayer(r) {
-	let { styleOptions: l,...u } = r || {}, d = l ? createStyle(l) : void 0, f = new VectorSource();
+	let { styleOptions: l, sourceOptions: u,...d } = r || {}, f = l ? createStyle(l) : void 0, p = createVectorSource(u);
 	return {
-		source: f,
+		source: p,
 		layer: new VectorLayer({
+			source: p,
+			...d,
+			style: f || d.style
+		})
+	};
+}
+function createWebGLVectorLayer(r) {
+	let { style: l, sourceOptions: u,...d } = r, f = createVectorSource(u);
+	return {
+		source: f,
+		layer: new WebGLVectorLayer({
 			source: f,
-			...u,
-			style: d || u.style
+			...d,
+			style: l
 		})
 	};
 }
@@ -722,4 +738,4 @@ function useSwitchBaseLayer(r) {
 		});
 	}, { immediate: !0 }), { visibleLayerName: l };
 }
-export { EPSG_3857, EPSG_3857ExtentToEPSG_4326, EPSG_3857ToEPSG_4326, EPSG_4326, EPSG_4326ExtentToEPSG_3857, EPSG_4326ToEPSG_3857, ONE_NM, ol_map_default as OlMap, WGS84Projection, WebMercatorProjection, createBingLayer, createCircle, createCircleFeature, createCircleStyle, createFeature, createLineString, createLineStringFeature, createMultiLineString, createMultiLineStringFeature, createMultiPoint, createMultiPointFeature, createMultiPolygon, createMultiPolygonFeature, createOpenStreetMapLayer, createPoint, createPointFeature, createPolygon, createPolygonFeature, createStyle, createTextStyle, createTianDiTuLayer, createTianDiTuUrl, createVectorLayer, formatAngle, formatRotation, kmToNauticalMiles, mercatorExtentToWgs84, mercatorToWgs84, nauticalMilesToKm, olMapInjectionKey, useContextmenu, useDrawLineString, useDrawPolygon, useGraticule, useOlMap, usePointermove, useSwitchBaseLayer, wgs84ExtentToMercator, wgs84ToMercator };
+export { EPSG_3857, EPSG_3857ExtentToEPSG_4326, EPSG_3857ToEPSG_4326, EPSG_4326, EPSG_4326ExtentToEPSG_3857, EPSG_4326ToEPSG_3857, ONE_NM, ol_map_default as OlMap, WGS84Projection, WebMercatorProjection, createBingLayer, createCircle, createCircleFeature, createCircleStyle, createFeature, createLineString, createLineStringFeature, createMultiLineString, createMultiLineStringFeature, createMultiPoint, createMultiPointFeature, createMultiPolygon, createMultiPolygonFeature, createOpenStreetMapLayer, createPoint, createPointFeature, createPolygon, createPolygonFeature, createStyle, createTextStyle, createTianDiTuLayer, createTianDiTuUrl, createVectorLayer, createVectorSource, createWebGLVectorLayer, formatAngle, formatRotation, kmToNauticalMiles, mercatorExtentToWgs84, mercatorToWgs84, nauticalMilesToKm, olMapInjectionKey, useContextmenu, useDrawLineString, useDrawPolygon, useGraticule, useOlMap, usePointermove, useSwitchBaseLayer, wgs84ExtentToMercator, wgs84ToMercator };

package/es/components/ol-map/index.vue_vue_type_script_setup_true_lang.mjs

@@ -4,6 +4,7 @@ import { Map, View } from "ol";
 import { Attribution, FullScreen, OverviewMap, Rotate, ScaleLine, Zoom } from "ol/control";
 import { DoubleClickZoom, DragPan, DragRotate, KeyboardPan, KeyboardZoom, MouseWheelZoom, PinchRotate, PinchZoom } from "ol/interaction";
 var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "OlMap",
 	__name: "index",
 	props: {
 		olMap: { default: () => new Map() },

package/es/index.mjs

@@ -7,7 +7,7 @@ import { EPSG_3857, EPSG_4326, WGS84Projection, WebMercatorProjection } from "./
 import { formatAngle, formatRotation, kmToNauticalMiles, nauticalMilesToKm } from "./utils/distance/index.mjs";
 import { createCircleStyle, createStyle, createTextStyle } from "./utils/style/index.mjs";
 import { createCircle, createCircleFeature, createFeature, createLineString, createLineStringFeature, createMultiLineString, createMultiLineStringFeature, createMultiPoint, createMultiPointFeature, createMultiPolygon, createMultiPolygonFeature, createPoint, createPointFeature, createPolygon, createPolygonFeature } from "./utils/feature/index.mjs";
-import { createBingLayer, createOpenStreetMapLayer, createTianDiTuLayer, createTianDiTuUrl, createVectorLayer } from "./utils/layer/index.mjs";
+import { createBingLayer, createOpenStreetMapLayer, createTianDiTuLayer, createTianDiTuUrl, createVectorLayer, createVectorSource, createWebGLVectorLayer } from "./utils/layer/index.mjs";
 import { EPSG_3857ExtentToEPSG_4326, EPSG_3857ToEPSG_4326, EPSG_4326ExtentToEPSG_3857, EPSG_4326ToEPSG_3857, mercatorExtentToWgs84, mercatorToWgs84, wgs84ExtentToMercator, wgs84ToMercator } from "./utils/projection/index.mjs";
 import "./utils/index.mjs";
 import { useDrawLineString } from "./composables/useDrawLineString/index.mjs";
@@ -16,4 +16,4 @@ import { useGraticule } from "./composables/useGraticule/index.mjs";
 import { usePointermove } from "./composables/usePointermove/index.mjs";
 import { useSwitchBaseLayer } from "./composables/useSwitchBaseLayer/index.mjs";
 import "./composables/index.mjs";
-export { EPSG_3857, EPSG_3857ExtentToEPSG_4326, EPSG_3857ToEPSG_4326, EPSG_4326, EPSG_4326ExtentToEPSG_3857, EPSG_4326ToEPSG_3857, ONE_NM, ol_map_default as OlMap, WGS84Projection, WebMercatorProjection, createBingLayer, createCircle, createCircleFeature, createCircleStyle, createFeature, createLineString, createLineStringFeature, createMultiLineString, createMultiLineStringFeature, createMultiPoint, createMultiPointFeature, createMultiPolygon, createMultiPolygonFeature, createOpenStreetMapLayer, createPoint, createPointFeature, createPolygon, createPolygonFeature, createStyle, createTextStyle, createTianDiTuLayer, createTianDiTuUrl, createVectorLayer, formatAngle, formatRotation, kmToNauticalMiles, mercatorExtentToWgs84, mercatorToWgs84, nauticalMilesToKm, olMapInjectionKey, useContextmenu, useDrawLineString, useDrawPolygon, useGraticule, useOlMap, usePointermove, useSwitchBaseLayer, wgs84ExtentToMercator, wgs84ToMercator };
+export { EPSG_3857, EPSG_3857ExtentToEPSG_4326, EPSG_3857ToEPSG_4326, EPSG_4326, EPSG_4326ExtentToEPSG_3857, EPSG_4326ToEPSG_3857, ONE_NM, ol_map_default as OlMap, WGS84Projection, WebMercatorProjection, createBingLayer, createCircle, createCircleFeature, createCircleStyle, createFeature, createLineString, createLineStringFeature, createMultiLineString, createMultiLineStringFeature, createMultiPoint, createMultiPointFeature, createMultiPolygon, createMultiPolygonFeature, createOpenStreetMapLayer, createPoint, createPointFeature, createPolygon, createPolygonFeature, createStyle, createTextStyle, createTianDiTuLayer, createTianDiTuUrl, createVectorLayer, createVectorSource, createWebGLVectorLayer, formatAngle, formatRotation, kmToNauticalMiles, mercatorExtentToWgs84, mercatorToWgs84, nauticalMilesToKm, olMapInjectionKey, useContextmenu, useDrawLineString, useDrawPolygon, useGraticule, useOlMap, usePointermove, useSwitchBaseLayer, wgs84ExtentToMercator, wgs84ToMercator };

package/es/utils/index.mjs

@@ -1,5 +1,5 @@
 import { formatAngle, formatRotation, kmToNauticalMiles, nauticalMilesToKm } from "./distance/index.mjs";
 import { createCircleStyle, createStyle, createTextStyle } from "./style/index.mjs";
 import { createCircle, createCircleFeature, createFeature, createLineString, createLineStringFeature, createMultiLineString, createMultiLineStringFeature, createMultiPoint, createMultiPointFeature, createMultiPolygon, createMultiPolygonFeature, createPoint, createPointFeature, createPolygon, createPolygonFeature } from "./feature/index.mjs";
-import { createBingLayer, createOpenStreetMapLayer, createTianDiTuLayer, createTianDiTuUrl, createVectorLayer } from "./layer/index.mjs";
+import { createBingLayer, createOpenStreetMapLayer, createTianDiTuLayer, createTianDiTuUrl, createVectorLayer, createVectorSource, createWebGLVectorLayer } from "./layer/index.mjs";
 import { EPSG_3857ExtentToEPSG_4326, EPSG_3857ToEPSG_4326, EPSG_4326ExtentToEPSG_3857, EPSG_4326ToEPSG_3857, mercatorExtentToWgs84, mercatorToWgs84, wgs84ExtentToMercator, wgs84ToMercator } from "./projection/index.mjs";

package/es/utils/layer/index.d.ts

@@ -2,8 +2,10 @@ import { StyleOptions } from '../style';
 import { Feature } from 'ol';
 import { Geometry } from 'ol/geom';
 import { ProjectionLike } from 'ol/proj';
+import { FlatStyleLike } from 'ol/style/flat';
 import { Tile as TileLayer } from 'ol/layer';
 import { default as VectorLayer } from 'ol/layer/Vector';
+import { default as WebGLVectorLayer } from 'ol/layer/WebGLVector';
 import { BingMaps, OSM, XYZ } from 'ol/source';
 import { default as VectorSource } from 'ol/source/Vector';
 export type T_MAP_TYPE = 'vec' | 'cva' | 'img' | 'cia' | 'ter' | 'cta' | 'ibo';
@@ -35,11 +37,24 @@ export interface CreateOpenStreetMapLayerOptions {
     sourceOptions?: BingMapsSourceOptions;
 }
 export declare function createOpenStreetMapLayer(data?: CreateOpenStreetMapLayerOptions): TileLayer<import('ol/source').Tile<import('ol').Tile>>;
-export type _VectorLayerOptions = ConstructorParameters<typeof VectorLayer>[0];
-export type VectorLayerOptions = _VectorLayerOptions & {
+export type _VectorSourceOptions<T extends Geometry = Geometry> = ConstructorParameters<typeof VectorSource<Feature<T>>>[0];
+export type VectorSourceOptions<T extends Geometry = Geometry> = _VectorSourceOptions<T>;
+export declare function createVectorSource<T extends Geometry = Geometry>(options?: VectorSourceOptions<T>): VectorSource<Feature<T>>;
+export type _VectorLayerOptions<T extends Geometry = Geometry> = ConstructorParameters<typeof VectorLayer<VectorSource<Feature<T>>>>[0];
+export type VectorLayerOptions<T extends Geometry = Geometry> = _VectorLayerOptions<T> & {
     styleOptions?: StyleOptions;
+    sourceOptions?: VectorSourceOptions<T>;
 };
-export declare function createVectorLayer<T extends Geometry = Geometry>(options?: VectorLayerOptions): {
+export declare function createVectorLayer<T extends Geometry = Geometry>(options?: VectorLayerOptions<T>): {
     source: VectorSource<Feature<T>>;
-    layer: VectorLayer<VectorSource<import('ol/Feature').FeatureLike>, import('ol/Feature').FeatureLike>;
+    layer: VectorLayer<VectorSource<Feature<T>>, Feature<T>>;
+};
+export type _WebGLVectorLayerOptions<T extends Geometry = Geometry> = ConstructorParameters<typeof WebGLVectorLayer<VectorSource<Feature<T>>>>[0];
+export type WebGLVectorLayerOptions<T extends Geometry = Geometry> = _WebGLVectorLayerOptions<T> & {
+    style: FlatStyleLike;
+    sourceOptions?: VectorSourceOptions<T>;
+};
+export declare function createWebGLVectorLayer<T extends Geometry = Geometry>(options: WebGLVectorLayerOptions<T>): {
+    source: VectorSource<Feature<T>>;
+    layer: WebGLVectorLayer<VectorSource<Feature<T>>, Feature<T>>;
 };

package/es/utils/layer/index.mjs

@@ -3,53 +3,68 @@ import { createStyle } from "../style/index.mjs";
 import VectorLayer from "ol/layer/Vector";
 import VectorSource from "ol/source/Vector";
 import { Tile } from "ol/layer";
+import WebGLVectorLayer from "ol/layer/WebGLVector";
 import { BingMaps, OSM, XYZ } from "ol/source";
 function createTianDiTuUrl(e) {
-	let { type: c = "img", projection: l = WebMercatorProjection, key: u } = e, d = e.url || "https://t{0-4}.tianditu.gov.cn", f = `&tk=${u}&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}`;
-	return `${d}/${c}_${l === "EPSG:4326" ? "c" : l === "EPSG:3857" ? "w" : "c"}/wmts?LAYER=${c}${f}`;
+	let { type: d = "img", projection: f = WebMercatorProjection, key: p } = e, m = e.url || "https://t{0-4}.tianditu.gov.cn", h = `&tk=${p}&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}`;
+	return `${m}/${d}_${f === "EPSG:4326" ? "c" : f === "EPSG:3857" ? "w" : "c"}/wmts?LAYER=${d}${h}`;
 }
 function createTianDiTuLayer(e) {
-	let { layerOptions: s, sourceOptions: c,...l } = e;
+	let { layerOptions: u, sourceOptions: d,...f } = e;
 	return new Tile({
 		source: new XYZ({
-			url: createTianDiTuUrl(l),
-			projection: l.projection,
+			url: createTianDiTuUrl(f),
+			projection: f.projection,
 			crossOrigin: "Anonymous",
-			...c
+			...d
 		}),
-		...s
+		...u
 	});
 }
-function createBingLayer({ name: e, key: s, layerOptions: c, sourceOptions: l }) {
+function createBingLayer({ name: e, key: u, layerOptions: d, sourceOptions: f }) {
 	return new Tile({
 		source: new BingMaps({
-			key: s,
+			key: u,
 			imagerySet: e,
 			placeholderTiles: !1,
-			...l
+			...f
 		}),
-		...c
+		...d
 	});
 }
 function createOpenStreetMapLayer(e) {
-	let { layerOptions: s, sourceOptions: c } = e || {};
+	let { layerOptions: u, sourceOptions: d } = e || {};
 	return new Tile({
 		source: new OSM({
 			crossOrigin: "Anonymous",
-			...c
+			...d
 		}),
-		...s
+		...u
 	});
 }
+function createVectorSource(e) {
+	return new VectorSource({ ...e });
+}
 function createVectorLayer(e) {
-	let { styleOptions: s,...d } = e || {}, f = s ? createStyle(s) : void 0, p = new VectorSource();
+	let { styleOptions: u, sourceOptions: p,...m } = e || {}, h = u ? createStyle(u) : void 0, g = createVectorSource(p);
 	return {
-		source: p,
+		source: g,
 		layer: new VectorLayer({
+			source: g,
+			...m,
+			style: h || m.style
+		})
+	};
+}
+function createWebGLVectorLayer(e) {
+	let { style: u, sourceOptions: d,...f } = e, p = createVectorSource(d);
+	return {
+		source: p,
+		layer: new WebGLVectorLayer({
 			source: p,
-			...d,
-			style: f || d.style
+			...f,
+			style: u
 		})
 	};
 }
-export { createBingLayer, createOpenStreetMapLayer, createTianDiTuLayer, createTianDiTuUrl, createVectorLayer };
+export { createBingLayer, createOpenStreetMapLayer, createTianDiTuLayer, createTianDiTuUrl, createVectorLayer, createVectorSource, createWebGLVectorLayer };

package/lib/components/ol-map/index.vue_vue_type_script_setup_true_lang.js

@@ -1 +1 @@
-const e=require(`../../_virtual/rolldown_runtime.js`),t=require(`./props.js`);let n=require(`vue`);n=e.__toESM(n);let r=require(`ol`);r=e.__toESM(r);let i=require(`ol/control`);i=e.__toESM(i);let a=require(`ol/interaction`);a=e.__toESM(a);var o=(0,n.defineComponent)({__name:`index`,props:{olMap:{default:()=>new r.Map},center:{default:()=>[0,0]},zoom:{default:2},minZoom:{default:2},maxZoom:{default:18},constrainResolution:{type:Boolean,default:!0},projection:{},extent:{},showZoom:{type:Boolean,default:!1},showAttribution:{type:Boolean,default:!1},showRotate:{type:Boolean,default:!1},showFullScreen:{type:Boolean,default:!1},showOverview:{type:Boolean,default:!1},showScale:{type:Boolean,default:!1},dragPan:{type:Boolean,default:!0},mouseWheelZoom:{type:Boolean,default:!0},doubleClickZoom:{type:Boolean,default:!1},pinchRotate:{type:Boolean},pinchZoom:{type:Boolean},altShiftDragRotate:{type:Boolean}},emits:[`update:zoom`,`update:center`,`changeResolution`,`changeCenter`,`moveend`,`movestart`],setup(e,{expose:o,emit:s}){let c=e,l=s,u=(0,n.ref)(),d=c.olMap,f=new r.View({projection:c.projection,extent:c.extent});d.setView(f),f.setZoom(c.zoom),f.setCenter(c.center),(0,n.watch)(()=>c.constrainResolution,e=>{f.setConstrainResolution(e)},{immediate:!0}),(0,n.watch)(()=>c.minZoom,e=>{e&&f.setMinZoom(e)},{immediate:!0}),(0,n.watch)(()=>c.maxZoom,e=>{e&&f.setMaxZoom(e)},{immediate:!0}),(0,n.watch)(u,e=>{e&&d.setTarget(e)}),o({olMap:d}),(0,n.provide)(t.olMapInjectionKey,d);let p=d.getControls().getArray(),m=p.find(e=>e instanceof i.Zoom)||new i.Zoom,h=p.find(e=>e instanceof i.Attribution)||new i.Attribution,g=p.find(e=>e instanceof i.Rotate)||new i.Rotate,_=p.find(e=>e instanceof i.FullScreen)||new i.FullScreen,v=p.find(e=>e instanceof i.OverviewMap)||new i.OverviewMap,y=p.find(e=>e instanceof i.ScaleLine)||new i.ScaleLine;(0,n.watch)(()=>c.showZoom,e=>{m.setMap(e?d:null)},{immediate:!0}),(0,n.watch)(()=>c.showAttribution,e=>{h.setMap(e?d:null)},{immediate:!0}),(0,n.watch)(()=>c.showRotate,e=>{g.setMap(e?d:null)},{immediate:!0}),(0,n.watch)(()=>c.showFullScreen,e=>{_.setMap(e?d:null)},{immediate:!0}),(0,n.watch)(()=>c.showOverview,e=>{v.setMap(e?d:null)},{immediate:!0}),(0,n.watch)(()=>c.showScale,e=>{y.setMap(e?d:null)},{immediate:!0});let b=d.getInteractions().getArray(),x=b.find(e=>e instanceof a.DragPan)||new a.DragPan,S=b.find(e=>e instanceof a.MouseWheelZoom)||new a.MouseWheelZoom,C=b.find(e=>e instanceof a.DoubleClickZoom)||new a.DoubleClickZoom,w=b.find(e=>e instanceof a.PinchRotate)||new a.PinchRotate,T=b.find(e=>e instanceof a.PinchZoom)||new a.PinchZoom,E=b.find(e=>e instanceof a.DragRotate)||new a.DragRotate,D=b.find(e=>e instanceof a.KeyboardPan)||new a.KeyboardPan,O=b.find(e=>e instanceof a.KeyboardZoom)||new a.KeyboardZoom;d.removeInteraction(x),d.addInteraction(x),d.removeInteraction(S),d.addInteraction(S),d.removeInteraction(C),d.addInteraction(C),d.removeInteraction(w),d.addInteraction(w),d.removeInteraction(T),d.addInteraction(T),d.removeInteraction(E),d.addInteraction(E),d.removeInteraction(D),d.removeInteraction(O),(0,n.watch)(()=>c.dragPan,e=>{x.setActive(e)},{immediate:!0}),(0,n.watch)(()=>c.mouseWheelZoom,e=>{S.setActive(e)},{immediate:!0}),(0,n.watch)(()=>c.doubleClickZoom,e=>{C.setActive(e)},{immediate:!0}),(0,n.watch)(()=>c.pinchRotate,e=>{w.setActive(e)},{immediate:!0}),(0,n.watch)(()=>c.pinchZoom,e=>{T.setActive(e)},{immediate:!0}),(0,n.watch)(()=>c.altShiftDragRotate,e=>{E.setActive(e)},{immediate:!0});function k(e){l(`update:zoom`,Math.floor(f.getZoom()||0)),l(`changeResolution`,e)}(0,n.onMounted)(()=>{f.on(`change:resolution`,k)}),(0,n.onUnmounted)(()=>{f.un(`change:resolution`,k)});function A(e){l(`update:center`,f.getCenter()||[0,0]),l(`changeCenter`,e)}(0,n.onMounted)(()=>{f.on(`change:center`,A)}),(0,n.onUnmounted)(()=>{f.un(`change:center`,A)});function j(e){l(`movestart`,e)}(0,n.onMounted)(()=>{d.on(`movestart`,j)}),(0,n.onUnmounted)(()=>{d.un(`movestart`,j)});function M(e){l(`moveend`,e)}return(0,n.onMounted)(()=>{d.on(`moveend`,M)}),(0,n.onUnmounted)(()=>{d.un(`moveend`,M)}),(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{ref_key:`mapRef`,ref:u},[(0,n.renderSlot)(e.$slots,`default`,{olMap:(0,n.unref)(d),mapRef:u.value})],512))}});exports.default=o;
+const e=require(`../../_virtual/rolldown_runtime.js`),t=require(`./props.js`);let n=require(`vue`);n=e.__toESM(n);let r=require(`ol`);r=e.__toESM(r);let i=require(`ol/control`);i=e.__toESM(i);let a=require(`ol/interaction`);a=e.__toESM(a);var o=(0,n.defineComponent)({name:`OlMap`,__name:`index`,props:{olMap:{default:()=>new r.Map},center:{default:()=>[0,0]},zoom:{default:2},minZoom:{default:2},maxZoom:{default:18},constrainResolution:{type:Boolean,default:!0},projection:{},extent:{},showZoom:{type:Boolean,default:!1},showAttribution:{type:Boolean,default:!1},showRotate:{type:Boolean,default:!1},showFullScreen:{type:Boolean,default:!1},showOverview:{type:Boolean,default:!1},showScale:{type:Boolean,default:!1},dragPan:{type:Boolean,default:!0},mouseWheelZoom:{type:Boolean,default:!0},doubleClickZoom:{type:Boolean,default:!1},pinchRotate:{type:Boolean},pinchZoom:{type:Boolean},altShiftDragRotate:{type:Boolean}},emits:[`update:zoom`,`update:center`,`changeResolution`,`changeCenter`,`moveend`,`movestart`],setup(e,{expose:o,emit:s}){let c=e,l=s,u=(0,n.ref)(),d=c.olMap,f=new r.View({projection:c.projection,extent:c.extent});d.setView(f),f.setZoom(c.zoom),f.setCenter(c.center),(0,n.watch)(()=>c.constrainResolution,e=>{f.setConstrainResolution(e)},{immediate:!0}),(0,n.watch)(()=>c.minZoom,e=>{e&&f.setMinZoom(e)},{immediate:!0}),(0,n.watch)(()=>c.maxZoom,e=>{e&&f.setMaxZoom(e)},{immediate:!0}),(0,n.watch)(u,e=>{e&&d.setTarget(e)}),o({olMap:d}),(0,n.provide)(t.olMapInjectionKey,d);let p=d.getControls().getArray(),m=p.find(e=>e instanceof i.Zoom)||new i.Zoom,h=p.find(e=>e instanceof i.Attribution)||new i.Attribution,g=p.find(e=>e instanceof i.Rotate)||new i.Rotate,_=p.find(e=>e instanceof i.FullScreen)||new i.FullScreen,v=p.find(e=>e instanceof i.OverviewMap)||new i.OverviewMap,y=p.find(e=>e instanceof i.ScaleLine)||new i.ScaleLine;(0,n.watch)(()=>c.showZoom,e=>{m.setMap(e?d:null)},{immediate:!0}),(0,n.watch)(()=>c.showAttribution,e=>{h.setMap(e?d:null)},{immediate:!0}),(0,n.watch)(()=>c.showRotate,e=>{g.setMap(e?d:null)},{immediate:!0}),(0,n.watch)(()=>c.showFullScreen,e=>{_.setMap(e?d:null)},{immediate:!0}),(0,n.watch)(()=>c.showOverview,e=>{v.setMap(e?d:null)},{immediate:!0}),(0,n.watch)(()=>c.showScale,e=>{y.setMap(e?d:null)},{immediate:!0});let b=d.getInteractions().getArray(),x=b.find(e=>e instanceof a.DragPan)||new a.DragPan,S=b.find(e=>e instanceof a.MouseWheelZoom)||new a.MouseWheelZoom,C=b.find(e=>e instanceof a.DoubleClickZoom)||new a.DoubleClickZoom,w=b.find(e=>e instanceof a.PinchRotate)||new a.PinchRotate,T=b.find(e=>e instanceof a.PinchZoom)||new a.PinchZoom,E=b.find(e=>e instanceof a.DragRotate)||new a.DragRotate,D=b.find(e=>e instanceof a.KeyboardPan)||new a.KeyboardPan,O=b.find(e=>e instanceof a.KeyboardZoom)||new a.KeyboardZoom;d.removeInteraction(x),d.addInteraction(x),d.removeInteraction(S),d.addInteraction(S),d.removeInteraction(C),d.addInteraction(C),d.removeInteraction(w),d.addInteraction(w),d.removeInteraction(T),d.addInteraction(T),d.removeInteraction(E),d.addInteraction(E),d.removeInteraction(D),d.removeInteraction(O),(0,n.watch)(()=>c.dragPan,e=>{x.setActive(e)},{immediate:!0}),(0,n.watch)(()=>c.mouseWheelZoom,e=>{S.setActive(e)},{immediate:!0}),(0,n.watch)(()=>c.doubleClickZoom,e=>{C.setActive(e)},{immediate:!0}),(0,n.watch)(()=>c.pinchRotate,e=>{w.setActive(e)},{immediate:!0}),(0,n.watch)(()=>c.pinchZoom,e=>{T.setActive(e)},{immediate:!0}),(0,n.watch)(()=>c.altShiftDragRotate,e=>{E.setActive(e)},{immediate:!0});function k(e){l(`update:zoom`,Math.floor(f.getZoom()||0)),l(`changeResolution`,e)}(0,n.onMounted)(()=>{f.on(`change:resolution`,k)}),(0,n.onUnmounted)(()=>{f.un(`change:resolution`,k)});function A(e){l(`update:center`,f.getCenter()||[0,0]),l(`changeCenter`,e)}(0,n.onMounted)(()=>{f.on(`change:center`,A)}),(0,n.onUnmounted)(()=>{f.un(`change:center`,A)});function j(e){l(`movestart`,e)}(0,n.onMounted)(()=>{d.on(`movestart`,j)}),(0,n.onUnmounted)(()=>{d.un(`movestart`,j)});function M(e){l(`moveend`,e)}return(0,n.onMounted)(()=>{d.on(`moveend`,M)}),(0,n.onUnmounted)(()=>{d.un(`moveend`,M)}),(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{ref_key:`mapRef`,ref:u},[(0,n.renderSlot)(e.$slots,`default`,{olMap:(0,n.unref)(d),mapRef:u.value})],512))}});exports.default=o;

package/lib/index.js

@@ -1 +1 @@
-const e=require(`./components/ol-map/props.js`),t=require(`./components/ol-map/index.js`);require(`./components/index.js`);const n=require(`./composables/useContextmenu/index.js`),r=require(`./constants/distance.js`),i=require(`./constants/projection.js`),a=require(`./utils/distance/index.js`),o=require(`./utils/style/index.js`),s=require(`./utils/feature/index.js`),c=require(`./utils/layer/index.js`),l=require(`./utils/projection/index.js`);require(`./utils/index.js`);const u=require(`./composables/useDrawLineString/index.js`),d=require(`./composables/useDrawPolygon/index.js`),f=require(`./composables/useGraticule/index.js`),p=require(`./composables/usePointermove/index.js`),m=require(`./composables/useSwitchBaseLayer/index.js`);require(`./composables/index.js`),exports.EPSG_3857=i.EPSG_3857,exports.EPSG_3857ExtentToEPSG_4326=l.EPSG_3857ExtentToEPSG_4326,exports.EPSG_3857ToEPSG_4326=l.EPSG_3857ToEPSG_4326,exports.EPSG_4326=i.EPSG_4326,exports.EPSG_4326ExtentToEPSG_3857=l.EPSG_4326ExtentToEPSG_3857,exports.EPSG_4326ToEPSG_3857=l.EPSG_4326ToEPSG_3857,exports.ONE_NM=r.ONE_NM,exports.OlMap=t.default,exports.WGS84Projection=i.WGS84Projection,exports.WebMercatorProjection=i.WebMercatorProjection,exports.createBingLayer=c.createBingLayer,exports.createCircle=s.createCircle,exports.createCircleFeature=s.createCircleFeature,exports.createCircleStyle=o.createCircleStyle,exports.createFeature=s.createFeature,exports.createLineString=s.createLineString,exports.createLineStringFeature=s.createLineStringFeature,exports.createMultiLineString=s.createMultiLineString,exports.createMultiLineStringFeature=s.createMultiLineStringFeature,exports.createMultiPoint=s.createMultiPoint,exports.createMultiPointFeature=s.createMultiPointFeature,exports.createMultiPolygon=s.createMultiPolygon,exports.createMultiPolygonFeature=s.createMultiPolygonFeature,exports.createOpenStreetMapLayer=c.createOpenStreetMapLayer,exports.createPoint=s.createPoint,exports.createPointFeature=s.createPointFeature,exports.createPolygon=s.createPolygon,exports.createPolygonFeature=s.createPolygonFeature,exports.createStyle=o.createStyle,exports.createTextStyle=o.createTextStyle,exports.createTianDiTuLayer=c.createTianDiTuLayer,exports.createTianDiTuUrl=c.createTianDiTuUrl,exports.createVectorLayer=c.createVectorLayer,exports.formatAngle=a.formatAngle,exports.formatRotation=a.formatRotation,exports.kmToNauticalMiles=a.kmToNauticalMiles,exports.mercatorExtentToWgs84=l.mercatorExtentToWgs84,exports.mercatorToWgs84=l.mercatorToWgs84,exports.nauticalMilesToKm=a.nauticalMilesToKm,exports.olMapInjectionKey=e.olMapInjectionKey,exports.useContextmenu=n.useContextmenu,exports.useDrawLineString=u.useDrawLineString,exports.useDrawPolygon=d.useDrawPolygon,exports.useGraticule=f.useGraticule,exports.useOlMap=e.useOlMap,exports.usePointermove=p.usePointermove,exports.useSwitchBaseLayer=m.useSwitchBaseLayer,exports.wgs84ExtentToMercator=l.wgs84ExtentToMercator,exports.wgs84ToMercator=l.wgs84ToMercator;
+const e=require(`./components/ol-map/props.js`),t=require(`./components/ol-map/index.js`);require(`./components/index.js`);const n=require(`./composables/useContextmenu/index.js`),r=require(`./constants/distance.js`),i=require(`./constants/projection.js`),a=require(`./utils/distance/index.js`),o=require(`./utils/style/index.js`),s=require(`./utils/feature/index.js`),c=require(`./utils/layer/index.js`),l=require(`./utils/projection/index.js`);require(`./utils/index.js`);const u=require(`./composables/useDrawLineString/index.js`),d=require(`./composables/useDrawPolygon/index.js`),f=require(`./composables/useGraticule/index.js`),p=require(`./composables/usePointermove/index.js`),m=require(`./composables/useSwitchBaseLayer/index.js`);require(`./composables/index.js`),exports.EPSG_3857=i.EPSG_3857,exports.EPSG_3857ExtentToEPSG_4326=l.EPSG_3857ExtentToEPSG_4326,exports.EPSG_3857ToEPSG_4326=l.EPSG_3857ToEPSG_4326,exports.EPSG_4326=i.EPSG_4326,exports.EPSG_4326ExtentToEPSG_3857=l.EPSG_4326ExtentToEPSG_3857,exports.EPSG_4326ToEPSG_3857=l.EPSG_4326ToEPSG_3857,exports.ONE_NM=r.ONE_NM,exports.OlMap=t.default,exports.WGS84Projection=i.WGS84Projection,exports.WebMercatorProjection=i.WebMercatorProjection,exports.createBingLayer=c.createBingLayer,exports.createCircle=s.createCircle,exports.createCircleFeature=s.createCircleFeature,exports.createCircleStyle=o.createCircleStyle,exports.createFeature=s.createFeature,exports.createLineString=s.createLineString,exports.createLineStringFeature=s.createLineStringFeature,exports.createMultiLineString=s.createMultiLineString,exports.createMultiLineStringFeature=s.createMultiLineStringFeature,exports.createMultiPoint=s.createMultiPoint,exports.createMultiPointFeature=s.createMultiPointFeature,exports.createMultiPolygon=s.createMultiPolygon,exports.createMultiPolygonFeature=s.createMultiPolygonFeature,exports.createOpenStreetMapLayer=c.createOpenStreetMapLayer,exports.createPoint=s.createPoint,exports.createPointFeature=s.createPointFeature,exports.createPolygon=s.createPolygon,exports.createPolygonFeature=s.createPolygonFeature,exports.createStyle=o.createStyle,exports.createTextStyle=o.createTextStyle,exports.createTianDiTuLayer=c.createTianDiTuLayer,exports.createTianDiTuUrl=c.createTianDiTuUrl,exports.createVectorLayer=c.createVectorLayer,exports.createVectorSource=c.createVectorSource,exports.createWebGLVectorLayer=c.createWebGLVectorLayer,exports.formatAngle=a.formatAngle,exports.formatRotation=a.formatRotation,exports.kmToNauticalMiles=a.kmToNauticalMiles,exports.mercatorExtentToWgs84=l.mercatorExtentToWgs84,exports.mercatorToWgs84=l.mercatorToWgs84,exports.nauticalMilesToKm=a.nauticalMilesToKm,exports.olMapInjectionKey=e.olMapInjectionKey,exports.useContextmenu=n.useContextmenu,exports.useDrawLineString=u.useDrawLineString,exports.useDrawPolygon=d.useDrawPolygon,exports.useGraticule=f.useGraticule,exports.useOlMap=e.useOlMap,exports.usePointermove=p.usePointermove,exports.useSwitchBaseLayer=m.useSwitchBaseLayer,exports.wgs84ExtentToMercator=l.wgs84ExtentToMercator,exports.wgs84ToMercator=l.wgs84ToMercator;

package/lib/utils/layer/index.d.ts

@@ -2,8 +2,10 @@ import { StyleOptions } from '../style';
 import { Feature } from 'ol';
 import { Geometry } from 'ol/geom';
 import { ProjectionLike } from 'ol/proj';
+import { FlatStyleLike } from 'ol/style/flat';
 import { Tile as TileLayer } from 'ol/layer';
 import { default as VectorLayer } from 'ol/layer/Vector';
+import { default as WebGLVectorLayer } from 'ol/layer/WebGLVector';
 import { BingMaps, OSM, XYZ } from 'ol/source';
 import { default as VectorSource } from 'ol/source/Vector';
 export type T_MAP_TYPE = 'vec' | 'cva' | 'img' | 'cia' | 'ter' | 'cta' | 'ibo';
@@ -35,11 +37,24 @@ export interface CreateOpenStreetMapLayerOptions {
     sourceOptions?: BingMapsSourceOptions;
 }
 export declare function createOpenStreetMapLayer(data?: CreateOpenStreetMapLayerOptions): TileLayer<import('ol/source').Tile<import('ol').Tile>>;
-export type _VectorLayerOptions = ConstructorParameters<typeof VectorLayer>[0];
-export type VectorLayerOptions = _VectorLayerOptions & {
+export type _VectorSourceOptions<T extends Geometry = Geometry> = ConstructorParameters<typeof VectorSource<Feature<T>>>[0];
+export type VectorSourceOptions<T extends Geometry = Geometry> = _VectorSourceOptions<T>;
+export declare function createVectorSource<T extends Geometry = Geometry>(options?: VectorSourceOptions<T>): VectorSource<Feature<T>>;
+export type _VectorLayerOptions<T extends Geometry = Geometry> = ConstructorParameters<typeof VectorLayer<VectorSource<Feature<T>>>>[0];
+export type VectorLayerOptions<T extends Geometry = Geometry> = _VectorLayerOptions<T> & {
     styleOptions?: StyleOptions;
+    sourceOptions?: VectorSourceOptions<T>;
 };
-export declare function createVectorLayer<T extends Geometry = Geometry>(options?: VectorLayerOptions): {
+export declare function createVectorLayer<T extends Geometry = Geometry>(options?: VectorLayerOptions<T>): {
     source: VectorSource<Feature<T>>;
-    layer: VectorLayer<VectorSource<import('ol/Feature').FeatureLike>, import('ol/Feature').FeatureLike>;
+    layer: VectorLayer<VectorSource<Feature<T>>, Feature<T>>;
+};
+export type _WebGLVectorLayerOptions<T extends Geometry = Geometry> = ConstructorParameters<typeof WebGLVectorLayer<VectorSource<Feature<T>>>>[0];
+export type WebGLVectorLayerOptions<T extends Geometry = Geometry> = _WebGLVectorLayerOptions<T> & {
+    style: FlatStyleLike;
+    sourceOptions?: VectorSourceOptions<T>;
+};
+export declare function createWebGLVectorLayer<T extends Geometry = Geometry>(options: WebGLVectorLayerOptions<T>): {
+    source: VectorSource<Feature<T>>;
+    layer: WebGLVectorLayer<VectorSource<Feature<T>>, Feature<T>>;
 };

package/lib/utils/layer/index.js

@@ -1 +1 @@
-const e=require(`../../_virtual/rolldown_runtime.js`),t=require(`../../constants/projection.js`),n=require(`../style/index.js`);let r=require(`ol/layer/Vector`);r=e.__toESM(r);let i=require(`ol/source/Vector`);i=e.__toESM(i);let a=require(`ol/layer`);a=e.__toESM(a);let o=require(`ol/source`);o=e.__toESM(o);function s(e){let{type:n=`img`,projection:r=t.WebMercatorProjection,key:i}=e,a=e.url||`https://t{0-4}.tianditu.gov.cn`,o=`&tk=${i}&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}`;return`${a}/${n}_${r===`EPSG:4326`?`c`:r===`EPSG:3857`?`w`:`c`}/wmts?LAYER=${n}${o}`}function c(e){let{layerOptions:t,sourceOptions:n,...r}=e;return new a.Tile({source:new o.XYZ({url:s(r),projection:r.projection,crossOrigin:`Anonymous`,...n}),...t})}function l({name:e,key:t,layerOptions:n,sourceOptions:r}){return new a.Tile({source:new o.BingMaps({key:t,imagerySet:e,placeholderTiles:!1,...r}),...n})}function u(e){let{layerOptions:t,sourceOptions:n}=e||{};return new a.Tile({source:new o.OSM({crossOrigin:`Anonymous`,...n}),...t})}function d(e){let{styleOptions:t,...a}=e||{},o=t?n.createStyle(t):void 0,s=new i.default;return{source:s,layer:new r.default({source:s,...a,style:o||a.style})}}exports.createBingLayer=l,exports.createOpenStreetMapLayer=u,exports.createTianDiTuLayer=c,exports.createTianDiTuUrl=s,exports.createVectorLayer=d;
+const e=require(`../../_virtual/rolldown_runtime.js`),t=require(`../../constants/projection.js`),n=require(`../style/index.js`);let r=require(`ol/layer/Vector`);r=e.__toESM(r);let i=require(`ol/source/Vector`);i=e.__toESM(i);let a=require(`ol/layer`);a=e.__toESM(a);let o=require(`ol/layer/WebGLVector`);o=e.__toESM(o);let s=require(`ol/source`);s=e.__toESM(s);function c(e){let{type:n=`img`,projection:r=t.WebMercatorProjection,key:i}=e,a=e.url||`https://t{0-4}.tianditu.gov.cn`,o=`&tk=${i}&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}`;return`${a}/${n}_${r===`EPSG:4326`?`c`:r===`EPSG:3857`?`w`:`c`}/wmts?LAYER=${n}${o}`}function l(e){let{layerOptions:t,sourceOptions:n,...r}=e;return new a.Tile({source:new s.XYZ({url:c(r),projection:r.projection,crossOrigin:`Anonymous`,...n}),...t})}function u({name:e,key:t,layerOptions:n,sourceOptions:r}){return new a.Tile({source:new s.BingMaps({key:t,imagerySet:e,placeholderTiles:!1,...r}),...n})}function d(e){let{layerOptions:t,sourceOptions:n}=e||{};return new a.Tile({source:new s.OSM({crossOrigin:`Anonymous`,...n}),...t})}function f(e){return new i.default({...e})}function p(e){let{styleOptions:t,sourceOptions:i,...a}=e||{},o=t?n.createStyle(t):void 0,s=f(i);return{source:s,layer:new r.default({source:s,...a,style:o||a.style})}}function m(e){let{style:t,sourceOptions:n,...r}=e,i=f(n);return{source:i,layer:new o.default({source:i,...r,style:t})}}exports.createBingLayer=u,exports.createOpenStreetMapLayer=d,exports.createTianDiTuLayer=l,exports.createTianDiTuUrl=c,exports.createVectorLayer=p,exports.createVectorSource=f,exports.createWebGLVectorLayer=m;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@summeruse/ol",
   "type": "module",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "",
   "author": "finalsummer",
   "license": "ISC",