Как оптимизировать большое кол-во полигонов в Yandex Maps?

Question

[Роман Мурман]

На карте имеется большое кол-во выделенных объектов полигонами, их свыше 1000 и поэтому карта тормозит. Было решено скрыть все полигоны (visible: false) и при наведение курсором на объект показывать его (visible: true). На canvas есть готовое решение для этого через
ctx.isPointInPath(100, 500)
Есть ли готовое решение для определения принадлежности точки к полигону, с учетом того что у полигона может быть внутренний контур. Или как можно подобное реализовать?

Пример:
https://jsfiddle.net/Lsnh105x/3/

Answer 1

[EmelyanovKonstantin]

По вопросу сложно сказать об оптимизации. Нужно код посмотреть и откуда берутся эти полигоны, может у вас AJAX долго проходит, или из JSON получайте неэффективно информацию (допустим оформляйте цветами полигоны).

Если информации много, эффективнее передавать её тайлами.

Есть ли готовое решение для определения принадлежности точки к полигону

Есть. На java, python, c можно на js поискать. Есть решения на стороне БД.

Comments

[Роман Мурман]

Лаги на стороне клиента, пока полигоны просто генерирую некую сетку циклом, 28x28

ymaps.ready(() => {
  const LAYER_NAME = 'user#layer';
  const MAP_TYPE_NAME = 'user#customMap';
  // Директория с тайлами.
  const TILES_PATH = './tiles';

  const MAX_ZOOM = 10;
  const PIC_WIDTH = 5164;
  const PIC_HEIGHT = 5164;

  function Layer() {
    const layer = new ymaps.Layer(`${TILES_PATH}/%z/tile-%x-%y.jpg`);
    // Указываем доступный диапазон масштабов для данного слоя.
    layer.getZoomRange = () => ymaps.vow.resolve([8, 10]);
    // Добавляем свои копирайты.
    layer.getCopyrights = () => ymaps.vow.resolve('©');
    return layer;
  }
  ymaps.layer.storage.add(LAYER_NAME, Layer);

  const mapType = new ymaps.MapType(MAP_TYPE_NAME, [LAYER_NAME]);
  ymaps.mapType.storage.add(MAP_TYPE_NAME, mapType);

  const worldSize = 2 ** MAX_ZOOM * 256;

  const map = new ymaps.Map('YMapsID', {
    center: [PIC_WIDTH / 2, PIC_HEIGHT / 2],
    zoom: 8,
    controls: ['zoomControl'],
    type: MAP_TYPE_NAME,
  }, {
    projection: new ymaps.projection.Cartesian([
      [PIC_HEIGHT - worldSize, 0],
      [PIC_HEIGHT, worldSize]],
    [false, false]),
    restrictMapArea: [[0, 0], [PIC_HEIGHT, PIC_WIDTH]],
  });

  // Тестовая генерация
  const objects = [];
  const objectManager = new ymaps.ObjectManager();
  const createPoly = (x, y, w, h, id) => {
    objects.push({
      type: 'Feature',
      id,
      geometry: {
        type: 'Polygon',
        coordinates: [
          [[y, x], [y, x + w], [y + h, x + w], [y + h, x], [y, x]],
        ],
      },
      options: {
        opacity: 0.7,
        strokeWidth: 1,
        fillColor: '#f40',
      },
    });
    objectManager.add(objects);
  };

  let id = 0;
  for (let i = 10; i < 38; i += 1) {
    for (let j = 10; j < 38; j += 1) {
      id += 1;
      createPoly(i * 81, j * 81, 80, 80, id);
    }
  }
  map.geoObjects.add(objectManager);
});

[EmelyanovKonstantin]

Роман Мурман,

const createPoly = (x, y, w, h, id) => {
    objects.push({
      type: 'Feature',
      id,
      geometry: {
        type: 'Polygon',
        coordinates: [
          [[y, x], [y, x + w], [y + h, x + w], [y + h, x], [y, x]],
        ],
      },
      options: {
        opacity: 0.7,
        strokeWidth: 1,
        fillColor: '#f40',
      },
    });
    objectManager.add(objects);
  };

  let id = 0;
  for (let i = 10; i < 38; i += 1) {
    for (let j = 10; j < 38; j += 1) {
      id += 1;
      createPoly(i * 81, j * 81, 80, 80, id);
    }
  }

Здесь вы создаёте эту сетку в цикле. Время тратится на это.
Не знаю для чего вы это делаете, и в чём причина такого решения.
Как оптимизировать:
Немного поможет добавление заранее рассчитанного JSON.
Сильно поможет создание сервера и подключение пободного слоя по wms.

[Роман Мурман]

Дело не инициализации полигонов, а в том что карта тормозит при скроле/передвижениях (кол-во FPS). Полигоны генерируются 1 раз и это не отнимает времени.

Не знаю для чего вы это делаете, и в чём причина такого решения.

Это тестовый вариант и делают его исключительно для того чтобы, протестировать как будет вести себя карта при большом кол-ве полигонов. В дальнейшем там будет примерно столько же полигонов

Извиняюсь, надо было сразу выложить код, чтобы было понятно, что я имею ввиду
https://jsfiddle.net/Lsnh105x/3/

[EmelyanovKonstantin]

Роман Мурман,

Сильно поможет создание сервера и подключение подобного слоя по wms.

[Роман Мурман]

EmelyanovKonstantin, Мне достаточно просто скрыть полигоны (visible: false) для этого нет необходимости обращаться на сервер, и отображать его при наведение курсора в место где располагается полигон, скрыть его можно событием mouseleave, а вот отобразить его уже не получиться. Знаю что на canvas это легко делается с помощью ctx.isPointInPath(x, y)