@spuermomonga/vue3-bmapgl 0.0.5 → 0.0.7

package/dist/index.js

@@ -50,6 +50,19 @@
       document.body.appendChild(script);
     });
   }
+  function listToMapPoints(points) {
+    if (!points || points.length === 0) {
+      return [];
+    }
+    const first = points[0];
+    if (Array.isArray(first)) {
+      return points.map(([lng, lat]) => new BMapGL.Point(lng, lat));
+    }
+    if (typeof first === "string") {
+      return points;
+    }
+    return points;
+  }
 
   function ensureValidVNode(vnodes) {
     return vnodes.some((child) => {
@@ -101,22 +114,42 @@
     }
   });
 
+  var tile = /* @__PURE__ */ vue.defineComponent({
+    name: "TileLayer",
+    setup() {
+      return () => vue.createVNode("div", null, [vue.createTextVNode("Tile")]);
+    }
+  });
+
   function useConfig(props = {}) {
-    const NConfigProvider = vue.inject(configProviderInjectionKey, null);
+    const BConfigProvider = vue.inject(configProviderInjectionKey, null);
     return {
-      mergedStatusRef: NConfigProvider?.mergedStatusRef,
+      mergedStatusRef: BConfigProvider?.mergedStatusRef,
       mergedMapSetRef: vue.computed(() => {
-        const { zoom, center, minZoom, maxZoom } = props;
+        const { zoom, center, heading, minZoom, maxZoom, enableScrollWheelZoom, enableDragging, tilt, enableTilt, mapType, enableAutoResize, enableTiltGestures, enableRotate, enableRotateGestures, displayOptions } = props;
         return {
-          zoom: zoom ?? NConfigProvider?.mergedMapSetRef.value?.zoom,
-          center: center ?? NConfigProvider?.mergedMapSetRef.value?.center,
-          minZoom: minZoom ?? NConfigProvider?.mergedMapSetRef.value?.minZoom,
-          maxZoom: maxZoom ?? NConfigProvider?.mergedMapSetRef.value?.maxZoom
+          zoom: zoom ?? BConfigProvider?.mergedMapSetRef.value?.zoom,
+          center: center ?? BConfigProvider?.mergedMapSetRef.value?.center,
+          heading: heading ?? BConfigProvider?.mergedMapSetRef.value?.heading,
+          minZoom: minZoom ?? BConfigProvider?.mergedMapSetRef.value?.minZoom,
+          maxZoom: maxZoom ?? BConfigProvider?.mergedMapSetRef.value?.maxZoom,
+          enableScrollWheelZoom: enableScrollWheelZoom ?? BConfigProvider?.mergedMapSetRef.value?.enableScrollWheelZoom,
+          enableDragging: enableDragging ?? BConfigProvider?.mergedMapSetRef.value?.enableDragging,
+          tilt: tilt ?? BConfigProvider?.mergedMapSetRef.value?.tilt,
+          enableTilt: enableTilt ?? BConfigProvider?.mergedMapSetRef.value?.enableTilt,
+          mapType: mapType ?? BConfigProvider?.mergedMapSetRef.value?.mapType,
+          enableAutoResize: enableAutoResize ?? BConfigProvider?.mergedMapSetRef.value?.enableAutoResize,
+          enableTiltGestures: enableTiltGestures ?? BConfigProvider?.mergedMapSetRef.value?.enableTiltGestures,
+          enableRotate: enableRotate ?? BConfigProvider?.mergedMapSetRef.value?.enableRotate,
+          enableRotateGestures: enableRotateGestures ?? BConfigProvider?.mergedMapSetRef.value?.enableRotateGestures,
+          displayOptions: displayOptions ?? BConfigProvider?.mergedMapSetRef.value?.displayOptions
         };
       })
     };
   }
 
+  const mapInjectionKey = /* @__PURE__ */ Symbol("b-map");
+
   const mapProps = {
     maxZoom: {
       type: Number,
@@ -126,6 +159,10 @@
       type: Number,
       default: 0
     },
+    heading: {
+      type: Number,
+      default: 0
+    },
     center: {
       type: Object,
       default: [116.403901, 39.915185]
@@ -135,10 +172,47 @@
       default: 14
     },
     class: String,
+    contentClass: String,
     enableScrollWheelZoom: {
       type: Boolean,
       default: false
-    }
+    },
+    enableDragging: {
+      type: Boolean,
+      default: true
+    },
+    tilt: {
+      type: Number,
+      default: 0
+    },
+    enableTilt: {
+      type: Boolean,
+      default: false
+    },
+    mapType: {
+      type: String,
+      default: "BMAP_NORMAL_MAP"
+    },
+    enableAutoResize: {
+      type: Boolean,
+      default: true
+    },
+    enableTiltGestures: {
+      type: Boolean,
+      default: false
+    },
+    enableRotate: {
+      type: Boolean,
+      default: false
+    },
+    enableRotateGestures: {
+      type: Boolean,
+      default: false
+    },
+    displayOptions: {
+      type: Object
+    },
+    onInitd: Function
   };
 
   function styleInject(css, ref) {
@@ -168,8 +242,8 @@
     }
   }
 
-  var css_248z = ".map-module_b-map-content__sMaJG{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 styles = {"b-map-content":"map-module_b-map-content__sMaJG","b-map-loading":"map-module_b-map-loading__qc4a8","b-map-failed":"map-module_b-map-failed__-w-tX"};
+  var css_248z = ".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 styles = {"b-map":"map-module_b-map__29r3m","b-map-content":"map-module_b-map-content__sMaJG","b-map-loading":"map-module_b-map-loading__qc4a8","b-map-failed":"map-module_b-map-failed__-w-tX"};
   styleInject(css_248z);
 
   var map = /* @__PURE__ */ vue.defineComponent({
@@ -185,63 +259,391 @@
       } = useConfig(props);
       const contentRef = vue.ref();
       let map = null;
+      const initd = vue.ref(false);
+      vue.provide(mapInjectionKey, {
+        mapInstance: () => map
+      });
       const setCenterAndZoom = (center) => {
         if (typeof center === "string") {
-          map.centerAndZoom(center, mergedMapSetRef.value.zoom);
+          map?.centerAndZoom(center, mergedMapSetRef.value.zoom);
         } else if (Array.isArray(center)) {
-          map.centerAndZoom(new BMapGL.Point(center[0], center[1]), mergedMapSetRef.value.zoom);
+          map?.centerAndZoom(new BMapGL.Point(center[0], center[1]), mergedMapSetRef.value.zoom);
         } else {
-          map.centerAndZoom(new BMapGL.Point(center.lng, center.lat), mergedMapSetRef.value.zoom);
+          map?.centerAndZoom(center, mergedMapSetRef.value.zoom);
         }
       };
       const setScrollWheelZoom = (enableScrollWheelZoom) => {
         enableScrollWheelZoom ? map.enableScrollWheelZoom() : map.disableScrollWheelZoom();
       };
-      const init = () => {
+      const setDisplayOptions = (displayOptions) => {
+        map?.setDisplayOptions(displayOptions || {});
+      };
+      const setTilt = (tilt) => {
+        map?.setTilt(tilt ?? 0);
+      };
+      const setHeading = (heading) => {
+        map?.setHeading(heading ?? 0);
+      };
+      const setDragging = (enableDragging) => {
+        enableDragging ? map.enableDragging() : map.disableDragging();
+      };
+      const setMapType = (mapType) => {
+        window[mapType] !== void 0 && map.setMapType(window[mapType]);
+      };
+      const initMapOptions = () => {
         const {
           center,
-          maxZoom,
-          minZoom,
-          enableScrollWheelZoom
+          heading,
+          enableScrollWheelZoom,
+          tilt,
+          enableDragging
         } = mergedMapSetRef.value;
-        map = new BMapGL.Map(contentRef.value, {
-          maxZoom,
-          minZoom
-        });
+        setHeading(heading);
         setCenterAndZoom(center);
         setScrollWheelZoom(enableScrollWheelZoom);
+        setTilt(tilt);
+        setDragging(enableDragging);
       };
       const startWatchProps = () => {
         vue.watch(() => mergedMapSetRef.value.center, setCenterAndZoom, {
           deep: true
         });
         vue.watch(() => mergedMapSetRef.value.enableScrollWheelZoom, setScrollWheelZoom);
+        vue.watch(() => mergedMapSetRef.value.displayOptions, setDisplayOptions);
+        vue.watch(() => mergedMapSetRef.value.tilt, setTilt);
+        vue.watch(() => mergedMapSetRef.value.heading, setHeading);
+        vue.watch(() => mergedMapSetRef.value.enableDragging, setDragging);
+        vue.watch(() => mergedMapSetRef.value.mapType, setMapType);
+      };
+      const init = () => {
+        const {
+          maxZoom,
+          minZoom,
+          enableTilt,
+          mapType,
+          enableAutoResize,
+          enableTiltGestures,
+          enableRotate,
+          enableRotateGestures,
+          displayOptions
+        } = mergedMapSetRef.value;
+        map = new BMapGL.Map(contentRef.value, {
+          maxZoom,
+          minZoom,
+          enableTilt,
+          mapType: window[mapType],
+          enableAutoResize,
+          enableTiltGestures,
+          enableRotate,
+          enableRotateGestures,
+          displayOptions
+        });
+        const {
+          onInitd
+        } = props;
+        initMapOptions();
+        startWatchProps();
+        onInitd?.({
+          map
+        });
+        initd.value = true;
       };
       vue.onMounted(() => {
         vue.watchEffect(() => {
-          if (mergedStatusRef?.value === "loaded" && !map) {
+          if (mergedStatusRef?.value === "loaded" && !initd.value) {
             vue.nextTick(init);
-            startWatchProps();
           }
         });
       });
       vue.onUnmounted(() => {
         if (map) {
           try {
-            map.destroy();
+            map?.destroy();
           } catch (error) {
             console.error(`[Vue3 BMapGL]: ${error.message}`);
           }
         }
       });
       return () => vue.createVNode("div", {
+        "class": [[styles["b-map"]], props.class]
+      }, [vue.createVNode("div", {
         "ref": contentRef,
-        "class": [styles["b-map-content"], props.class]
+        "class": [styles["b-map-content"], props.contentClass]
       }, [mergedStatusRef?.value === "pending" && resolveWrappedSlot(slots.loading, () => vue.createVNode("div", {
         "class": [styles["b-map-loading"]]
       }, [vue.createTextVNode("map loading...")])), mergedStatusRef?.value === "failed" && resolveWrappedSlot(slots.failed, () => vue.createVNode("div", {
         "class": [styles["b-map-failed"]]
-      }, [vue.createTextVNode("map failed")])), slots.default?.()]);
+      }, [vue.createTextVNode("map failed")]))]), initd.value && slots.default?.()]);
+    }
+  });
+
+  function useMapInstance() {
+    const BMap = vue.inject(mapInjectionKey, null);
+    return BMap.mapInstance;
+  }
+
+  const xyzLayerProps = {
+    visible: {
+      type: Boolean,
+      default: true
+    },
+    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
+    }
+  };
+
+  var xyz = /* @__PURE__ */ vue.defineComponent({
+    name: "XyzLayer",
+    props: xyzLayerProps,
+    setup(props) {
+      const mapInstance = useMapInstance();
+      let layer = null;
+      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 {
+          zIndex,
+          zIndexTop
+        } = props;
+        setZIndex(zIndex);
+        setZIndexTop(zIndexTop);
+      };
+      const startWatchProps = () => {
+        vue.watch(() => props.zIndex, setZIndex);
+        vue.watch(() => props.boundary, setBoundary);
+      };
+      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);
+          }
+        }
+        startWatchProps();
+      };
+      init();
+      vue.onUnmounted(() => {
+        if (layer) {
+          mapInstance().removeTileLayer(layer);
+        }
+      });
+      return () => vue.createVNode(vue.Fragment, null, null);
+    }
+  });
+
+  const polygonProps = {
+    visible: {
+      type: Boolean,
+      default: true
+    },
+    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: 0.3
+    },
+    strokeStyle: {
+      type: String,
+      default: "solid"
+    },
+    enableMassClear: {
+      type: Boolean,
+      default: true
+    },
+    enableEditing: {
+      type: Boolean,
+      default: false
+    },
+    isBoundary: {
+      type: Boolean
+    },
+    enableClicking: {
+      type: Boolean,
+      default: true
+    }
+  };
+
+  var polygon = /* @__PURE__ */ vue.defineComponent({
+    name: "Polygon",
+    props: polygonProps,
+    setup: (props) => {
+      const mapInstance = useMapInstance();
+      let overlay = null;
+      const setStrokeColor = (color) => {
+        overlay && overlay.setStrokeColor(color);
+      };
+      const startWatchProps = () => {
+        vue.watch(() => props.strokeColor, setStrokeColor);
+        vue.watch(() => props.visible, (n) => {
+          mapInstance()[n ? "addOverlay" : "removeOverlay"](overlay);
+        });
+      };
+      const init = () => {
+        const {
+          points,
+          visible,
+          strokeColor,
+          fillColor,
+          strokeWeight,
+          strokeOpacity,
+          fillOpacity,
+          strokeStyle,
+          enableMassClear,
+          enableEditing,
+          enableClicking
+        } = props;
+        if (!points || !points.length) {
+          return;
+        }
+        overlay = new BMapGL.Polygon(listToMapPoints(points), {
+          strokeColor,
+          fillColor,
+          strokeWeight,
+          strokeOpacity,
+          fillOpacity,
+          strokeStyle,
+          enableMassClear,
+          enableEditing,
+          enableClicking
+        });
+        visible && mapInstance().addOverlay(overlay);
+        startWatchProps();
+      };
+      init();
+      vue.onUnmounted(() => {
+        if (overlay) {
+          mapInstance().removeOverlay(overlay);
+        }
+      });
+      return () => vue.createVNode(vue.Fragment, null, null);
+    }
+  });
+
+  var sector = /* @__PURE__ */ vue.defineComponent({
+    name: "Sector",
+    setup: () => {
+      return () => vue.createVNode(vue.Fragment, null, null);
     }
   });
 
@@ -281,9 +683,16 @@
 
   exports.BConfigProvider = configProvider;
   exports.BMap = map;
+  exports.BPolygon = polygon;
+  exports.BSector = sector;
+  exports.BTileLayer = tile;
+  exports.BXyzLayer = xyz;
   exports.configProviderInjectionKey = configProviderInjectionKey;
   exports.configProviderProps = configProviderProps;
   exports.create = create;
+  exports.mapInjectionKey = mapInjectionKey;
   exports.mapProps = mapProps;
+  exports.polygonProps = polygonProps;
+  exports.xyzLayerProps = xyzLayerProps;
 
 }));

package/dist/index.prod.js

@@ -1 +1 @@
-!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],o):o((e="undefined"!=typeof globalThis?globalThis:e||self).Vue3Bmapgl={},e.vue)}(this,function(e,o){"use strict";let t=!1;function n(e){return e.some(e=>!o.isVNode(e)||e.type!==Comment&&!(e.type===o.Fragment&&!n(e.children)))?e:null}function a(e,o){return o(e&&n(e())||null)}const r={ak:String,apiUrl:String,plugins:Array,mapConfig:Object},l=Symbol("b-config-provider");var i=o.defineComponent({name:"ConfigProvider",props:r,setup(e,{slots:n}){const a=o.ref("notload"),r=e.apiUrl?"_initBMap_":`_initBMap_${e.ak}`,i=e.apiUrl?`${e.apiUrl.replace(/&$/,"")}&callback=${r}`:`//api.map.baidu.com/api?type=webgl&v=1.0&ak=${e.ak}&callback=${r}`;a.value="pending",function(e){const{key:o,src:n,addCalToWindow:a=!0,timeout:r=1e4}=e;return t&&window.BMapGL?Promise.resolve():new Promise((e,l)=>{const i=document.createElement("script");i.src=n,i.type="text/javascript",i.defer=!0;const d=()=>{i.onload=null,i.onerror=null,document.body.contains(i)&&document.body.removeChild(i)},m=setTimeout(()=>{d(),l(new Error(`Script load timeout: ${n}`))},r),c=()=>{clearTimeout(m),t=!0,d(),e()};a?window[o]=c:i.onload=c,i.onerror=()=>{clearTimeout(m),d(),l(new Error(`Failed to load script: ${n}`))},document.body.appendChild(i)})}({key:r,src:i}).then(()=>{a.value="loaded"}).catch(()=>{a.value="failed"});const d=o.computed(()=>{const{mapConfig:o}=e;return o??{}});return o.provide(l,{mergedStatusRef:a,mergedMapSetRef:d}),()=>o.renderSlot(n,"default")}});const d={maxZoom:{type:Number,default:21},minZoom:{type:Number,default:0},center:{type:Object,default:[116.403901,39.915185]},zoom:{type:Number,default:14},class:String,enableScrollWheelZoom:{type:Boolean,default:!1}};var m="map-module_b-map-content__sMaJG",c="map-module_b-map-loading__qc4a8",p="map-module_b-map-failed__-w-tX";!function(e,o){void 0===o&&(o={});var t=o.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}(".map-module_b-map-content__sMaJG{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 u=o.defineComponent({name:"Map",props:d,slots:Object,setup(e,{slots:t}){const{mergedMapSetRef:n,mergedStatusRef:r}=function(e={}){const t=o.inject(l,null);return{mergedStatusRef:t?.mergedStatusRef,mergedMapSetRef:o.computed(()=>{const{zoom:o,center:n,minZoom:a,maxZoom:r}=e;return{zoom:o??t?.mergedMapSetRef.value?.zoom,center:n??t?.mergedMapSetRef.value?.center,minZoom:a??t?.mergedMapSetRef.value?.minZoom,maxZoom:r??t?.mergedMapSetRef.value?.maxZoom}})}}(e),i=o.ref();let d=null;const u=e=>{"string"==typeof e?d.centerAndZoom(e,n.value.zoom):Array.isArray(e)?d.centerAndZoom(new BMapGL.Point(e[0],e[1]),n.value.zoom):d.centerAndZoom(new BMapGL.Point(e.lng,e.lat),n.value.zoom)},s=e=>{e?d.enableScrollWheelZoom():d.disableScrollWheelZoom()},f=()=>{const{center:e,maxZoom:o,minZoom:t,enableScrollWheelZoom:a}=n.value;d=new BMapGL.Map(i.value,{maxZoom:o,minZoom:t}),u(e),s(a)};return o.onMounted(()=>{o.watchEffect(()=>{"loaded"!==r?.value||d||(o.nextTick(f),o.watch(()=>n.value.center,u,{deep:!0}),o.watch(()=>n.value.enableScrollWheelZoom,s))})}),o.onUnmounted(()=>{if(d)try{d.destroy()}catch(e){console.error(`[Vue3 BMapGL]: ${e.message}`)}}),()=>o.createVNode("div",{ref:i,class:[m,e.class]},["pending"===r?.value&&a(t.loading,()=>o.createVNode("div",{class:[c]},[o.createTextVNode("map loading...")])),"failed"===r?.value&&a(t.failed,()=>o.createVNode("div",{class:[p]},[o.createTextVNode("map failed")])),t.default?.()])}});e.BConfigProvider=i,e.BMap=u,e.configProviderInjectionKey=l,e.configProviderProps=r,e.create=function({componentPrefix:e="B",components:o=[]}={}){const t=[];function n(o,t,n){o.component(e+t)||o.component(e+t,n)}return{componentPrefix:e,install:function(e){t.includes(e)||(t.push(e),o.forEach(o=>{const{name:t,alias:a}=o;n(e,t,o),a&&a.forEach(t=>{n(e,t,o)})}))}}},e.mapProps=d});
+!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/_mixins/index.d.ts

@@ -1 +1,2 @@
 export { default as useConfig } from './use-config';
+export { default as useMapInstance } from './use-map-instance';

package/es/_mixins/index.mjs

@@ -1,2 +1,3 @@
 export { default as useConfig } from './use-config.mjs';
+export { default as useMapInstance } from './use-map-instance.mjs';
 //# sourceMappingURL=index.mjs.map

package/es/_mixins/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/es/_mixins/use-config.mjs

@@ -2,17 +2,28 @@ import { inject, computed } from 'vue';
 import { configProviderInjectionKey } from '../config-provider/src/constants.mjs';
 
 function useConfig(props = {}) {
-  const NConfigProvider = inject(configProviderInjectionKey, null);
+  const BConfigProvider = inject(configProviderInjectionKey, null);
   return {
-    mergedStatusRef: NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedStatusRef,
+    mergedStatusRef: BConfigProvider === null || BConfigProvider === void 0 ? void 0 : BConfigProvider.mergedStatusRef,
     mergedMapSetRef: computed(() => {
-      var _a, _b, _c, _d;
-      const { zoom, center, minZoom, maxZoom } = props;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+      const { zoom, center, heading, minZoom, maxZoom, enableScrollWheelZoom, enableDragging, tilt, enableTilt, mapType, enableAutoResize, enableTiltGestures, enableRotate, enableRotateGestures, displayOptions } = props;
       return {
-        zoom: zoom !== null && zoom !== void 0 ? zoom : (_a = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedMapSetRef.value) === null || _a === void 0 ? void 0 : _a.zoom,
-        center: center !== null && center !== void 0 ? center : (_b = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedMapSetRef.value) === null || _b === void 0 ? void 0 : _b.center,
-        minZoom: minZoom !== null && minZoom !== void 0 ? minZoom : (_c = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedMapSetRef.value) === null || _c === void 0 ? void 0 : _c.minZoom,
-        maxZoom: maxZoom !== null && maxZoom !== void 0 ? maxZoom : (_d = NConfigProvider === null || NConfigProvider === void 0 ? void 0 : NConfigProvider.mergedMapSetRef.value) === null || _d === void 0 ? void 0 : _d.maxZoom
+        zoom: zoom !== null && zoom !== void 0 ? zoom : (_a = BConfigProvider === null || BConfigProvider === void 0 ? void 0 : BConfigProvider.mergedMapSetRef.value) === null || _a === void 0 ? void 0 : _a.zoom,
+        center: center !== null && center !== void 0 ? center : (_b = BConfigProvider === null || BConfigProvider === void 0 ? void 0 : BConfigProvider.mergedMapSetRef.value) === null || _b === void 0 ? void 0 : _b.center,
+        heading: heading !== null && heading !== void 0 ? heading : (_c = BConfigProvider === null || BConfigProvider === void 0 ? void 0 : BConfigProvider.mergedMapSetRef.value) === null || _c === void 0 ? void 0 : _c.heading,
+        minZoom: minZoom !== null && minZoom !== void 0 ? minZoom : (_d = BConfigProvider === null || BConfigProvider === void 0 ? void 0 : BConfigProvider.mergedMapSetRef.value) === null || _d === void 0 ? void 0 : _d.minZoom,
+        maxZoom: maxZoom !== null && maxZoom !== void 0 ? maxZoom : (_e = BConfigProvider === null || BConfigProvider === void 0 ? void 0 : BConfigProvider.mergedMapSetRef.value) === null || _e === void 0 ? void 0 : _e.maxZoom,
+        enableScrollWheelZoom: enableScrollWheelZoom !== null && enableScrollWheelZoom !== void 0 ? enableScrollWheelZoom : (_f = BConfigProvider === null || BConfigProvider === void 0 ? void 0 : BConfigProvider.mergedMapSetRef.value) === null || _f === void 0 ? void 0 : _f.enableScrollWheelZoom,
+        enableDragging: enableDragging !== null && enableDragging !== void 0 ? enableDragging : (_g = BConfigProvider === null || BConfigProvider === void 0 ? void 0 : BConfigProvider.mergedMapSetRef.value) === null || _g === void 0 ? void 0 : _g.enableDragging,
+        tilt: tilt !== null && tilt !== void 0 ? tilt : (_h = BConfigProvider === null || BConfigProvider === void 0 ? void 0 : BConfigProvider.mergedMapSetRef.value) === null || _h === void 0 ? void 0 : _h.tilt,
+        enableTilt: enableTilt !== null && enableTilt !== void 0 ? enableTilt : (_j = BConfigProvider === null || BConfigProvider === void 0 ? void 0 : BConfigProvider.mergedMapSetRef.value) === null || _j === void 0 ? void 0 : _j.enableTilt,
+        mapType: mapType !== null && mapType !== void 0 ? mapType : (_k = BConfigProvider === null || BConfigProvider === void 0 ? void 0 : BConfigProvider.mergedMapSetRef.value) === null || _k === void 0 ? void 0 : _k.mapType,
+        enableAutoResize: enableAutoResize !== null && enableAutoResize !== void 0 ? enableAutoResize : (_l = BConfigProvider === null || BConfigProvider === void 0 ? void 0 : BConfigProvider.mergedMapSetRef.value) === null || _l === void 0 ? void 0 : _l.enableAutoResize,
+        enableTiltGestures: enableTiltGestures !== null && enableTiltGestures !== void 0 ? enableTiltGestures : (_m = BConfigProvider === null || BConfigProvider === void 0 ? void 0 : BConfigProvider.mergedMapSetRef.value) === null || _m === void 0 ? void 0 : _m.enableTiltGestures,
+        enableRotate: enableRotate !== null && enableRotate !== void 0 ? enableRotate : (_o = BConfigProvider === null || BConfigProvider === void 0 ? void 0 : BConfigProvider.mergedMapSetRef.value) === null || _o === void 0 ? void 0 : _o.enableRotate,
+        enableRotateGestures: enableRotateGestures !== null && enableRotateGestures !== void 0 ? enableRotateGestures : (_p = BConfigProvider === null || BConfigProvider === void 0 ? void 0 : BConfigProvider.mergedMapSetRef.value) === null || _p === void 0 ? void 0 : _p.enableRotateGestures,
+        displayOptions: displayOptions !== null && displayOptions !== void 0 ? displayOptions : (_q = BConfigProvider === null || BConfigProvider === void 0 ? void 0 : BConfigProvider.mergedMapSetRef.value) === null || _q === void 0 ? void 0 : _q.displayOptions
       };
     })
   };