mrxy-yk 1.5.0 → 1.6.0-beta.2

package/dist/components/coordinate-pickup/CoordinatePickup.vue.js

@@ -1,7 +1,7 @@
 import { ElDialog, ElForm, ElFormItem, ElAutocomplete, ElInput, ElButton, ElCheckbox } from "element-plus/es";
-import { defineComponent, onMounted, watch, nextTick, computed, ref, onUnmounted, openBlock, createBlock, withCtx, createVNode, createElementVNode, toDisplayString, createElementBlock, createCommentVNode, createTextVNode } from "vue";
+import { defineComponent, onMounted, watch, nextTick, computed, ref, shallowRef, onUnmounted, openBlock, createBlock, withCtx, createVNode, createElementVNode, toDisplayString, createElementBlock, createCommentVNode, createTextVNode } from "vue";
 import { ElMessage } from "element-plus";
-import { AMapLoader } from "../../utils/amap/index.js";
+import { useAMapClassicHook } from "../../utils/amap/index.js";
 import { AMapConfig } from "../../config/index.js";
 const _hoisted_1 = { class: "autocomplete-subtitle" };
 const _hoisted_2 = { key: 0 };
@@ -30,14 +30,14 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     const mapKey = props.mapKey || AMapConfig.mapKey;
     const mapSecret = props.mapSecret || AMapConfig.mapSecret;
     watch(() => props.modelValue, (nv) => {
-      if (nv && !map) {
+      if (nv && !aMapHook.value.map) {
         nextTick(() => {
           loadAMap();
         });
       } else {
         placeSearch.clear();
         showMarker(props.lnglat, props.address);
-        emits("open", map);
+        emits("open", aMapHook.value.map);
       }
     });
     const changeDialogCustomer = computed({
@@ -63,28 +63,27 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       emits("update:address", pickupForm.value.address);
       emits("update:modelValue", false);
     };
-    let AMap = null;
-    let map = null;
-    const coordinatePickupRef = ref();
-    function loadAMap() {
-      AMapLoader({
+    const coordinatePickupRef = shallowRef();
+    const aMapHook = useAMapClassicHook({
+      el: coordinatePickupRef,
+      mapStyle: props.mapStyle,
+      loaderOptions: {
         key: mapKey,
         secret: mapSecret,
-        el: coordinatePickupRef.value,
-        plugins: ["AMap.PlaceSearch", "AMap.AutoComplete", "AMap.Geocoder"],
-        mapStyle: props.mapStyle
-      }).then((res) => {
-        AMap = res.AMap;
-        map = res.map;
-        satelliteLayer = new AMap["TileLayer"].Satellite();
-        map.on("click", clickHandler);
-        autoComplete = new AMap["Autocomplete"]({ city: "全国" });
-        placeSearch = new AMap["PlaceSearch"]({ map, city: "全国", autoFitView: true });
-        placeSearch.on("markerClick", placeMarkerClick);
-        geocoder = new AMap["Geocoder"]();
-        showMarker(props.lnglat, props.address);
-        emits("open", { map, AMap });
-      });
+        plugins: ["AMap.PlaceSearch", "AMap.AutoComplete", "AMap.Geocoder"]
+      }
+    }, loadAMap);
+    function loadAMap() {
+      const AMap = aMapHook.value.AMap;
+      const map = aMapHook.value.map;
+      satelliteLayer = new AMap["TileLayer"].Satellite();
+      map.on("click", clickHandler);
+      autoComplete = new AMap["Autocomplete"]({ city: "全国" });
+      placeSearch = new AMap["PlaceSearch"]({ map, city: "全国", autoFitView: true });
+      placeSearch.on("markerClick", placeMarkerClick);
+      geocoder = new AMap["Geocoder"]();
+      showMarker(props.lnglat, props.address);
+      emits("open", { map, AMap });
     }
     const clickHandler = async (e) => {
       const { lng, lat } = e.lnglat;
@@ -93,6 +92,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
       showMarker(lnglat, address);
     };
     onUnmounted(function() {
+      const map = aMapHook.value.map;
       if (map) {
         map.off("click", clickHandler);
         map.destroy();
@@ -166,6 +166,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     }
     let marker = null;
     function showMarker(lnglat, address) {
+      const { map, AMap } = aMapHook.value;
       if (lnglat) {
         const position = lnglat.split(",");
         if (marker) {
@@ -185,6 +186,7 @@ var _sfc_main = /* @__PURE__ */ defineComponent({
     let satelliteLayer = null;
     const isSatelliteLayer = ref(false);
     function setSatelliteLayer() {
+      const { map } = aMapHook.value;
       if (isSatelliteLayer.value) {
         map.add(satelliteLayer);
       } else {

package/dist/index.js

@@ -9,7 +9,7 @@ import { useEmptyHooks } from "./components/empty/hooks/index.js";
 import { MatchUnit } from "./utils/match-unit/index.js";
 import { TransitionFade } from "./utils/transition-fade/index.js";
 import { echarts } from "./utils/echarts/index.js";
-import { AMapLoader, newAMapInfoWindow, newAMapMap, newAMapMarkerCluster, useAMapLoader } from "./utils/amap/index.js";
+import { newAMapInfoWindow, newAMapMap, newAMapMarkerCluster, useAMapClassicHook, useAMapLoader } from "./utils/amap/index.js";
 import { StorageUtil } from "./utils/storage/index.js";
 import { Pages } from "./entity/Pages.js";
 import { BigFloat } from "./entity/BigFloat.js";
@@ -49,7 +49,6 @@ var index = {
   }
 };
 export {
-  AMapLoader,
   AMapUtil,
   ArrayUtil,
   BigFloat,
@@ -105,6 +104,7 @@ export {
   positiveNumberRule,
   positiveNumberTag,
   required,
+  useAMapClassicHook,
   useAMapLoader,
   useEChartsRef,
   useEcBarOption,

package/dist/utils/amap/index.d.ts

@@ -1,4 +1,4 @@
-import { AMapClassProxy, LoaderOptions, LoaderOptions1, AMapResolve } from './type';
+import { AMapClassProxy, LoaderOptions, UseAMapHookExample, UseAMapHookOptions } from './type';
 import { AMap } from './@type/index';
 import { TemplateRef, ShallowRef } from 'vue';
 export * from './utils';
@@ -35,4 +35,10 @@ export declare function newAMapMarkerCluster(options: {
  * @param AMap { AMap } AMap存在时可以传入跳过`setAMap`过程
  */
 export declare function newAMapInfoWindow(options: ConstructorParameters<typeof AMap.InfoWindow>[0], AMap?: AMap): AMapClassProxy<AMap.InfoWindow>;
-export declare function AMapLoader(options: LoaderOptions1): Promise<AMapResolve>;
+/**
+ * 常用高德地图配套功能包含地图（Map），聚合标记点（MarkerCluster），信息窗口（InfoWindow）
+ * 返回的hook实例需要在onMounted之后才能使用
+ * @param options
+ * @param callback
+ */
+export declare function useAMapClassicHook(options: UseAMapHookOptions, callback?: (res: ShallowRef<UseAMapHookExample>) => void): ShallowRef<UseAMapHookExample>;

package/dist/utils/amap/index.js

@@ -1,11 +1,11 @@
-import _AMapLoader from "@amap/amap-jsapi-loader";
+import AMapLoader from "@amap/amap-jsapi-loader";
 import { AMapConfig } from "../../config/index.js";
-import { toValue } from "vue";
+import { shallowRef, onMounted, useTemplateRef, onBeforeUnmount, toValue } from "vue";
 async function useAMapLoader(options) {
   const o = options || {};
   const win = window;
   win._AMapSecurityConfig = { securityJsCode: o.secret || AMapConfig.mapSecret };
-  return await _AMapLoader.load({
+  return await AMapLoader.load({
     key: o.key || AMapConfig.mapKey,
     version: "2.0",
     plugins: o.plugins,
@@ -62,26 +62,56 @@ function newAMapInfoWindow(options, AMap) {
     return new AMap2.InfoWindow(o);
   }, AMap);
 }
-async function AMapLoader(options) {
+function useAMapClassicHook(options, callback) {
   const o = options;
-  const win = window;
-  win._AMapSecurityConfig = { securityJsCode: o.secret || AMapConfig.mapSecret };
-  const aMap = await _AMapLoader.load({
-    key: o.key || AMapConfig.mapKey,
-    version: "2.0",
-    plugins: o.plugins,
-    ...o.loadOption
+  const retRes = shallowRef({});
+  let map = null;
+  onMounted(async () => {
+    const AMap = await useAMapLoader({
+      plugins: o.plugins,
+      ...o?.loaderOptions
+    });
+    let elRef = shallowRef();
+    if (typeof o.el === "string") {
+      elRef = useTemplateRef(o.el);
+    } else if (o.el) {
+      elRef = o.el;
+    }
+    map = newAMapMap({
+      el: elRef.value,
+      mapStyle: o.mapStyle,
+      opts: o.mapOpts
+    }, AMap);
+    map.destroy();
+    const markerCluster = newAMapMarkerCluster({
+      map,
+      markerClusterOptions: Object.assign({
+        renderMarker: o.renderMarker,
+        renderClusterMarker: o.renderClusterMarker
+      }, o.markerClusterOpts)
+    }, AMap);
+    const infoWindow = newAMapInfoWindow({
+      isCustom: true,
+      content: o.infoWindowContent?.value || void 0,
+      ...o?.infoWindowOpts
+    }, AMap);
+    retRes.value = {
+      map,
+      markerCluster,
+      infoWindow,
+      AMap
+    };
+    callback?.(retRes);
   });
-  const map = new aMap.Map(o.el, {
-    mapStyle: o.mapStyle,
-    ...o.mapOption
+  onBeforeUnmount(() => {
+    map.destroy();
   });
-  return { AMap: aMap, map };
+  return retRes;
 }
 export {
-  AMapLoader,
   newAMapInfoWindow,
   newAMapMap,
   newAMapMarkerCluster,
+  useAMapClassicHook,
   useAMapLoader
 };

package/dist/utils/amap/type.d.ts

@@ -2,7 +2,7 @@ import { AMap, AMapType } from './@type/AMap';
 import { LoadOption } from './@type';
 import { MapOptions } from './@type/Map';
 import { RenderMarkerCallbackParams } from './@type/MarkerCluster';
-type PluginsType = 'AMap.MarkerCluster' | 'AMap.Weather' | string
+type PluginsType = 'AMap.MarkerCluster' | 'AMap.Weather' | 'AMap.AutoComplete' | 'AMap.Geocoder' | string
 
 export type LoaderOptions = {
   // key 高德地图key（缺省使用全局配置）
@@ -19,13 +19,20 @@ export type AMapClassProxy<T> = T & { setAMap (AMap: AMap): void }
 
 // region useAMapHook
 export type UseAMapHookOptions = {
-  el: ShallowRef<HTMLDivElement>
+  // 加载选项
+  plugins?: PluginsType[]
+  loaderOptions?: LoaderOptions
+  // 地图
+  el: ShallowRef<HTMLDivElement> | string
   mapStyle?: string
+  mapOpts?: ConstructorParameters<typeof AMap.Map>[1]
+  // 聚合标记
   renderMarker? (e: RenderMarkerCallbackParams): void
   renderClusterMarker? (count: number, marker: AMap.Marker): void
-  infoWindowContent: ShallowRef<HTMLDivElement>
-  mapOpts?: ConstructorParameters<typeof AMap.Map>[1]
   markerClusterOpts?: ConstructorParameters<typeof AMap.MarkerCluster>[2]
+  // 信息窗体
+  infoWindowContent?: ShallowRef<HTMLDivElement>
+  infoWindowOpts?: ConstructorParameters<typeof AMap.InfoWindow>[0]
 }
 
 export type UseAMapHookExample = {
@@ -35,22 +42,3 @@ export type UseAMapHookExample = {
   AMap: AMap
 }
 // endregion
-
-export type LoaderOptions1 = {
-  // key 高德地图key（缺省使用全局配置）
-  key?: string,
-  // secret 高德地图secret（缺省使用全局配置）
-  secret?: string,
-  // el 地图容器元素
-  el: HTMLDivElement,
-  // plugins 插件列表
-  plugins?: string[],
-  // mapStyle 地图样式
-  mapStyle?: string,
-  // loadOption 加载选项
-  loadOption?: LoadOption,
-  // mapOption 地图选项
-  mapOption?: MapOptions
-}
-
-export type AMapResolve = { AMap: AMapType, map: AMap.Map }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mrxy-yk",
-  "version": "1.5.0",
+  "version": "1.6.0-beta.2",
   "private": false,
   "type": "module",
   "description": "A collection of Vue 3 components and utilities",