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
источник