2.0.0-beta.5

yandex-maps-unofficial · Oct 30, 2023 · 439e16f · 439e16f
1 parent 7a3634f
commit 439e16f
Show file tree

Hide file tree

Showing 20 changed files with 468 additions and 446 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,9 +1,17 @@
 # Список изменений
 
-## [Unreleased]
+## [2.0.0-beta.5]
+
+### Новые возможности
+- Добавлена передача `coordinates` в слот `YandexMapClusterer`
+- Добавлено изменение `zoom` для `realSettingsLocation`
+
+### Исправления ошибок
+- Доработан кластеризатор
 
 ### Документация
 - Добавлена песочница
+- Добавлен пример "Множество точек"
 
 ## [2.0.0-beta.4]
 

diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts
@@ -279,88 +279,96 @@ export default defineConfig({
             link: '/examples/playground',
           },
           {
-            text: 'Карта',
+            text: 'Параметры карты',
             collapsed: true,
             items: [
               {
-                text: 'Создание карты',
-                link: '/examples/map-basics',
-              },
-              {
-                text: 'Основные параметры',
-                link: '/examples/map-params',
-              },
-              {
-                text: 'Изменить положение камеры',
+                text: 'Изменение позиции камеры',
                 link: '/examples/camera',
               },
               {
-                text: 'Кастомные тайлы на canvas',
-                link: '/examples/canvas-tiles',
+                text: 'Изменение размера карты',
+                link: '/examples/fill-container',
               },
               {
-                text: 'Собственная карта',
-                link: '/examples/custom-map',
+                text: 'Ограничение области просмотра карты',
+                link: '/examples/map-restrict-area',
               },
               {
-                text: 'Изменить размер карты',
-                link: '/examples/fill-container',
+                text: 'Основные параметры',
+                link: '/examples/map-params',
               },
               {
-                text: 'Поместите в скрытый контейнер',
+                text: 'Размещение в скрытом контейнере',
                 link: '/examples/hidden-div',
               },
               {
-                text: 'Ограничить область просмотра карты',
-                link: '/examples/map-restrict-area',
+                text: 'Создание карты',
+                link: '/examples/map-basics',
               },
             ],
           },
           {
-            text: 'Геообъекты',
+            text: 'Объекты на карте',
             collapsed: true,
             items: [
               {
-                text: 'Добавление маркера на карту',
+                text: 'Добавление метки на карту',
                 link: '/examples/placemark',
               },
               {
-                text: 'Маркеры со своим изображением',
+                text: 'Добавление метки с собственным изображением',
                 link: '/examples/marker-custom-image',
               },
               {
-                text: 'Полигон',
-                link: '/examples/polygon',
+                text: 'Ломаная',
+                link: '/examples/polyline',
               },
               {
-                text: 'Линия',
-                link: '/examples/polyline',
+                text: 'Многоугольник',
+                link: '/examples/polygon',
               },
               {
-                text: 'Перетаскиваемые объекты',
+                text: 'Перетаскивание объектов',
                 link: '/examples/draggable-objects',
               },
+              {
+                text: 'Попап при клике на маркер',
+                link: '/examples/marker-popup',
+              },
               {
                 text: 'Прямоугольник',
                 link: '/examples/rectangle',
               },
+              {
+                text: 'Скрывать маркеры вне вьюпорта',
+                link: '/examples/hide-markers'
+              }
             ],
           },
           {
             text: 'Прочее',
             collapsed: true,
             items: [
+              {
+                text: 'Кастомные тайлы на canvas',
+                link: '/examples/canvas-tiles',
+              },
+              {
+                text: 'Собственная карта',
+                link: '/examples/custom-map',
+              },
               {
                 text: 'Элементы управления',
                 link: '/examples/controls',
               },
               {
-                text: 'Подсказки (Hints)',
-                link: '/examples/hint',
+                text: 'Множество точек (Кластеризация)',
+                link: '/examples/many-points',
               },
               {
-                text: 'Всплывающие окна (Popups)',
-                link: '/examples/popup',
+                text: 'Подсказки (Хинты)',
+                link: '/examples/hint',
               },
             ],
           },

diff --git a/docs/components/map.md b/docs/components/map.md
@@ -70,12 +70,12 @@ const map = shallowRef<null | YMap>(null); //map передать в v-model
 Однако, если вы не изменяете другие параметры, но хотели бы удобнее возвращать пользователя на начальную позицию, вы
 можете передать props `real-location-settings`. При любом триггере `settings` (вы можете его вызвать повторным
 присваиванием `location` в ваш `.value`, или использовать
-метод [triggerRef](https://vuejs.org/api/reactivity-advanced.html#triggerref)) в `center` или `bounds` будет
-подставляться настоящая геолокация пользователя, после чего произойдет изменение.
+метод [triggerRef](https://vuejs.org/api/reactivity-advanced.html#triggerref)) в `zoom`, а также `center` или `bounds` будет
+подставляться настоящие масштабирование и геолокация пользователя, после чего произойдет изменение.
 
 ::: warning Внимание
 При использовании данного параметра локация пользователя будет изменяться на каждое обновление `settings` - при условии,
-что пользователь "уходил с места", конечно.
+что пользователь что-то делал, конечно.
 :::
 
 В случае, если вам нужно и менять параметры в `settings`, и возвращать пользователя на начальную позицию, вы можете

diff --git a/docs/examples/camera.md b/docs/examples/camera.md
@@ -1,4 +1,4 @@
-# Изменить положение камеры
+# Изменение позиции камеры
 
 <script lang="ts" setup>
 import MapComponent from 'examples/src/components/basics/MapCamera.vue';

diff --git a/docs/examples/fill-container.md b/docs/examples/fill-container.md
@@ -1,4 +1,4 @@
-# Карта - Изменение размера карты
+# Изменение размера карты
 
 <script lang="ts" setup>
 import MapComponent from 'examples/src/components/basics/FillContainer.vue';

diff --git a/docs/examples/hidden-div.md b/docs/examples/hidden-div.md
@@ -1,4 +1,4 @@
-# Карта - Размещение в скрытом контейнере
+# Размещение в скрытом контейнере
 
 <script lang="ts" setup>
 import MapComponent from 'examples/src/components/basics/HiddenDiv.vue';

diff --git a/docs/examples/many-points.md b/docs/examples/many-points.md
@@ -0,0 +1,13 @@
+# Множество точек
+
+<script lang="ts" setup>
+import MapComponent from 'examples/src/components/misc/ManyPoints.vue';
+</script>
+
+<map-component/>
+
+:::code-group
+<<< ../../packages/examples/examples/src/components/misc/ManyPoints.vue#html{html} [Template]
+
+<<< ../../packages/examples/examples/src/components/misc/ManyPoints.vue#setup{ts} [Setup]
+:::
diff --git a/docs/examples/map-params.md b/docs/examples/map-params.md
@@ -1,4 +1,4 @@
-# Карта - Основные параметры
+# Основные параметры
 
 <script lang="ts" setup>
 import MapComponent from 'examples/src/components/basics/MapParams.vue';

diff --git a/docs/examples/map-restrict-area.md b/docs/examples/map-restrict-area.md
@@ -1,4 +1,4 @@
-# Карта - Ограничение области просмотра карты
+# Ограничение области просмотра карты
 
 <script lang="ts" setup>
 import MapComponent from 'examples/src/components/basics/RestrictArea.vue';

diff --git a/docs/examples/playground.md b/docs/examples/playground.md
@@ -1,5 +1,5 @@
 # Песочница
 
-Если вы хотели бы потыкать карты, воспользуйтесь [созданным нами Sandbox](https://codesandbox.io/p/sandbox/laughing-gianmarco-js3c6t?file=%2Fvite.config.ts%3A8%2C1).
+Если вы хотели бы потыкать карты, воспользуйтесь [созданным нами Sandbox](https://codesandbox.io/p/sandbox/thirsty-kilby-t9cy6f).
 
 <iframe style="border: 1px solid rgba(0, 0, 0, 0.1);border-radius:2px;" width="100%" height="800" src="https://codesandbox.io/p/sandbox/thirsty-kilby-t9cy6f?embed=1" allowfullscreen></iframe>
diff --git a/package.json b/package.json
@@ -26,8 +26,8 @@
     "devDependencies": {
         "@babel/eslint-parser": "^7.22.15",
         "@types/node": "^20.8.9",
-        "@typescript-eslint/eslint-plugin": "^6.9.0",
-        "@typescript-eslint/parser": "^6.9.0",
+        "@typescript-eslint/eslint-plugin": "^6.9.1",
+        "@typescript-eslint/parser": "^6.9.1",
         "@vue/eslint-config-airbnb": "^7.0.0",
         "eslint": "^8.52.0",
         "eslint-plugin-vue": "^9.18.1",

diff --git a/packages/examples/examples/src/components/misc/ManyPoints.vue b/packages/examples/examples/src/components/misc/ManyPoints.vue
@@ -0,0 +1,137 @@
+<template>
+  <common-wrapper>
+    <template
+      #default="{
+        coordinates: center, theme, width, height,
+      }"
+    >
+      <!-- #region html -->
+      <yandex-map
+        v-model="map"
+        :settings="{
+          location: localLocation || {
+            center,
+            zoom: 5,
+          },
+        }"
+        :width="width"
+        :height="height"
+        real-settings-location
+      >
+        <yandex-map-default-scheme-layer :settings="{ theme }" />
+        <yandex-map-default-features-layer />
+        <yandex-map-controls :settings="{ position: 'top left' }">
+          <yandex-map-control>
+            <label style="padding: 5px">
+              Elements count: {{ count }}
+              <input
+                v-model="count"
+                type="range"
+                min="100"
+                max="5000"
+                step="100"
+              >
+            </label>
+            <label style="padding: 5px">
+              Grid Size: {{ 2 ** gridSize }}
+              <input
+                :value="gridSize"
+                type="range"
+                min="6"
+                max="11"
+                @input="gridSize = $event.target.value"
+              >
+            </label>
+          </yandex-map-control>
+        </yandex-map-controls>
+        <yandex-map-controls :settings="{ position: 'right' }">
+          <yandex-map-zoom-control />
+        </yandex-map-controls>
+        <yandex-map-clusterer v-model="clusterer" :grid-size="2 ** gridSize">
+          <yandex-map-default-marker
+            v-for="(coordinates) in getPointList"
+            :key="coordinates.join(',')"
+            :settings="{ coordinates, color: 'red' }"
+          />
+          <template #cluster="{ length, coordinates }">
+            <div
+              class="cluster"
+              :style="{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                width: '50px',
+                aspectRatio: '1/1',
+                background: 'green',
+                color: '#fff',
+                borderRadius: '100%',
+                cursor: 'pointer',
+              }"
+              @click="localLocation = { center: coordinates, zoom: 9, duration: 1000 }"
+            >
+              {{ length }}
+            </div>
+          </template>
+        </yandex-map-clusterer>
+      </yandex-map>
+      <!-- #endregion html -->
+    </template>
+  </common-wrapper>
+</template>
+
+<script setup lang="ts">
+import CommonWrapper from '../CommonWrapper.vue';
+// #region setup
+import {
+  YandexMap,
+  YandexMapClusterer,
+  YandexMapControl,
+  YandexMapControls,
+  YandexMapDefaultFeaturesLayer,
+  YandexMapDefaultMarker,
+  YandexMapDefaultSchemeLayer,
+  YandexMapZoomControl,
+} from 'vue-yandex-maps';
+import {
+  computed, ref, shallowRef, watch,
+} from 'vue';
+import type { YMapLocation } from '@yandex/ymaps3-types/imperative/YMap';
+import type { YMap } from '@yandex/ymaps3-types';
+import { YMapClusterer } from '@yandex/ymaps3-types/packages/clusterer';
+
+const map = shallowRef<YMap | null>(null);
+const clusterer = shallowRef<YMapClusterer | null>(null);
+const count = ref(100);
+const localLocation = shallowRef<YMapLocation | null>(null);
+const gridSize = ref(6);
+
+watch(map, (val) => console.log('map', val));
+watch(clusterer, (val) => console.log('cluster', val));
+
+const seed = (s: number) => () => {
+  s = Math.sin(s) * 10000;
+  return s - Math.floor(s);
+};
+
+const rnd = seed(10000);
+
+const DELTA_LENGTH = 5;
+
+function getRandomPoint() {
+  const [x, y] = map.value!.center;
+  return [x + (rnd() > 0.5 ? -1 : 1) * rnd() * DELTA_LENGTH * 2, y + (rnd() > 0.5 ? -1 : 1) * rnd() * DELTA_LENGTH];
+}
+
+const getPointList = computed(() => {
+  if (!map.value) return [];
+  const result = [];
+
+  for (let i = 0; i < count.value; i++) {
+    result.push(getRandomPoint());
+  }
+
+  return result;
+});
+
+// #endregion setup
+</script>
diff --git a/packages/examples/nuxt2-bridge/package.json b/packages/examples/nuxt2-bridge/package.json
@@ -9,7 +9,7 @@
     "generate": "nuxi prepare && nuxt2 generate"
   },
   "dependencies": {
-    "core-js": "^3.33.1",
+    "core-js": "^3.33.2",
     "example-vue3": "workspace:*",
     "nuxt": "^2.17.2",
     "vue": "^2.7.15",

diff --git a/packages/examples/nuxt2/package.json b/packages/examples/nuxt2/package.json
@@ -9,7 +9,7 @@
     "generate": "nuxt generate"
   },
   "dependencies": {
-    "core-js": "^3.33.1",
+    "core-js": "^3.33.2",
     "example-vue3": "workspace:*",
     "nuxt": "^2.17.2",
     "vue": "^2.7.15",

diff --git a/packages/examples/vue2/package.json b/packages/examples/vue2/package.json
@@ -7,7 +7,7 @@
     "build": "vue-cli-service build"
   },
   "dependencies": {
-    "core-js": "^3.33.1",
+    "core-js": "^3.33.2",
     "example-vue3": "workspace:*",
     "vue": "^2.7.15",
     "vue-yandex-maps": "workspace:*"