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

12

Чи є там бібліотека JS, яка б перетворювала звичайні, плоскі карти (наприклад, Leaflet) у перспективну карту, як ця, в Інтернеті:

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

Також хтось бачив щось, що могло б перетворити дані CartoDB у 3D-зображення, як це?

javascript leaflet 3d carto

— кнутоле
джерело

1

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

— RyanKDalton

2

Дивіться також: Three.js + буклет = 3D-карти? on StackOverflow

— RyanKDalton

1

І ще кілька статей, на які слід звернути увагу: Візуалізація географічної інформації у форматі 3D за допомогою Three.js та D3.js та показ GPS-треків у тривимірному форматі за допомогою three.js та d3.js

— RyanKDalton,

1

Можливо, ця візуалізація стане

— 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);

Ваші дані повинні мати властивість висоти, і ви можете динамічно змінювати колір стіни та даху:

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));

— сигон
джерело

Поточна версія OSM Buildings (0.2.2b) не підтримує setDataметод, але setпрацює! Це tjus стає:var osmb = new OSMBuildings(map).setData(geoJSON);

— брадип

4

Це один із основних випадків використання для ViziCities (тривимірні міста у браузері, що працює на базі 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), а потім використовуйте це в сцені Threejs.

Ви можете подивитися, як тут:

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

— сигон
джерело

Дуже дякую. Але для цього потрібен WebGL, правда?

— кнутоле

1

Threejs - це бібліотека JavaScript / api, яка використовує переваги WebGL. Але в код вам потрібно включити лише два lib: three.js і OrbitControls.js (це керування орбітою камери).

— сигон

1

і так, Threejs працює лише в браузерах, підтримуваних WebGL.

— sigon

1

Найближче, що я бачив, - це робота Майка Бостока .

У нього дійсно крута карта, яка має своєрідну косу проекцію .

Але немає нічого, що робить це легко. D3 робить мені голову стосовно налаштування проекцій. Якщо ви працюєте над цим, ви можете робити дивовижні речі.

— Алекс Лейт
джерело

Добре, як Майк це робить ?? Дякую за пораду

— кнутоле

Ось так

— John Haugeland

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

— Оскар Мартінес
джерело