Библиотеки для рендеринга векторных карт в браузере

13

Существует ли библиотека JavaScript с открытым исходным кодом, такая как Leaflet или OpenLayers, которую можно использовать в веб-приложении или мобильном приложении и загружать векторные карты вместо изображений? Мне нужна только дорожная информация и некоторые POI.

Единственной библиотекой, которую я нашел, были polymaps, но все же мне понадобился бы сервер или служба, которая обслуживает векторные SVG-данные (предпочтительно из OpenStreetMap). Также есть хороший проект Android под названием Mapsforge, но он мне нужен для веб-приложения или других мобильных устройств.

— Karussell
источник

4

Мы запустили страницу для сбора ссылок и информации о векторных плитках в OpenStreetMap Wiki (работа в процессе):

http://wiki.openstreetmap.org/wiki/Vector_tiles

— Норберт Реннер
источник

10

Просто для рисования векторов Leaflet или OpenLayers подойдут . Ничего нового там нет.

Для векторных плиточных карт (т.е. с разным разрешением / уровнем детализации при разных уровнях масштабирования) TileStache является простым и хорошим сервером. Я использовал много экспериментов с Polymaps (AFAIK, единственный универсальный рабочий просмотрщик плиточного вектора js). Некоторые люди использовали OpenLayers для добавления поддержки мозаичного вектора , но AFAIK, он не был интегрирован в транк в течение года, так что, вероятно, не будет в ближайшем будущем из-за отсутствия интереса.

Сам TileStache (сервер) работает очень хорошо. Тем не менее, я обнаружил несколько ошибок в Polymaps, и, поскольку он больше не обновляется (заброшенный проект), я не могу убедить себя в том, чтобы использовать его в производстве (мне придется поддерживать его самому ... Я не могу оправдать его Я просто пока.)

Мое решение для меня было написать собственный рендерер векторов OpenGL, который используется в AmigoCloud . Фактически, именно так все карты отображаются в нашем сервисе. Для этой цели TileStache поставил довольно хорошо.

Вы хотите взглянуть на TileStache Vector Provider . Для примеров того, как его использовать, вы можете посмотреть на очень простой набор векторных тестов, который я написал .

К сожалению, я не думаю, что Leaflet поддерживает мозаичные векторы.

— Раги Язер Бурхум
источник

Благодарность! Есть ли простая демонстрация tilestache в сети?

— Karussell

Плотность населения для картографов использует кэш мозаичного векторного провайдера (т. Е. Не работает сервер тайлашков, а просто копия того, как будет выглядеть выходная информация). Глядя на код, вы должны понять, что это polymaps.org/ex/population.html с векторной мозаикой . К сожалению, доступные онлайн-демонстрации tilestache не используют векторный поставщик. Тем не менее, если вы запустите tilestache-server локально и замените демонстрационные URL для вашего локального хоста настроенным источником векторных данных (shapefile, postgis и т. Д.), Это сработает. Msg здесь для помощи, если это будет необходимо.

— Раги Язер Бурхум

Я не согласен с этим ответом, особенно с этим. For just drawing vectors, Leaflet or OpenLayers will do just fine. Nothing new there.Это сработает, если векторы будут наложены, но как насчет того, чтобы вся карта (весь базовый слой) была организована как векторы?

— Giser

@giser Вот почему я делаю различие между "просто рисованием векторов" и "векторными мозаичными картами". Вторым ответом был термин «целые» карты, составленные из чисто векторов. Вот пример такой вещи: bl.ocks.org/mbostock/5593150

— Раги Язер Бурхум

@RagiYaserBurhum: извините, я неправильно понял это.

— Кайзер

10

Обновление: с момента публикации Mapbox выпустила Mapbox GL JS , который выполняет рендеринг векторных карт на основе WebGL в браузере.

На данный момент нет установленного варианта. Единственная полностью векторная векторная карта - это MapsGL от Google, и она очень ограничена из-за поддержки и производительности браузера.

На данный момент ближе всего к исходному коду с открытым исходным кодом относится Kothic.js, который катит свои собственные плитки с помощью сценария Kothic.

— tmcw
источник

+1 эй, это круто! не понимаю, почему вы получили отрицательный голос!

— Карусселл

6

Если я правильно понимаю ваш вопрос, то и OpenLayers, и Leaflet загрузят / покажут векторные данные.

Например

http://leafletjs.com/examples/geojson/

это загружает файл GeoJSON на карту листовки, которая использует OSM через CloudMade в фоновом режиме.

OpenLayers, вероятно, поддерживает больше разных типов векторных форматов, таких как KML

http://dev.openlayers.org/examples/dynamic-text-layer.html

Если вы имеете в виду, что вы ищете сервер для размещения векторных данных на карте, посмотрите на MapServer, GeoServer и ESRI ArcGIS Server, которые все будут передавать векторные данные на вашу карту в качестве сервера веб-объектов (WFS).

— tjmgis
источник

Я имею в виду саму карту как векторные данные, а не некоторые объекты, которые я загружаю на карту.

— Карусселл

Обработка большого количества данных через векторный тип может привести к зависанию или даже уничтожению браузера, так как слишком много <svg>элементов, вы должны помнить об этом

— Krystian

@Krystian Это если вы рендерите карту с помощью SVG. Ясно, что вы можете сделать это с помощью OpenGL / WebGL (как это делает Google Maps на Android / iOS и на экспериментальных картах javascript WebGL).

— Раги Язер Бурхум

@RagiYaserBurhum да, я не думал об этом, но все же, в данном конкретном случае вы не можете использовать webGL из-за ограничений в APIs и т. Д.

— Krystian

1

В OP не упоминалось ArcGIS API, поэтому я не предполагал этого (много ГИС может быть сделано без ArcGIS). Да, я согласен с тем, что смешивать ArcGIS JS с WebGL было бы затруднительно. Плиточные векторы являются новыми - но у них есть хорошие шансы стать будущим. Возможно

— Ragi Yaser Burhum

2

Я нашел еще один интересный проект под названием GL-Solar, который основан на технологии webgl, а не на SVG или canvas. Хотя это находится на ранней стадии разработки, это выглядит многообещающе.

Также следует упомянуть MapCSS , Cartagen и d3.js. d3.js используется в онлайн-редакторе osm iD . Есть также запись в блоге о листовке и рендеринге html5.

— Karussell
источник