3D перспектива на картах в Leaflet, CartoDB?

12

Существует ли какая-либо библиотека JS, которая бы отображала обычные плоские карты (например, Leaflet) в перспективную карту, подобную этой, в Интернете:

введите описание изображения здесь

Кроме того, кто-нибудь видел что-нибудь, что могло бы превратить данные CartoDB в трехмерное представление, как это?

javascript leaflet 3d carto

— knutole
источник

1

Я не уверен насчет интеграции с cartodb, но недавно я увидел этот пост о создании 3D-карт из QGIS с использованием библиотеки three.js . Вы можете взглянуть на это.

— RyanKDalton

2

Смотрите также: Three.js + leaflet = 3D карты? на StackOverflow

— RyanKDalton

1

И пару статей , чтобы посмотреть на: Рендер географической информации в 3D С Three.js и D3.js и Отображение GPS треков в 3D с three.js и d3.js

— RyanKDalton

1

Может быть, вы найдете эту визуализацию полезной: pluto.cartodb.com/viz/bf4dacd4-003c-11e3-aaf8-a9294e572fad/…

— javisantana

7

Может быть, вы могли бы использовать Osmbuildings . Это библиотека JavaScript для визуализации OpenStreetMaps (или пользовательского GeoJSON) построения геометрии в трехмерной перспективе.

OSMbuildingJS

Он использует данные OpenStreetMaps напрямую. Просто добавьте метод loadData ():

var map = new L.Map('map').setView([52.50440, 13.33522], 17);
var osmb = new OSMBuildings(map).loadData();
L.control.layers({}, { Buildings:osmb }).addTo(map); // add to layer switcher (optional)

Или вы можете загрузить свой собственный GeoJSON. Просто измените метод loadData () на setData (geojson):

var osmb = new OSMBuildings(map).setData(geoJSON);

Ваши данные должны иметь свойство height, и вы можете динамически изменять цвет стен и крыши:

osmb.setStyle({ 
     wallColor:'rgba(100, 100, 250, 0.701961)', 
     roofColor:'rgb(220, 220, 50)', 
     shadows:true 
});

И даже измените перспективу тени, установив дневное время:

osmb.setDate(new Date(2014, 3, 24, 13, 0));

— Sigon
источник

Текущая версия OSM Buildings (0.2.2b) не поддерживает setDataметод, но setработает! Это становится:var osmb = new OSMBuildings(map).setData(geoJSON);

— брадип

4

Это один из основных вариантов использования ViziCities (3D-города в браузере на базе OpenStreetMap), хотя слои данных в настоящее время еще не работают. Возможно, стоит подумать о будущем: https://github.com/robhawkes/vizicities

Отказ от ответственности: я разработчик ViziCities

— Робин Хоукс
источник

1

Классный проект! Кроме того, хотя совершенно очевидно, что это проект, к которому вы присоединились, вы можете просто сделать это немного более понятным (даже если это открытый код).

— blah238

Спасибо, но я ищу решение не из WebGL.

— Кнутоль

1

Не беспокойся, просто хотел тебя предупредить.

— Робин Хокс

Есть ли в этой версии сюжеты или улучшенная версия?

— joker21

2

Вы можете использовать OSM2world для передачи 2D-данных из OpenStreetMap (map.osm) в 3D-объекты (map.obj), затем использовать другой конвертер ( convert_obj_three.py ) для преобразования их в модель JSON Threejs (map.js) и затем использовать это в сцене трижды.

Вы можете увидеть, как здесь:

https://www.youtube.com/watch?v=S6LbKH6NnZU

— Sigon
источник

Большое спасибо. Но для этого нужен WebGL, верно?

— Кнутоль

1

Threejs - это библиотека javascript / api, использующая преимущества WebGL. Но в коде вы должны включить только две библиотеки: three.js и OrbitControls.js (это для управления орбитой камеры).

— Sigon

1

и да, threejs работает только в браузерах, поддерживаемых WebGL.

— Сигон

1

Самым близким, что я видел, была работа Майка Бостока .

У него действительно классная карта с наклонной проекцией .

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

— Алекс Лейт
источник

ОК, как Майк это делает? Спасибо за совет

— кнутоль

Вот так

— Джон Хаугеланд,

1

http://osm2world.org/ работает без WebGL, но использует Java вместо js.

Предназначен для вывода данных зданий Openstreetmap, он также должен быть адаптирован для других 3D-данных.

В результате получается скользкая карта, похожая на буклет: http://maps.osm2world.org/

— Andrej
источник

1

Что ж, с CartoDB вы можете сделать что-то вроде этого http://andrewxhill.com/cartodb-examples/scroll-story/pluto/index.html#4

Вы должны использовать этот параметр CartoCSS: {building-height: 512; }

Более подробная информация здесь: https://github.com/CartoDB/cartodb-pluto

— Оскар Мартинес
источник