Векторные плитки с Google Maps V3

У меня есть куча очень больших полигонов, которые я бы хотел наложить на свою карту Google. У меня есть сервер плитки, который обслуживает функции GeoJSON, а также заботится о различных геометрических операциях, которые мне необходимы, чтобы сделать работу приложения (объединение полигонов, упрощение до уровня масштабирования, черепица и т.д.).

В настоящее время мы просто показываем большие полигоны на карте в качестве слоев данных, но в идеале мы сможем отображать упрощенные версии полигонов при меньших уровнях масштабирования и увеличивать их сложность с учетом уровня масштабирования.

Мои параметры выглядят как:

1) Слои данных: подключайтесь к различным событиям изменения карты, а затем добавляйте/удаляйте их с карты (где добавление будет извлекать соответствующий фрагмент). Трудность здесь заключалась в том, что, похоже, было много событий смены карты, и найти самый гладкий способ добиться успеха может принести значительные усилия. Кроме того, мне кажется, что я работаю против API данных здесь.

2) OverlayView: аналогично выше, но как абсолютный размер OverlayView (т.е. полное покрытие). Мысль будет заключаться в том, что наложение будет прослушивать события рисования, извлекать подходящую плитку и добавлять/очищать по мере необходимости. Кажется, это было бы более предсказуемым решением, но опять-таки там много.

Я не знаю достаточно о том, как карты работают под капотом, чтобы обеспечить гораздо более глубокое понимание, но мое возможное решение (в той мере, в какой это помогает) было бы тем, что принимает URL-адрес сервера плитки, а затем подходит как плавно насколько возможно, как карты работают для загрузки правильной плитки, для правильного уровня масштабирования (и учитывая, что они являются векторными плитами, я мог бы также постепенно увеличивать/деградировать по мере изменения уровней масштабирования или изменения положения).

Может ли кто-нибудь пролить свет? Как вы подходите к нему?

Ответы

Ответ 1

То, как я столкнулся с идеей выборки данных с черепицей, - это использование overlayMapTypes. Вот рабочий пример.

Подобно любому объекту, реализующему интерфейс MapType, он ожидает, что вы определите метод getTile и, при необходимости, метод releaseTile.

Всякий раз, когда плитка входит в окно просмотра, этот тип объектов вызывает getTile, передавая ему координаты и масштабирование. Всякий раз, когда фрагмент выходит из окна просмотра, он вызывает releaseTile с элементом node, который он удаляет. Таким образом, используя связанный пример, вам просто нужно добавить слой данных в каждый фрагмент и удалить его при выпуске фрагмента:

Скажем, что ваш фрагмент, обслуживающий бэкэнд, отвечает на URL-адрес, например

'/mytiles/1048/1520/13';

Затем (заимствуя почти полный код для примера) вы объявите overlayMapType как

function CoordMapType() {
    this.tileSize = new google.maps.Size(256, 256);
}

CoordMapType.prototype.getTile = function (coord, zoom, ownerDocument) {
    var div = ownerDocument.createElement('div'),
        tileUrl = '/mytiles/' + coord.x + '/' + coord.y + '/' + zoom;

    div.innerHTML = coord;
    div.style.width = this.tileSize.width + 'px';
    div.style.height = this.tileSize.height + 'px';
    div.style.fontSize = '10';
    div.style.borderStyle = 'solid';
    div.style.borderWidth = '1px';
    div.style.borderColor = '#AAAAAA';

    div.dataLayer = new google.maps.Data();


    div.dataLayer.loadGeoJson(tileUrl,null, function() {
        div.dataLayer.setMap(map);
    });

    return div;
};

CoordMapType.prototype.releaseTile = function (tile) {
    if (tile.dataLayer) {
        tile.dataLayer.setMap(null);
    }
};


map.overlayMapTypes.insertAt(0, new CoordMapType());

Ответ 2

У меня есть только open-sourced вилка mapbox-gl-js, которая позволяет вам визуализировать векторные плитки на клиенте контролируемым образом, в частности это означает, что вы можете использовать векторные плитки поверх карты google.

Живая демонстрация здесь, а документация/код здесь

Здесь открываются плитки с открытым рисунком поверх изображения спутника google...

screenshot