@spuermomonga/vue3-bmapgl 0.0.6 → 0.0.7

package/dist/index.js

@@ -387,9 +387,54 @@
       type: Boolean,
       default: true
     },
-    options: {
-      type: Object,
-      default: {}
+    getTile: {
+      type: Function
+    },
+    useThumbData: {
+      type: Boolean,
+      default: false
+    },
+    xTemplate: {
+      type: Function
+    },
+    yTemplate: {
+      type: Function
+    },
+    zTemplate: {
+      type: Function
+    },
+    bTemplate: {
+      type: Function
+    },
+    minZoom: {
+      type: Number,
+      default: 3
+    },
+    maxZoom: {
+      type: Number,
+      default: 23
+    },
+    extent: {
+      type: Array
+    },
+    extentCRSIsWGS84: {
+      type: Boolean,
+      default: false
+    },
+    boundary: {
+      type: Array
+    },
+    zIndex: {
+      type: Number,
+      default: 1
+    },
+    zIndexTop: {
+      type: Boolean,
+      default: false
+    },
+    tms: {
+      type: Boolean,
+      default: false
     }
   };
 
@@ -399,54 +444,88 @@
     setup(props) {
       const mapInstance = useMapInstance();
       let layer = null;
-      const addTileLayer = (layer2) => {
+      const setZIndex = (zIndex) => {
+        layer?.setZIndex(zIndex);
+      };
+      const setBoundary = (boundary) => {
+        boundary && !boundary.length ? layer?.addBoundary(boundary) : layer?.clearBoundary();
+      };
+      const setZIndexTop = (zIndexTop) => {
+        zIndexTop && layer?.setZIndexTop();
+      };
+      const initLayerOptions = () => {
         const {
-          getTile
-        } = props.options;
-        if (getTile) {
-          mapInstance().addTileLayer(layer2);
-          layer2.loadRasterTileData = function(tileInfo, callback) {
-            const key = this.getTileKey(tileInfo);
-            const handleImageLoad = (image) => {
-              image.tileInfo = tileInfo;
-              callback && callback(image, key);
-            };
-            const handleError = () => callback && callback(null, key);
-            getTile(tileInfo, (img) => {
-              if (typeof img === "string" || img instanceof HTMLCanvasElement) {
-                const image = new Image();
-                image.crossOrigin = "anonymous";
-                image.onload = () => handleImageLoad(image);
-                image.onerror = handleError;
-                image.src = typeof img === "string" ? img : img.toDataURL();
-              } else if (img instanceof HTMLImageElement) {
-                handleImageLoad(img);
-              } else {
-                handleError();
-              }
-            });
-          };
-        } else {
-          mapInstance().addTileLayer(layer2);
-        }
+          zIndex,
+          zIndexTop
+        } = props;
+        setZIndex(zIndex);
+        setZIndexTop(zIndexTop);
       };
-      const removeTileLayer = (layer2) => {
-        mapInstance().removeTileLayer(layer2);
+      const startWatchProps = () => {
+        vue.watch(() => props.zIndex, setZIndex);
+        vue.watch(() => props.boundary, setBoundary);
       };
-      const createLayer = () => {
-        if (layer) {
-          removeTileLayer(layer);
-        }
+      const init = () => {
         const {
+          visible,
           getTile,
-          ...retProps
-        } = props.options;
-        layer = new BMapGL.XYZLayer(retProps);
-        addTileLayer(layer);
+          xTemplate,
+          yTemplate,
+          zTemplate,
+          bTemplate,
+          minZoom,
+          maxZoom,
+          extent,
+          extentCRSIsWGS84,
+          boundary,
+          useThumbData,
+          tms
+        } = props;
+        layer = new BMapGL.XYZLayer({
+          xTemplate,
+          yTemplate,
+          zTemplate,
+          bTemplate,
+          minZoom,
+          maxZoom,
+          extent,
+          extentCRSIsWGS84,
+          boundary,
+          useThumbData,
+          tms
+        });
+        initLayerOptions();
+        if (visible) {
+          if (getTile) {
+            mapInstance().addTileLayer(layer);
+            layer.loadRasterTileData = function(tileInfo, callback) {
+              const key = this.getTileKey(tileInfo);
+              const handleImageLoad = (image) => {
+                image.tileInfo = tileInfo;
+                callback && callback(image, key);
+              };
+              const handleError = () => callback && callback(null, key);
+              getTile(tileInfo, (img) => {
+                if (typeof img === "string" || img instanceof HTMLCanvasElement) {
+                  const image = new Image();
+                  image.crossOrigin = "anonymous";
+                  image.onload = () => handleImageLoad(image);
+                  image.onerror = handleError;
+                  image.src = typeof img === "string" ? img : img.toDataURL();
+                } else if (img instanceof HTMLImageElement) {
+                  handleImageLoad(img);
+                } else {
+                  handleError();
+                }
+              });
+            };
+          } else {
+            mapInstance().addTileLayer(layer);
+          }
+        }
+        startWatchProps();
       };
-      props.visible && createLayer();
-      vue.watch(() => props.visible, (n) => layer && (n ? addTileLayer(layer) : removeTileLayer(layer)));
-      vue.watch(() => props.options, () => createLayer());
+      init();
       vue.onUnmounted(() => {
         if (layer) {
           mapInstance().removeTileLayer(layer);

package/dist/index.prod.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Vue3Bmapgl={},e.vue)}(this,function(e,t){"use strict";let a=!1;function o(e){return e.some(e=>!t.isVNode(e)||e.type!==Comment&&!(e.type===t.Fragment&&!o(e.children)))?e:null}function n(e,t){return t(e&&o(e())||null)}const l={ak:String,apiUrl:String,plugins:Array,mapConfig:Object},r=Symbol("b-config-provider");var i=t.defineComponent({name:"ConfigProvider",props:l,setup(e,{slots:o}){const n=t.ref("notload"),l=e.apiUrl?"_initBMap_":`_initBMap_${e.ak}`,i=e.apiUrl?`${e.apiUrl.replace(/&$/,"")}&callback=${l}`:`//api.map.baidu.com/api?type=webgl&v=1.0&ak=${e.ak}&callback=${l}`;n.value="pending",function(e){const{key:t,src:o,addCalToWindow:n=!0,timeout:l=1e4}=e;return a&&window.BMapGL?Promise.resolve():new Promise((e,r)=>{const i=document.createElement("script");i.src=o,i.type="text/javascript",i.defer=!0;const s=()=>{i.onload=null,i.onerror=null,document.body.contains(i)&&document.body.removeChild(i)},p=setTimeout(()=>{s(),r(new Error(`Script load timeout: ${o}`))},l),d=()=>{clearTimeout(p),a=!0,s(),e()};n?window[t]=d:i.onload=d,i.onerror=()=>{clearTimeout(p),s(),r(new Error(`Failed to load script: ${o}`))},document.body.appendChild(i)})}({key:l,src:i}).then(()=>{n.value="loaded"}).catch(()=>{n.value="failed"});const s=t.computed(()=>{const{mapConfig:t}=e;return t??{}});return t.provide(r,{mergedStatusRef:n,mergedMapSetRef:s}),()=>t.renderSlot(o,"default")}}),s=t.defineComponent({name:"TileLayer",setup:()=>()=>t.createVNode("div",null,[t.createTextVNode("Tile")])});const p=Symbol("b-map"),d={maxZoom:{type:Number,default:21},minZoom:{type:Number,default:0},heading:{type:Number,default:0},center:{type:Object,default:[116.403901,39.915185]},zoom:{type:Number,default:14},class:String,contentClass:String,enableScrollWheelZoom:{type:Boolean,default:!1},enableDragging:{type:Boolean,default:!0},tilt:{type:Number,default:0},enableTilt:{type:Boolean,default:!1},mapType:{type:String,default:"BMAP_NORMAL_MAP"},enableAutoResize:{type:Boolean,default:!0},enableTiltGestures:{type:Boolean,default:!1},enableRotate:{type:Boolean,default:!1},enableRotateGestures:{type:Boolean,default:!1},displayOptions:{type:Object},onInitd:Function};var u="map-module_b-map__29r3m",m="map-module_b-map-content__sMaJG",c="map-module_b-map-loading__qc4a8",f="map-module_b-map-failed__-w-tX";!function(e,t){void 0===t&&(t={});var a=t.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===a&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(".map-module_b-map-content__sMaJG,.map-module_b-map__29r3m{height:100%;overflow:hidden;position:relative;width:100%}.map-module_b-map-failed__-w-tX,.map-module_b-map-loading__qc4a8{color:#999;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}");var y=t.defineComponent({name:"Map",props:d,slots:Object,setup(e,{slots:a}){const{mergedMapSetRef:o,mergedStatusRef:l}=function(e={}){const a=t.inject(r,null);return{mergedStatusRef:a?.mergedStatusRef,mergedMapSetRef:t.computed(()=>{const{zoom:t,center:o,heading:n,minZoom:l,maxZoom:r,enableScrollWheelZoom:i,enableDragging:s,tilt:p,enableTilt:d,mapType:u,enableAutoResize:m,enableTiltGestures:c,enableRotate:f,enableRotateGestures:y,displayOptions:g}=e;return{zoom:t??a?.mergedMapSetRef.value?.zoom,center:o??a?.mergedMapSetRef.value?.center,heading:n??a?.mergedMapSetRef.value?.heading,minZoom:l??a?.mergedMapSetRef.value?.minZoom,maxZoom:r??a?.mergedMapSetRef.value?.maxZoom,enableScrollWheelZoom:i??a?.mergedMapSetRef.value?.enableScrollWheelZoom,enableDragging:s??a?.mergedMapSetRef.value?.enableDragging,tilt:p??a?.mergedMapSetRef.value?.tilt,enableTilt:d??a?.mergedMapSetRef.value?.enableTilt,mapType:u??a?.mergedMapSetRef.value?.mapType,enableAutoResize:m??a?.mergedMapSetRef.value?.enableAutoResize,enableTiltGestures:c??a?.mergedMapSetRef.value?.enableTiltGestures,enableRotate:f??a?.mergedMapSetRef.value?.enableRotate,enableRotateGestures:y??a?.mergedMapSetRef.value?.enableRotateGestures,displayOptions:g??a?.mergedMapSetRef.value?.displayOptions}})}}(e),i=t.ref();let s=null;const d=t.ref(!1);t.provide(p,{mapInstance:()=>s});const y=e=>{"string"==typeof e?s?.centerAndZoom(e,o.value.zoom):Array.isArray(e)?s?.centerAndZoom(new BMapGL.Point(e[0],e[1]),o.value.zoom):s?.centerAndZoom(e,o.value.zoom)},g=e=>{e?s.enableScrollWheelZoom():s.disableScrollWheelZoom()},b=e=>{s?.setDisplayOptions(e||{})},v=e=>{s?.setTilt(e??0)},h=e=>{s?.setHeading(e??0)},S=e=>{e?s.enableDragging():s.disableDragging()},T=e=>{void 0!==window[e]&&s.setMapType(window[e])},R=()=>{const{maxZoom:a,minZoom:n,enableTilt:l,mapType:r,enableAutoResize:p,enableTiltGestures:u,enableRotate:m,enableRotateGestures:c,displayOptions:f}=o.value;s=new BMapGL.Map(i.value,{maxZoom:a,minZoom:n,enableTilt:l,mapType:window[r],enableAutoResize:p,enableTiltGestures:u,enableRotate:m,enableRotateGestures:c,displayOptions:f});const{onInitd:R}=e;(()=>{const{center:e,heading:t,enableScrollWheelZoom:a,tilt:n,enableDragging:l}=o.value;h(t),y(e),g(a),v(n),S(l)})(),t.watch(()=>o.value.center,y,{deep:!0}),t.watch(()=>o.value.enableScrollWheelZoom,g),t.watch(()=>o.value.displayOptions,b),t.watch(()=>o.value.tilt,v),t.watch(()=>o.value.heading,h),t.watch(()=>o.value.enableDragging,S),t.watch(()=>o.value.mapType,T),R?.({map:s}),d.value=!0};return t.onMounted(()=>{t.watchEffect(()=>{"loaded"!==l?.value||d.value||t.nextTick(R)})}),t.onUnmounted(()=>{if(s)try{s?.destroy()}catch(e){console.error(`[Vue3 BMapGL]: ${e.message}`)}}),()=>t.createVNode("div",{class:[[u],e.class]},[t.createVNode("div",{ref:i,class:[m,e.contentClass]},["pending"===l?.value&&n(a.loading,()=>t.createVNode("div",{class:[c]},[t.createTextVNode("map loading...")])),"failed"===l?.value&&n(a.failed,()=>t.createVNode("div",{class:[f]},[t.createTextVNode("map failed")]))]),d.value&&a.default?.()])}});function g(){return t.inject(p,null).mapInstance}const b={visible:{type:Boolean,default:!0},options:{type:Object,default:{}}};var v=t.defineComponent({name:"XyzLayer",props:b,setup(e){const a=g();let o=null;const n=t=>{const{getTile:o}=e.options;o?(a().addTileLayer(t),t.loadRasterTileData=function(e,t){const a=this.getTileKey(e),n=o=>{o.tileInfo=e,t&&t(o,a)},l=()=>t&&t(null,a);o(e,e=>{if("string"==typeof e||e instanceof HTMLCanvasElement){const t=new Image;t.crossOrigin="anonymous",t.onload=()=>n(t),t.onerror=l,t.src="string"==typeof e?e:e.toDataURL()}else e instanceof HTMLImageElement?n(e):l()})}):a().addTileLayer(t)},l=e=>{a().removeTileLayer(e)},r=()=>{o&&l(o);const{getTile:t,...a}=e.options;o=new BMapGL.XYZLayer(a),n(o)};return e.visible&&r(),t.watch(()=>e.visible,e=>o&&(e?n(o):l(o))),t.watch(()=>e.options,()=>r()),t.onUnmounted(()=>{o&&a().removeTileLayer(o)}),()=>t.createVNode(t.Fragment,null,null)}});const h={visible:{type:Boolean,default:!0},points:{type:Array},strokeColor:{type:String,default:"#000"},fillColor:{type:String,default:"#fff"},strokeWeight:{type:Number,default:2},strokeOpacity:{type:Number,default:1},fillOpacity:{type:Number,default:.3},strokeStyle:{type:String,default:"solid"},enableMassClear:{type:Boolean,default:!0},enableEditing:{type:Boolean,default:!1},isBoundary:{type:Boolean},enableClicking:{type:Boolean,default:!0}};var S=t.defineComponent({name:"Polygon",props:h,setup:e=>{const a=g();let o=null;const n=e=>{o&&o.setStrokeColor(e)};return(()=>{const{points:l,visible:r,strokeColor:i,fillColor:s,strokeWeight:p,strokeOpacity:d,fillOpacity:u,strokeStyle:m,enableMassClear:c,enableEditing:f,enableClicking:y}=e;l&&l.length&&(o=new BMapGL.Polygon(function(e){if(!e||0===e.length)return[];const t=e[0];return Array.isArray(t)?e.map(([e,t])=>new BMapGL.Point(e,t)):e}(l),{strokeColor:i,fillColor:s,strokeWeight:p,strokeOpacity:d,fillOpacity:u,strokeStyle:m,enableMassClear:c,enableEditing:f,enableClicking:y}),r&&a().addOverlay(o),t.watch(()=>e.strokeColor,n),t.watch(()=>e.visible,e=>{a()[e?"addOverlay":"removeOverlay"](o)}))})(),t.onUnmounted(()=>{o&&a().removeOverlay(o)}),()=>t.createVNode(t.Fragment,null,null)}}),T=t.defineComponent({name:"Sector",setup:()=>()=>t.createVNode(t.Fragment,null,null)});e.BConfigProvider=i,e.BMap=y,e.BPolygon=S,e.BSector=T,e.BTileLayer=s,e.BXyzLayer=v,e.configProviderInjectionKey=r,e.configProviderProps=l,e.create=function({componentPrefix:e="B",components:t=[]}={}){const a=[];function o(t,a,o){t.component(e+a)||t.component(e+a,o)}return{componentPrefix:e,install:function(e){a.includes(e)||(a.push(e),t.forEach(t=>{const{name:a,alias:n}=t;o(e,a,t),n&&n.forEach(a=>{o(e,a,t)})}))}}},e.mapInjectionKey=p,e.mapProps=d,e.polygonProps=h,e.xyzLayerProps=b});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Vue3Bmapgl={},e.vue)}(this,function(e,t){"use strict";let a=!1;function o(e){return e.some(e=>!t.isVNode(e)||e.type!==Comment&&!(e.type===t.Fragment&&!o(e.children)))?e:null}function n(e,t){return t(e&&o(e())||null)}const l={ak:String,apiUrl:String,plugins:Array,mapConfig:Object},r=Symbol("b-config-provider");var i=t.defineComponent({name:"ConfigProvider",props:l,setup(e,{slots:o}){const n=t.ref("notload"),l=e.apiUrl?"_initBMap_":`_initBMap_${e.ak}`,i=e.apiUrl?`${e.apiUrl.replace(/&$/,"")}&callback=${l}`:`//api.map.baidu.com/api?type=webgl&v=1.0&ak=${e.ak}&callback=${l}`;n.value="pending",function(e){const{key:t,src:o,addCalToWindow:n=!0,timeout:l=1e4}=e;return a&&window.BMapGL?Promise.resolve():new Promise((e,r)=>{const i=document.createElement("script");i.src=o,i.type="text/javascript",i.defer=!0;const p=()=>{i.onload=null,i.onerror=null,document.body.contains(i)&&document.body.removeChild(i)},s=setTimeout(()=>{p(),r(new Error(`Script load timeout: ${o}`))},l),d=()=>{clearTimeout(s),a=!0,p(),e()};n?window[t]=d:i.onload=d,i.onerror=()=>{clearTimeout(s),p(),r(new Error(`Failed to load script: ${o}`))},document.body.appendChild(i)})}({key:l,src:i}).then(()=>{n.value="loaded"}).catch(()=>{n.value="failed"});const p=t.computed(()=>{const{mapConfig:t}=e;return t??{}});return t.provide(r,{mergedStatusRef:n,mergedMapSetRef:p}),()=>t.renderSlot(o,"default")}}),p=t.defineComponent({name:"TileLayer",setup:()=>()=>t.createVNode("div",null,[t.createTextVNode("Tile")])});const s=Symbol("b-map"),d={maxZoom:{type:Number,default:21},minZoom:{type:Number,default:0},heading:{type:Number,default:0},center:{type:Object,default:[116.403901,39.915185]},zoom:{type:Number,default:14},class:String,contentClass:String,enableScrollWheelZoom:{type:Boolean,default:!1},enableDragging:{type:Boolean,default:!0},tilt:{type:Number,default:0},enableTilt:{type:Boolean,default:!1},mapType:{type:String,default:"BMAP_NORMAL_MAP"},enableAutoResize:{type:Boolean,default:!0},enableTiltGestures:{type:Boolean,default:!1},enableRotate:{type:Boolean,default:!1},enableRotateGestures:{type:Boolean,default:!1},displayOptions:{type:Object},onInitd:Function};var u="map-module_b-map__29r3m",m="map-module_b-map-content__sMaJG",c="map-module_b-map-loading__qc4a8",f="map-module_b-map-failed__-w-tX";!function(e,t){void 0===t&&(t={});var a=t.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===a&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(".map-module_b-map-content__sMaJG,.map-module_b-map__29r3m{height:100%;overflow:hidden;position:relative;width:100%}.map-module_b-map-failed__-w-tX,.map-module_b-map-loading__qc4a8{color:#999;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}");var y=t.defineComponent({name:"Map",props:d,slots:Object,setup(e,{slots:a}){const{mergedMapSetRef:o,mergedStatusRef:l}=function(e={}){const a=t.inject(r,null);return{mergedStatusRef:a?.mergedStatusRef,mergedMapSetRef:t.computed(()=>{const{zoom:t,center:o,heading:n,minZoom:l,maxZoom:r,enableScrollWheelZoom:i,enableDragging:p,tilt:s,enableTilt:d,mapType:u,enableAutoResize:m,enableTiltGestures:c,enableRotate:f,enableRotateGestures:y,displayOptions:g}=e;return{zoom:t??a?.mergedMapSetRef.value?.zoom,center:o??a?.mergedMapSetRef.value?.center,heading:n??a?.mergedMapSetRef.value?.heading,minZoom:l??a?.mergedMapSetRef.value?.minZoom,maxZoom:r??a?.mergedMapSetRef.value?.maxZoom,enableScrollWheelZoom:i??a?.mergedMapSetRef.value?.enableScrollWheelZoom,enableDragging:p??a?.mergedMapSetRef.value?.enableDragging,tilt:s??a?.mergedMapSetRef.value?.tilt,enableTilt:d??a?.mergedMapSetRef.value?.enableTilt,mapType:u??a?.mergedMapSetRef.value?.mapType,enableAutoResize:m??a?.mergedMapSetRef.value?.enableAutoResize,enableTiltGestures:c??a?.mergedMapSetRef.value?.enableTiltGestures,enableRotate:f??a?.mergedMapSetRef.value?.enableRotate,enableRotateGestures:y??a?.mergedMapSetRef.value?.enableRotateGestures,displayOptions:g??a?.mergedMapSetRef.value?.displayOptions}})}}(e),i=t.ref();let p=null;const d=t.ref(!1);t.provide(s,{mapInstance:()=>p});const y=e=>{"string"==typeof e?p?.centerAndZoom(e,o.value.zoom):Array.isArray(e)?p?.centerAndZoom(new BMapGL.Point(e[0],e[1]),o.value.zoom):p?.centerAndZoom(e,o.value.zoom)},g=e=>{e?p.enableScrollWheelZoom():p.disableScrollWheelZoom()},b=e=>{p?.setDisplayOptions(e||{})},v=e=>{p?.setTilt(e??0)},T=e=>{p?.setHeading(e??0)},h=e=>{e?p.enableDragging():p.disableDragging()},S=e=>{void 0!==window[e]&&p.setMapType(window[e])},R=()=>{const{maxZoom:a,minZoom:n,enableTilt:l,mapType:r,enableAutoResize:s,enableTiltGestures:u,enableRotate:m,enableRotateGestures:c,displayOptions:f}=o.value;p=new BMapGL.Map(i.value,{maxZoom:a,minZoom:n,enableTilt:l,mapType:window[r],enableAutoResize:s,enableTiltGestures:u,enableRotate:m,enableRotateGestures:c,displayOptions:f});const{onInitd:R}=e;(()=>{const{center:e,heading:t,enableScrollWheelZoom:a,tilt:n,enableDragging:l}=o.value;T(t),y(e),g(a),v(n),h(l)})(),t.watch(()=>o.value.center,y,{deep:!0}),t.watch(()=>o.value.enableScrollWheelZoom,g),t.watch(()=>o.value.displayOptions,b),t.watch(()=>o.value.tilt,v),t.watch(()=>o.value.heading,T),t.watch(()=>o.value.enableDragging,h),t.watch(()=>o.value.mapType,S),R?.({map:p}),d.value=!0};return t.onMounted(()=>{t.watchEffect(()=>{"loaded"!==l?.value||d.value||t.nextTick(R)})}),t.onUnmounted(()=>{if(p)try{p?.destroy()}catch(e){console.error(`[Vue3 BMapGL]: ${e.message}`)}}),()=>t.createVNode("div",{class:[[u],e.class]},[t.createVNode("div",{ref:i,class:[m,e.contentClass]},["pending"===l?.value&&n(a.loading,()=>t.createVNode("div",{class:[c]},[t.createTextVNode("map loading...")])),"failed"===l?.value&&n(a.failed,()=>t.createVNode("div",{class:[f]},[t.createTextVNode("map failed")]))]),d.value&&a.default?.()])}});function g(){return t.inject(s,null).mapInstance}const b={visible:{type:Boolean,default:!0},getTile:{type:Function},useThumbData:{type:Boolean,default:!1},xTemplate:{type:Function},yTemplate:{type:Function},zTemplate:{type:Function},bTemplate:{type:Function},minZoom:{type:Number,default:3},maxZoom:{type:Number,default:23},extent:{type:Array},extentCRSIsWGS84:{type:Boolean,default:!1},boundary:{type:Array},zIndex:{type:Number,default:1},zIndexTop:{type:Boolean,default:!1},tms:{type:Boolean,default:!1}};var v=t.defineComponent({name:"XyzLayer",props:b,setup(e){const a=g();let o=null;const n=e=>{o?.setZIndex(e)},l=e=>{e&&!e.length?o?.addBoundary(e):o?.clearBoundary()},r=()=>{const{zIndex:t,zIndexTop:a}=e;n(t),(e=>{e&&o?.setZIndexTop()})(a)};return(()=>{const{visible:i,getTile:p,xTemplate:s,yTemplate:d,zTemplate:u,bTemplate:m,minZoom:c,maxZoom:f,extent:y,extentCRSIsWGS84:g,boundary:b,useThumbData:v,tms:T}=e;o=new BMapGL.XYZLayer({xTemplate:s,yTemplate:d,zTemplate:u,bTemplate:m,minZoom:c,maxZoom:f,extent:y,extentCRSIsWGS84:g,boundary:b,useThumbData:v,tms:T}),r(),i&&(p?(a().addTileLayer(o),o.loadRasterTileData=function(e,t){const a=this.getTileKey(e),o=o=>{o.tileInfo=e,t&&t(o,a)},n=()=>t&&t(null,a);p(e,e=>{if("string"==typeof e||e instanceof HTMLCanvasElement){const t=new Image;t.crossOrigin="anonymous",t.onload=()=>o(t),t.onerror=n,t.src="string"==typeof e?e:e.toDataURL()}else e instanceof HTMLImageElement?o(e):n()})}):a().addTileLayer(o)),t.watch(()=>e.zIndex,n),t.watch(()=>e.boundary,l)})(),t.onUnmounted(()=>{o&&a().removeTileLayer(o)}),()=>t.createVNode(t.Fragment,null,null)}});const T={visible:{type:Boolean,default:!0},points:{type:Array},strokeColor:{type:String,default:"#000"},fillColor:{type:String,default:"#fff"},strokeWeight:{type:Number,default:2},strokeOpacity:{type:Number,default:1},fillOpacity:{type:Number,default:.3},strokeStyle:{type:String,default:"solid"},enableMassClear:{type:Boolean,default:!0},enableEditing:{type:Boolean,default:!1},isBoundary:{type:Boolean},enableClicking:{type:Boolean,default:!0}};var h=t.defineComponent({name:"Polygon",props:T,setup:e=>{const a=g();let o=null;const n=e=>{o&&o.setStrokeColor(e)};return(()=>{const{points:l,visible:r,strokeColor:i,fillColor:p,strokeWeight:s,strokeOpacity:d,fillOpacity:u,strokeStyle:m,enableMassClear:c,enableEditing:f,enableClicking:y}=e;l&&l.length&&(o=new BMapGL.Polygon(function(e){if(!e||0===e.length)return[];const t=e[0];return Array.isArray(t)?e.map(([e,t])=>new BMapGL.Point(e,t)):e}(l),{strokeColor:i,fillColor:p,strokeWeight:s,strokeOpacity:d,fillOpacity:u,strokeStyle:m,enableMassClear:c,enableEditing:f,enableClicking:y}),r&&a().addOverlay(o),t.watch(()=>e.strokeColor,n),t.watch(()=>e.visible,e=>{a()[e?"addOverlay":"removeOverlay"](o)}))})(),t.onUnmounted(()=>{o&&a().removeOverlay(o)}),()=>t.createVNode(t.Fragment,null,null)}}),S=t.defineComponent({name:"Sector",setup:()=>()=>t.createVNode(t.Fragment,null,null)});e.BConfigProvider=i,e.BMap=y,e.BPolygon=h,e.BSector=S,e.BTileLayer=p,e.BXyzLayer=v,e.configProviderInjectionKey=r,e.configProviderProps=l,e.create=function({componentPrefix:e="B",components:t=[]}={}){const a=[];function o(t,a,o){t.component(e+a)||t.component(e+a,o)}return{componentPrefix:e,install:function(e){a.includes(e)||(a.push(e),t.forEach(t=>{const{name:a,alias:n}=t;o(e,a,t),n&&n.forEach(a=>{o(e,a,t)})}))}}},e.mapInjectionKey=s,e.mapProps=d,e.polygonProps=T,e.xyzLayerProps=b});

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

@@ -1,3 +1,3 @@
 export { default as BXyzLayer } from './src/xyz';
 export { xyzLayerProps } from './src/xyz-props';
-export type { XyzLayerOptions, XyzLayerProps } from './src/xyz-props';
+export type { XyzLayerProps } from './src/xyz-props';

package/es/layer/xyz/src/xyz-props.d.ts

@@ -1,16 +1,62 @@
 import type { PropType } from 'vue';
 import type { ExtractPublicPropTypes } from '../../../_utils';
-export interface XyzLayerOptions extends BMapGL.XYZLayerOptions {
-    getTile?: (info: any, cb: (image: string | HTMLImageElement | HTMLCanvasElement) => void) => void;
-}
+type TemplateFn = (x: number, y: number, z: number) => number;
+type BTemplateFn = (x: number, y: number, z: number) => string;
+type GetTile = (info: any, cb: (image: string | HTMLImageElement | HTMLCanvasElement) => void) => void;
 export declare const xyzLayerProps: {
     readonly visible: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
-    readonly options: {
-        readonly type: PropType<XyzLayerOptions>;
-        readonly default: {};
+    readonly getTile: {
+        readonly type: PropType<GetTile>;
+    };
+    readonly useThumbData: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly xTemplate: {
+        readonly type: PropType<TemplateFn>;
+    };
+    readonly yTemplate: {
+        readonly type: PropType<TemplateFn>;
+    };
+    readonly zTemplate: {
+        readonly type: PropType<TemplateFn>;
+    };
+    readonly bTemplate: {
+        readonly type: PropType<BTemplateFn>;
+    };
+    readonly minZoom: {
+        readonly type: NumberConstructor;
+        readonly default: 3;
+    };
+    readonly maxZoom: {
+        readonly type: NumberConstructor;
+        readonly default: 23;
+    };
+    readonly extent: {
+        readonly type: PropType<number[]>;
+    };
+    readonly extentCRSIsWGS84: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly boundary: {
+        readonly type: PropType<string[]>;
+    };
+    readonly zIndex: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly zIndexTop: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly tms: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
     };
 };
 export type XyzLayerProps = ExtractPublicPropTypes<typeof xyzLayerProps>;
+export {};

package/es/layer/xyz/src/xyz-props.mjs

@@ -3,9 +3,54 @@ const xyzLayerProps = {
     type: Boolean,
     default: true
   },
-  options: {
-    type: Object,
-    default: {}
+  getTile: {
+    type: Function
+  },
+  useThumbData: {
+    type: Boolean,
+    default: false
+  },
+  xTemplate: {
+    type: Function
+  },
+  yTemplate: {
+    type: Function
+  },
+  zTemplate: {
+    type: Function
+  },
+  bTemplate: {
+    type: Function
+  },
+  minZoom: {
+    type: Number,
+    default: 3
+  },
+  maxZoom: {
+    type: Number,
+    default: 23
+  },
+  extent: {
+    type: Array
+  },
+  extentCRSIsWGS84: {
+    type: Boolean,
+    default: false
+  },
+  boundary: {
+    type: Array
+  },
+  zIndex: {
+    type: Number,
+    default: 1
+  },
+  zIndexTop: {
+    type: Boolean,
+    default: false
+  },
+  tms: {
+    type: Boolean,
+    default: false
   }
 };
 

package/es/layer/xyz/src/xyz-props.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"xyz-props.mjs","sources":["../../../../src/layer/xyz/src/file:/D:/workspaces/personal-project/vue3-bmapgl/packages/vue3-bmapgl/src/layer/xyz/src/xyz-props.ts"],"sourcesContent":["import type { PropType } from 'vue'\r\nimport type { ExtractPublicPropTypes } from '../../../_utils'\r\n\r\n// type TemplateFn = (x: number, y: number, z: number) => number\r\n\r\nexport interface XyzLayerOptions extends BMapGL.XYZLayerOptions {\r\n  getTile?: (info: any, cb: (image: string | HTMLImageElement | HTMLCanvasElement) => void) => void\r\n}\r\n\r\nexport const xyzLayerProps = {\r\n  visible: {\r\n    type: Boolean,\r\n    default: true,\r\n  },\r\n  options: {\r\n    type: Object as PropType<XyzLayerOptions>,\r\n    default: {},\r\n  },\r\n} as const\r\n\r\nexport type XyzLayerProps = ExtractPublicPropTypes<typeof xyzLayerProps>\r\n"],"names":[],"mappings":"AASO,MAAM,aAAA,GAAgB;AAAA,EAC3B,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,OAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACV;AAAA,EACD,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,MAAA;AAAA,IACN,SAAS;AAAA;;;;;"}
+{"version":3,"file":"xyz-props.mjs","sources":["../../../../src/layer/xyz/src/file:/D:/workspaces/personal-project/vue3-bmapgl/packages/vue3-bmapgl/src/layer/xyz/src/xyz-props.ts"],"sourcesContent":["import type { PropType } from 'vue'\r\nimport type { ExtractPublicPropTypes } from '../../../_utils'\r\n\r\ntype TemplateFn = (x: number, y: number, z: number) => number\r\ntype BTemplateFn = (x: number, y: number, z: number) => string\r\ntype GetTile = (info: any, cb: (image: string | HTMLImageElement | HTMLCanvasElement) => void) => void\r\n\r\nexport const xyzLayerProps = {\r\n  visible: {\r\n    type: Boolean,\r\n    default: true,\r\n  },\r\n  getTile: {\r\n    type: Function as PropType<GetTile>,\r\n  },\r\n  useThumbData: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n  xTemplate: {\r\n    type: Function as PropType<TemplateFn>,\r\n  },\r\n  yTemplate: {\r\n    type: Function as PropType<TemplateFn>,\r\n  },\r\n  zTemplate: {\r\n    type: Function as PropType<TemplateFn>,\r\n  },\r\n  bTemplate: {\r\n    type: Function as PropType<BTemplateFn>,\r\n  },\r\n  minZoom: {\r\n    type: Number,\r\n    default: 3,\r\n  },\r\n  maxZoom: {\r\n    type: Number,\r\n    default: 23,\r\n  },\r\n  extent: {\r\n    type: Array as PropType<number[]>,\r\n  },\r\n  extentCRSIsWGS84: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n  boundary: {\r\n    type: Array as PropType<string[]>,\r\n  },\r\n  zIndex: {\r\n    type: Number,\r\n    default: 1,\r\n  },\r\n  zIndexTop: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n  tms: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n} as const\r\n\r\nexport type XyzLayerProps = ExtractPublicPropTypes<typeof xyzLayerProps>\r\n"],"names":[],"mappings":"AAOO,MAAM,aAAA,GAAgB;AAAA,EAC3B,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,OAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACV;AAAA,EACD,OAAA,EAAS;AAAA,IACP,IAAA,EAAM;AAAA,GACP;AAAA,EACD,YAAA,EAAc;AAAA,IACZ,IAAA,EAAM,OAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACV;AAAA,EACD,SAAA,EAAW;AAAA,IACT,IAAA,EAAM;AAAA,GACP;AAAA,EACD,SAAA,EAAW;AAAA,IACT,IAAA,EAAM;AAAA,GACP;AAAA,EACD,SAAA,EAAW;AAAA,IACT,IAAA,EAAM;AAAA,GACP;AAAA,EACD,SAAA,EAAW;AAAA,IACT,IAAA,EAAM;AAAA,GACP;AAAA,EACD,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,MAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACV;AAAA,EACD,OAAA,EAAS;AAAA,IACP,IAAA,EAAM,MAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACV;AAAA,EACD,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM;AAAA,GACP;AAAA,EACD,gBAAA,EAAkB;AAAA,IAChB,IAAA,EAAM,OAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACV;AAAA,EACD,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,GACP;AAAA,EACD,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM,MAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACV;AAAA,EACD,SAAA,EAAW;AAAA,IACT,IAAA,EAAM,OAAA;AAAA,IACN,OAAA,EAAS;AAAA,GACV;AAAA,EACD,GAAA,EAAK;AAAA,IACH,IAAA,EAAM,OAAA;AAAA,IACN,OAAA,EAAS;AAAA;;;;;"}

package/es/layer/xyz/src/xyz.d.ts

@@ -3,21 +3,117 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         readonly type: BooleanConstructor;
         readonly default: true;
     };
-    readonly options: {
-        readonly type: import("vue").PropType<import("./xyz-props").XyzLayerOptions>;
-        readonly default: {};
+    readonly getTile: {
+        readonly type: import("vue").PropType<(info: any, cb: (image: string | HTMLImageElement | HTMLCanvasElement) => void) => void>;
+    };
+    readonly useThumbData: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly xTemplate: {
+        readonly type: import("vue").PropType<(x: number, y: number, z: number) => number>;
+    };
+    readonly yTemplate: {
+        readonly type: import("vue").PropType<(x: number, y: number, z: number) => number>;
+    };
+    readonly zTemplate: {
+        readonly type: import("vue").PropType<(x: number, y: number, z: number) => number>;
+    };
+    readonly bTemplate: {
+        readonly type: import("vue").PropType<(x: number, y: number, z: number) => string>;
+    };
+    readonly minZoom: {
+        readonly type: NumberConstructor;
+        readonly default: 3;
+    };
+    readonly maxZoom: {
+        readonly type: NumberConstructor;
+        readonly default: 23;
+    };
+    readonly extent: {
+        readonly type: import("vue").PropType<number[]>;
+    };
+    readonly extentCRSIsWGS84: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly boundary: {
+        readonly type: import("vue").PropType<string[]>;
+    };
+    readonly zIndex: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly zIndexTop: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly tms: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
     };
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     readonly visible: {
         readonly type: BooleanConstructor;
         readonly default: true;
     };
-    readonly options: {
-        readonly type: import("vue").PropType<import("./xyz-props").XyzLayerOptions>;
-        readonly default: {};
+    readonly getTile: {
+        readonly type: import("vue").PropType<(info: any, cb: (image: string | HTMLImageElement | HTMLCanvasElement) => void) => void>;
+    };
+    readonly useThumbData: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly xTemplate: {
+        readonly type: import("vue").PropType<(x: number, y: number, z: number) => number>;
+    };
+    readonly yTemplate: {
+        readonly type: import("vue").PropType<(x: number, y: number, z: number) => number>;
+    };
+    readonly zTemplate: {
+        readonly type: import("vue").PropType<(x: number, y: number, z: number) => number>;
+    };
+    readonly bTemplate: {
+        readonly type: import("vue").PropType<(x: number, y: number, z: number) => string>;
+    };
+    readonly minZoom: {
+        readonly type: NumberConstructor;
+        readonly default: 3;
+    };
+    readonly maxZoom: {
+        readonly type: NumberConstructor;
+        readonly default: 23;
+    };
+    readonly extent: {
+        readonly type: import("vue").PropType<number[]>;
+    };
+    readonly extentCRSIsWGS84: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly boundary: {
+        readonly type: import("vue").PropType<string[]>;
+    };
+    readonly zIndex: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly zIndexTop: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly tms: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
     };
 }>> & Readonly<{}>, {
+    readonly minZoom: number;
+    readonly maxZoom: number;
     readonly visible: boolean;
-    readonly options: import("./xyz-props").XyzLayerOptions;
+    readonly useThumbData: boolean;
+    readonly extentCRSIsWGS84: boolean;
+    readonly zIndex: number;
+    readonly zIndexTop: boolean;
+    readonly tms: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/layer/xyz/src/xyz.mjs

@@ -1,5 +1,4 @@
-import { defineComponent, watch, onUnmounted, createVNode, Fragment } from 'vue';
-import { __rest } from '../../../node_modules/.pnpm/@rollup_plugin-typescript@1_b93953ac7ab797e62adf5212a782f0d9/node_modules/tslib/tslib.es6.mjs';
+import { defineComponent, onUnmounted, createVNode, Fragment, watch } from 'vue';
 import { xyzLayerProps } from './xyz-props.mjs';
 import useMapInstance from '../../../_mixins/use-map-instance.mjs';
 
@@ -9,53 +8,88 @@ var xyz = /* @__PURE__ */ defineComponent({
   setup(props) {
     const mapInstance = useMapInstance();
     let layer = null;
-    const addTileLayer = (layer2) => {
+    const setZIndex = (zIndex) => {
+      layer === null || layer === void 0 ? void 0 : layer.setZIndex(zIndex);
+    };
+    const setBoundary = (boundary) => {
+      boundary && !boundary.length ? layer === null || layer === void 0 ? void 0 : layer.addBoundary(boundary) : layer === null || layer === void 0 ? void 0 : layer.clearBoundary();
+    };
+    const setZIndexTop = (zIndexTop) => {
+      zIndexTop && (layer === null || layer === void 0 ? void 0 : layer.setZIndexTop());
+    };
+    const initLayerOptions = () => {
       const {
-        getTile
-      } = props.options;
-      if (getTile) {
-        mapInstance().addTileLayer(layer2);
-        layer2.loadRasterTileData = function(tileInfo, callback) {
-          const key = this.getTileKey(tileInfo);
-          const handleImageLoad = (image) => {
-            image.tileInfo = tileInfo;
-            callback && callback(image, key);
-          };
-          const handleError = () => callback && callback(null, key);
-          getTile(tileInfo, (img) => {
-            if (typeof img === "string" || img instanceof HTMLCanvasElement) {
-              const image = new Image();
-              image.crossOrigin = "anonymous";
-              image.onload = () => handleImageLoad(image);
-              image.onerror = handleError;
-              image.src = typeof img === "string" ? img : img.toDataURL();
-            } else if (img instanceof HTMLImageElement) {
-              handleImageLoad(img);
-            } else {
-              handleError();
-            }
-          });
-        };
-      } else {
-        mapInstance().addTileLayer(layer2);
-      }
+        zIndex,
+        zIndexTop
+      } = props;
+      setZIndex(zIndex);
+      setZIndexTop(zIndexTop);
     };
-    const removeTileLayer = (layer2) => {
-      mapInstance().removeTileLayer(layer2);
+    const startWatchProps = () => {
+      watch(() => props.zIndex, setZIndex);
+      watch(() => props.boundary, setBoundary);
     };
-    const createLayer = () => {
-      if (layer) {
-        removeTileLayer(layer);
+    const init = () => {
+      const {
+        visible,
+        getTile,
+        xTemplate,
+        yTemplate,
+        zTemplate,
+        bTemplate,
+        minZoom,
+        maxZoom,
+        extent,
+        extentCRSIsWGS84,
+        boundary,
+        useThumbData,
+        tms
+      } = props;
+      layer = new BMapGL.XYZLayer({
+        xTemplate,
+        yTemplate,
+        zTemplate,
+        bTemplate,
+        minZoom,
+        maxZoom,
+        extent,
+        extentCRSIsWGS84,
+        boundary,
+        useThumbData,
+        tms
+      });
+      initLayerOptions();
+      if (visible) {
+        if (getTile) {
+          mapInstance().addTileLayer(layer);
+          layer.loadRasterTileData = function(tileInfo, callback) {
+            const key = this.getTileKey(tileInfo);
+            const handleImageLoad = (image) => {
+              image.tileInfo = tileInfo;
+              callback && callback(image, key);
+            };
+            const handleError = () => callback && callback(null, key);
+            getTile(tileInfo, (img) => {
+              if (typeof img === "string" || img instanceof HTMLCanvasElement) {
+                const image = new Image();
+                image.crossOrigin = "anonymous";
+                image.onload = () => handleImageLoad(image);
+                image.onerror = handleError;
+                image.src = typeof img === "string" ? img : img.toDataURL();
+              } else if (img instanceof HTMLImageElement) {
+                handleImageLoad(img);
+              } else {
+                handleError();
+              }
+            });
+          };
+        } else {
+          mapInstance().addTileLayer(layer);
+        }
       }
-      const _a = props.options, {
-        getTile
-      } = _a, retProps = __rest(_a, ["getTile"]);
-      layer = new BMapGL.XYZLayer(retProps);
-      addTileLayer(layer);
+      startWatchProps();
     };
-    props.visible && createLayer();
-    watch(() => props.visible, (n) => layer && (n ? addTileLayer(layer) : removeTileLayer(layer)));
-    watch(() => props.options, () => createLayer());
+    init();
     onUnmounted(() => {
       if (layer) {
         mapInstance().removeTileLayer(layer);