มุมมอง 3 มิติบนแผนที่ใน Leaflet, CartoDB?

12

มีห้องสมุด JS ใด ๆ หรือไม่ที่จะแสดงแผนที่ปกติ (เช่นแผ่นพับ) ลงในแผนที่มุมมองเช่นนี้บนเว็บ:

ป้อนคำอธิบายรูปภาพที่นี่

นอกจากนี้ทุกคนเห็นอะไรก็ตามที่สามารถเปลี่ยนข้อมูล CartoDB เป็นการนำเสนอแบบ 3 มิติเช่นนี้

javascript leaflet 3d carto

1

ฉันไม่แน่ใจเกี่ยวกับการรวมกับ cartodb แต่เมื่อเร็ว ๆ นี้ฉันเห็นโพสต์นี้เกี่ยวกับการทำแผนที่ 3 มิติจาก QGIS โดยใช้ห้องสมุดthree.js คุณอาจต้องการดูที่

— RyanKDalton

2

ดูเพิ่มเติมที่: Three.js + leaflet = แผนที่ 3 มิติ? ใน StackOverflow

— RyanKDalton

1

และบทความสองสามข้อที่ต้องพิจารณา: Render Geographic Information ในแบบ 3 มิติด้วย Three.js และ D3.jsและแสดงเส้นทาง GPS ในแบบ 3 มิติด้วย three.js และ d3.js

— RyanKDalton

1

บางทีคุณอาจพบว่าการสร้างภาพข้อมูลนี้มีประโยชน์: pluto.cartodb.com/viz/bf4dacd4-003c-11e3-aaf8-a9294e572fad/…

— javisantana

7

บางทีคุณอาจจะใช้Osmbuildings มันเป็นห้องสมุด JavaScript สำหรับการแสดงภาพ OpenStreetMaps (หรือ GeoJSON ที่กำหนดเอง) การสร้างรูปทรงเรขาคณิตในมุมมอง 3 มิติ

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

— sigon
แหล่งที่มา

เวอร์ชันปัจจุบันของ OSM Buildings (0.2.2b) ไม่รองรับsetDataวิธีการ แต่ใช้setงานได้! มันจะกลายเป็น:var osmb = new OSMBuildings(map).setData(geoJSON);

— bradypus

4

นี่เป็นหนึ่งในกรณีการใช้งานหลักสำหรับ ViziCities (เมืองสามมิติในเบราว์เซอร์ที่ขับเคลื่อนโดย OpenStreetMap) แม้ว่าชั้นข้อมูลจะยังไม่ทำงาน บางทีสิ่งที่ต้องพิจารณาสำหรับอนาคต: https://github.com/robhawkes/vizicities

ข้อจำกัดความรับผิดชอบ: ฉันเป็นผู้พัฒนา ViziCities

— Robin Hawkes
แหล่งที่มา

1

โปรเจคสุดเจ๋ง! นอกจากนี้ในขณะที่มันค่อนข้างชัดเจนว่าเป็นโครงการที่คุณเป็นพันธมิตรคุณอาจต้องการทำให้ชัดเจนขึ้นเล็กน้อย (แม้ว่าจะเป็นโอเพ่นซอร์ส)

— blah238

ขอบคุณ แต่ฉันกำลังมองหาโซลูชันที่ไม่ใช่ WebGL

— Knutole

1

ไม่ต้องกังวลแค่อยากให้คุณเป็นหัวหน้า

— Robin Hawkes

รุ่นนี้มีแปลงหรือรุ่นที่ปรับปรุงแล้วหรือไม่?

— joker21

2

คุณสามารถใช้ OSM2world เพื่อส่งผ่านข้อมูล 2D จาก OpenStreetMap (map.osm) ไปยังวัตถุ 3 มิติ (map.obj) จากนั้นใช้ตัวแปลงอื่น ( convert_obj_three.py ) เพื่อแปลงเป็นรูปแบบ JSON threejs (map.js) จากนั้นใช้ มันอยู่ในฉาก Threejs

คุณสามารถดูวิธีที่นี่:

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

— sigon
แหล่งที่มา

ขอบคุณมาก. แต่นี่ต้องใช้ WebGL ใช่มั้ย

— knutole

1

Threejs เป็นไลบรารี / api ที่ใช้ประโยชน์จาก WebGL แต่ในรหัสคุณจะต้องรวมสอง libs: three.js และ OrbitControls.js (นี่เป็นการจัดการวงโคจรของกล้อง)

— สิกอน

1

และใช่ threejs ใช้ได้กับเบราว์เซอร์ที่รองรับโดย WebGL เท่านั้น

— สิกอน

1

สิ่งที่ฉันได้เห็นมากที่สุดคืองานของไมค์บอสต็อก

เขามีแผนที่เจ๋งจริงๆซึ่งมีชนิดของการฉายเฉียง

แต่ไม่มีอะไรที่ทำให้ง่าย D3 ทำหัวของฉันเกี่ยวกับการตั้งค่าการฉายภาพ คุณสามารถทำสิ่งที่น่าอัศจรรย์ถ้าคุณทำงานที่มัน

— Alex Leith
แหล่งที่มา

ตกลงไมค์ทำอย่างนั้นได้อย่างไร? ขอบคุณสำหรับเคล็ดลับ

— Knutole

เช่นนี้: bl.ocks.org/mbostock/3790444

— 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

— ÓscarMartínez
แหล่งที่มา