jky-component-lib 0.0.145 → 0.0.146

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -17,13 +17,14 @@ var __spreadValues = (a, b) => {
17
17
  return a;
18
18
  };
19
19
  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
- import { defineComponent, useModel, inject, onMounted, watch, onUnmounted, renderSlot, mergeModels } from "vue";
20
+ import { defineComponent, useModel, inject, computed, ref, onMounted, watch, onUnmounted, renderSlot, mergeModels } from "vue";
21
21
  const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
22
22
  name: "JkyAClusterMarker",
23
23
  inheritAttrs: false
24
24
  }), {
25
25
  __name: "AClusterMarker",
26
26
  props: /* @__PURE__ */ mergeModels({
27
+ map: {},
27
28
  points: {},
28
29
  gridSize: { default: 60 },
29
30
  styles: {},
@@ -44,25 +45,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
44
45
  const props = __props;
45
46
  const emit = __emit;
46
47
  const modelValue = useModel(__props, "modelValue");
47
- const amapContext = inject("amapContext");
48
- let clusterInstance = null;
49
- let mapInstance = null;
48
+ const amapContext = inject("amapContext", null);
49
+ const mapInstance = computed(() => {
50
+ return props.map || (amapContext == null ? void 0 : amapContext.getMapInstance()) || null;
51
+ });
52
+ const clusterInstance = ref(null);
50
53
  onMounted(() => {
51
- if ((amapContext == null ? void 0 : amapContext.map) && props.enable) {
52
- initCluster(amapContext.map);
54
+ if (mapInstance.value && props.enable) {
55
+ initCluster();
53
56
  }
54
57
  });
55
- function initCluster(map) {
58
+ function initCluster() {
59
+ const map = mapInstance.value;
56
60
  if (!map || !window.AMap)
57
61
  return;
58
- mapInstance = map;
59
62
  if (!window.AMap.MarkerCluster) {
60
63
  console.warn("AMap.MarkerCluster 插件未加载,请先加载插件");
61
64
  return;
62
65
  }
63
- if (clusterInstance) {
64
- clusterInstance.setMap(null);
65
- clusterInstance = null;
66
+ if (clusterInstance.value) {
67
+ clusterInstance.value.setMap(null);
68
+ clusterInstance.value = null;
66
69
  }
67
70
  const points = preparePoints();
68
71
  const clusterOptions = {
@@ -71,7 +74,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
71
74
  minClusterSize: props.minClusterSize,
72
75
  averageCenter: props.averageCenter
73
76
  };
74
- if (props.styles && props.styles.length > 0) {
77
+ if (props.renderClusterMarker || props.renderMarker) {
78
+ clusterOptions.renderClusterMarker = props.renderClusterMarker;
79
+ clusterOptions.renderMarker = props.renderMarker;
80
+ } else if (props.styles && props.styles.length > 0) {
75
81
  clusterOptions.styles = props.styles.map((style) => ({
76
82
  url: style.url,
77
83
  size: style.size ? new window.AMap.Size(style.size[0], style.size[1]) : void 0,
@@ -80,23 +86,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
80
86
  textSize: style.textSize
81
87
  }));
82
88
  }
83
- if (props.renderClusterMarker) {
84
- clusterOptions.renderClusterMarker = props.renderClusterMarker;
85
- }
86
- if (props.renderMarker) {
87
- clusterOptions.renderMarker = props.renderMarker;
88
- }
89
- clusterInstance = new window.AMap.MarkerCluster(map, points, clusterOptions);
90
- clusterInstance.on("click", (cluster) => {
89
+ clusterInstance.value = new window.AMap.MarkerCluster(map, points, clusterOptions);
90
+ clusterInstance.value.on("click", (cluster) => {
91
91
  emit("click", cluster);
92
92
  });
93
- clusterInstance.on("mouseover", (cluster) => {
93
+ clusterInstance.value.on("mouseover", (cluster) => {
94
94
  emit("mouseover", cluster);
95
95
  });
96
- clusterInstance.on("mouseout", (cluster) => {
96
+ clusterInstance.value.on("mouseout", (cluster) => {
97
97
  emit("mouseout", cluster);
98
98
  });
99
- emit("ready", clusterInstance);
99
+ emit("ready", clusterInstance.value);
100
100
  }
101
101
  function preparePoints() {
102
102
  const points = props.points || modelValue.value || [];
@@ -107,81 +107,70 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
107
107
  }, point.data));
108
108
  }
109
109
  function updatePoints(newPoints) {
110
- if (!mapInstance)
110
+ if (!mapInstance.value)
111
111
  return;
112
112
  modelValue.value = newPoints;
113
- initCluster(mapInstance);
113
+ initCluster();
114
114
  }
115
115
  function clearClusters() {
116
- if (clusterInstance) {
117
- clusterInstance.setMap(null);
116
+ if (clusterInstance.value) {
117
+ clusterInstance.value.setMap(null);
118
118
  }
119
119
  }
120
120
  function destroy() {
121
- if (clusterInstance) {
122
- clusterInstance.setMap(null);
123
- clusterInstance = null;
121
+ if (clusterInstance.value) {
122
+ clusterInstance.value.setMap(null);
123
+ clusterInstance.value = null;
124
124
  }
125
125
  }
126
126
  __expose({
127
127
  updatePoints,
128
128
  clearClusters,
129
129
  destroy,
130
- getClusterInstance: () => clusterInstance
130
+ getClusterInstance: () => clusterInstance.value
131
131
  });
132
132
  watch(
133
133
  () => props.points,
134
134
  (newPoints) => {
135
- if (clusterInstance && newPoints) {
135
+ if (clusterInstance.value && newPoints) {
136
136
  updatePoints(newPoints);
137
137
  }
138
- },
139
- { deep: true }
138
+ console.warn("points 变化", newPoints);
139
+ }
140
+ // { deep: true },
140
141
  );
141
142
  watch(
142
143
  () => modelValue.value,
143
144
  (newValue) => {
144
- if (clusterInstance && newValue) {
145
+ if (clusterInstance.value && newValue) {
145
146
  updatePoints(newValue);
146
147
  }
147
- },
148
- { deep: true }
148
+ console.warn("modelValue 变化", newValue);
149
+ }
150
+ // { deep: true },
149
151
  );
150
152
  watch(
151
153
  () => props.gridSize,
152
154
  () => {
153
- if (mapInstance && props.enable) {
154
- initCluster(mapInstance);
155
+ if (mapInstance.value && props.enable) {
156
+ initCluster();
155
157
  }
158
+ console.warn("gridSize 变化", props.gridSize);
156
159
  }
157
160
  );
158
161
  watch(
159
162
  () => props.styles,
160
163
  () => {
161
- if (mapInstance && props.enable) {
162
- initCluster(mapInstance);
163
- }
164
- },
165
- { deep: true }
166
- );
167
- watch(
168
- () => props.renderClusterMarker,
169
- () => {
170
- if (mapInstance && props.enable) {
171
- initCluster(mapInstance);
172
- }
173
- }
174
- );
175
- watch(
176
- () => props.renderMarker,
177
- () => {
178
- if (mapInstance && props.enable) {
179
- initCluster(mapInstance);
164
+ if (mapInstance.value && props.enable) {
165
+ initCluster();
180
166
  }
167
+ console.warn("styles 变化", props.styles);
181
168
  }
169
+ // { deep: true },
182
170
  );
183
171
  onUnmounted(() => {
184
172
  destroy();
173
+ console.warn("组件卸载时清理聚合实例");
185
174
  });
186
175
  return (_ctx, _cache) => {
187
176
  return renderSlot(_ctx.$slots, "default");
@@ -1,7 +1,14 @@
1
+ /* AMap 高德地图组件样式 */
2
+ .jky-amap-container {
3
+ /* 地图容器样式 */
4
+ position: relative;
5
+ overflow: hidden;
1
6
 
2
- /* JkyAMarker 组件样式 - 参考高德官方示例 */
3
- .amap-icon img,
4
- .amap-marker-content img {
5
- width: 25px;
6
- height: 34px;
7
+ /* 隐藏高德地图的 logo 和版权信息(注意:商业使用请遵守高德地图条款) */
8
+ .amap-logo {
9
+ display: none !important;
10
+ }
11
+ .amap-copyright {
12
+ display: none !important;
13
+ }
7
14
  }
@@ -1,14 +1,7 @@
1
- /* AMap 高德地图组件样式 */
2
- .jky-amap-container {
3
- /* 地图容器样式 */
4
- position: relative;
5
- overflow: hidden;
6
1
 
7
- /* 隐藏高德地图的 logo 和版权信息(注意:商业使用请遵守高德地图条款) */
8
- .amap-logo {
9
- display: none !important;
10
- }
11
- .amap-copyright {
12
- display: none !important;
13
- }
2
+ /* JkyAMarker 组件样式 - 参考高德官方示例 */
3
+ .amap-icon img,
4
+ .amap-marker-content img {
5
+ width: 25px;
6
+ height: 34px;
14
7
  }
@@ -1,4 +1,4 @@
1
- const version = "0.0.145";
1
+ const version = "0.0.146";
2
2
  export {
3
3
  version
4
4
  };
@@ -26,6 +26,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValu
26
26
  }), {
27
27
  __name: "AClusterMarker",
28
28
  props: /* @__PURE__ */ vue.mergeModels({
29
+ map: {},
29
30
  points: {},
30
31
  gridSize: { default: 60 },
31
32
  styles: {},
@@ -46,25 +47,27 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValu
46
47
  const props = __props;
47
48
  const emit = __emit;
48
49
  const modelValue = vue.useModel(__props, "modelValue");
49
- const amapContext = vue.inject("amapContext");
50
- let clusterInstance = null;
51
- let mapInstance = null;
50
+ const amapContext = vue.inject("amapContext", null);
51
+ const mapInstance = vue.computed(() => {
52
+ return props.map || (amapContext == null ? void 0 : amapContext.getMapInstance()) || null;
53
+ });
54
+ const clusterInstance = vue.ref(null);
52
55
  vue.onMounted(() => {
53
- if ((amapContext == null ? void 0 : amapContext.map) && props.enable) {
54
- initCluster(amapContext.map);
56
+ if (mapInstance.value && props.enable) {
57
+ initCluster();
55
58
  }
56
59
  });
57
- function initCluster(map) {
60
+ function initCluster() {
61
+ const map = mapInstance.value;
58
62
  if (!map || !window.AMap)
59
63
  return;
60
- mapInstance = map;
61
64
  if (!window.AMap.MarkerCluster) {
62
65
  console.warn("AMap.MarkerCluster 插件未加载,请先加载插件");
63
66
  return;
64
67
  }
65
- if (clusterInstance) {
66
- clusterInstance.setMap(null);
67
- clusterInstance = null;
68
+ if (clusterInstance.value) {
69
+ clusterInstance.value.setMap(null);
70
+ clusterInstance.value = null;
68
71
  }
69
72
  const points = preparePoints();
70
73
  const clusterOptions = {
@@ -73,7 +76,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValu
73
76
  minClusterSize: props.minClusterSize,
74
77
  averageCenter: props.averageCenter
75
78
  };
76
- if (props.styles && props.styles.length > 0) {
79
+ if (props.renderClusterMarker || props.renderMarker) {
80
+ clusterOptions.renderClusterMarker = props.renderClusterMarker;
81
+ clusterOptions.renderMarker = props.renderMarker;
82
+ } else if (props.styles && props.styles.length > 0) {
77
83
  clusterOptions.styles = props.styles.map((style) => ({
78
84
  url: style.url,
79
85
  size: style.size ? new window.AMap.Size(style.size[0], style.size[1]) : void 0,
@@ -82,23 +88,17 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValu
82
88
  textSize: style.textSize
83
89
  }));
84
90
  }
85
- if (props.renderClusterMarker) {
86
- clusterOptions.renderClusterMarker = props.renderClusterMarker;
87
- }
88
- if (props.renderMarker) {
89
- clusterOptions.renderMarker = props.renderMarker;
90
- }
91
- clusterInstance = new window.AMap.MarkerCluster(map, points, clusterOptions);
92
- clusterInstance.on("click", (cluster) => {
91
+ clusterInstance.value = new window.AMap.MarkerCluster(map, points, clusterOptions);
92
+ clusterInstance.value.on("click", (cluster) => {
93
93
  emit("click", cluster);
94
94
  });
95
- clusterInstance.on("mouseover", (cluster) => {
95
+ clusterInstance.value.on("mouseover", (cluster) => {
96
96
  emit("mouseover", cluster);
97
97
  });
98
- clusterInstance.on("mouseout", (cluster) => {
98
+ clusterInstance.value.on("mouseout", (cluster) => {
99
99
  emit("mouseout", cluster);
100
100
  });
101
- emit("ready", clusterInstance);
101
+ emit("ready", clusterInstance.value);
102
102
  }
103
103
  function preparePoints() {
104
104
  const points = props.points || modelValue.value || [];
@@ -109,81 +109,70 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent(__spreadProps(__spreadValu
109
109
  }, point.data));
110
110
  }
111
111
  function updatePoints(newPoints) {
112
- if (!mapInstance)
112
+ if (!mapInstance.value)
113
113
  return;
114
114
  modelValue.value = newPoints;
115
- initCluster(mapInstance);
115
+ initCluster();
116
116
  }
117
117
  function clearClusters() {
118
- if (clusterInstance) {
119
- clusterInstance.setMap(null);
118
+ if (clusterInstance.value) {
119
+ clusterInstance.value.setMap(null);
120
120
  }
121
121
  }
122
122
  function destroy() {
123
- if (clusterInstance) {
124
- clusterInstance.setMap(null);
125
- clusterInstance = null;
123
+ if (clusterInstance.value) {
124
+ clusterInstance.value.setMap(null);
125
+ clusterInstance.value = null;
126
126
  }
127
127
  }
128
128
  __expose({
129
129
  updatePoints,
130
130
  clearClusters,
131
131
  destroy,
132
- getClusterInstance: () => clusterInstance
132
+ getClusterInstance: () => clusterInstance.value
133
133
  });
134
134
  vue.watch(
135
135
  () => props.points,
136
136
  (newPoints) => {
137
- if (clusterInstance && newPoints) {
137
+ if (clusterInstance.value && newPoints) {
138
138
  updatePoints(newPoints);
139
139
  }
140
- },
141
- { deep: true }
140
+ console.warn("points 变化", newPoints);
141
+ }
142
+ // { deep: true },
142
143
  );
143
144
  vue.watch(
144
145
  () => modelValue.value,
145
146
  (newValue) => {
146
- if (clusterInstance && newValue) {
147
+ if (clusterInstance.value && newValue) {
147
148
  updatePoints(newValue);
148
149
  }
149
- },
150
- { deep: true }
150
+ console.warn("modelValue 变化", newValue);
151
+ }
152
+ // { deep: true },
151
153
  );
152
154
  vue.watch(
153
155
  () => props.gridSize,
154
156
  () => {
155
- if (mapInstance && props.enable) {
156
- initCluster(mapInstance);
157
+ if (mapInstance.value && props.enable) {
158
+ initCluster();
157
159
  }
160
+ console.warn("gridSize 变化", props.gridSize);
158
161
  }
159
162
  );
160
163
  vue.watch(
161
164
  () => props.styles,
162
165
  () => {
163
- if (mapInstance && props.enable) {
164
- initCluster(mapInstance);
165
- }
166
- },
167
- { deep: true }
168
- );
169
- vue.watch(
170
- () => props.renderClusterMarker,
171
- () => {
172
- if (mapInstance && props.enable) {
173
- initCluster(mapInstance);
174
- }
175
- }
176
- );
177
- vue.watch(
178
- () => props.renderMarker,
179
- () => {
180
- if (mapInstance && props.enable) {
181
- initCluster(mapInstance);
166
+ if (mapInstance.value && props.enable) {
167
+ initCluster();
182
168
  }
169
+ console.warn("styles 变化", props.styles);
183
170
  }
171
+ // { deep: true },
184
172
  );
185
173
  vue.onUnmounted(() => {
186
174
  destroy();
175
+ console.warn("组件卸载时清理聚合实例");
187
176
  });
188
177
  return (_ctx, _cache) => {
189
178
  return vue.renderSlot(_ctx.$slots, "default");
@@ -1,7 +1,14 @@
1
+ /* AMap 高德地图组件样式 */
2
+ .jky-amap-container {
3
+ /* 地图容器样式 */
4
+ position: relative;
5
+ overflow: hidden;
1
6
 
2
- /* JkyAMarker 组件样式 - 参考高德官方示例 */
3
- .amap-icon img,
4
- .amap-marker-content img {
5
- width: 25px;
6
- height: 34px;
7
+ /* 隐藏高德地图的 logo 和版权信息(注意:商业使用请遵守高德地图条款) */
8
+ .amap-logo {
9
+ display: none !important;
10
+ }
11
+ .amap-copyright {
12
+ display: none !important;
13
+ }
7
14
  }
@@ -1,14 +1,7 @@
1
- /* AMap 高德地图组件样式 */
2
- .jky-amap-container {
3
- /* 地图容器样式 */
4
- position: relative;
5
- overflow: hidden;
6
1
 
7
- /* 隐藏高德地图的 logo 和版权信息(注意:商业使用请遵守高德地图条款) */
8
- .amap-logo {
9
- display: none !important;
10
- }
11
- .amap-copyright {
12
- display: none !important;
13
- }
2
+ /* JkyAMarker 组件样式 - 参考高德官方示例 */
3
+ .amap-icon img,
4
+ .amap-marker-content img {
5
+ width: 25px;
6
+ height: 34px;
14
7
  }
@@ -1,4 +1,4 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
- const version = "0.0.145";
3
+ const version = "0.0.146";
4
4
  exports.version = version;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "jky-component-lib",
3
3
  "type": "module",
4
- "version": "0.0.145",
4
+ "version": "0.0.146",
5
5
  "publishConfig": {
6
6
  "access": "public"
7
7
  },