yandex-maps-unofficial / vue-yandex-map

Yandex Maps Component for VueJS
MIT License
359 stars 103 forks source link

Как правильно использовать кластеризацию и метки в большом количестве? #246

Closed AndreyArtamonov closed 2 years ago

AndreyArtamonov commented 4 years ago

Возникла ситуация, я не совсем понимаю, как правильно рендерить метки в большом количестве.

Задача: Я получаю по API пункты выдачи CDEK по Москве (~100-150 координат).

Проблема: Когда я их добавляю и кластеризирую падает сильно fps c 60 до 15-20. Heap size с 20-30mb растет до 80-100mb

Проблема скорее всего в том, что цикл рендерит компонент . Как мне правильно добавлять метки без такой просадки?

templates

<yandex-map :settings="settings" :coords="maps.position" :zoom="maps.zoom">
    <ymap-marker :coords="item.coords" :marker-id="item.id" marker-type="placemark" v-for="item in items" :cluster-name="1"></ymap-marker>
</yandex-map>

script

import {yandexMap, ymapMarker} from 'vue-yandex-maps'

    export default {
        components: {yandexMap, ymapMarker},
        data() {
            return {
                maps: {
                    position: [55.755814, 37.617635],
                    zoom: 10,

                    settings: {
                        apiKey: '<api_key>',
                        lang: 'ru_RU',
                        version: '2.1'
                    },

                    clusterOptions: {
                        1: {
                            gridSize: 64
                        }
                    }
                },

                items: []
            }
        },

        methods: {
            get_poi() {
                axios.get('/api/v1/delivery/cdek/widget', {
                    params: {
                        'region_fias_id': '0c5b2444-70a0-4932-980c-b4dc0d3f02b5',
                        'city': 'Москва'
                    }
                }).then((response) => (this.items = response.data));
            }
        },

        created() {
            this.get_poi();
        }
    }
PNKBizz commented 4 years ago

Добрый день! Воспроизведите пример в песочнице, пожалуйста. Или создайте репозиторий с примером