ตัวอย่างและอัลกอริทึมของ Openlayers Animation


57

ฉันสงสัยมานานแล้วว่าผู้คนในชุมชนนี้ใช้ openlayers สำหรับความต้องการแอนิเมชั่น เรารู้เรื่องนี้แล้วว่าการเคลื่อนไหวบนเบราว์เซอร์นั้นค่อนข้างน่าเบื่อ แต่เมื่อแผนที่พบกับอนิเมชั่นผมเชื่อว่าสิ่งดีๆจะหมดไป

คุณรู้จักเว็บไซต์หรืออัลกอริทึมที่ดีสำหรับแอนิเมชั่นที่เข้ากันได้กับ openlayers หรือไม่?

นี่คือสิ่งที่ฉันรู้เกี่ยวกับแอนิเมชันโค้ดและตัวอย่างบางอย่าง กรุณาแบ่งปันความรู้ของคุณเกี่ยวกับแอนิเมชั่นกับ openlayers สำหรับผู้ที่ต้องการสิ่งนี้ ...

รหัสจาวาสคริปต์พื้นฐานสำหรับการเพิ่มสถานที่บนแผนที่ที่มีการหน่วงเวลา ..

 time = 0;
    for (var i = 0; i < 5; i++) {
        time += 1000;
        setTimeout(function(j) {
            return function() {
                console.log("var is now", j);
            }
        }(i), time);
    }

i2maps

เป็นสภาพแวดล้อม geocomputing มันมีกรอบการเขียนโปรแกรมที่ยืดหยุ่นสำหรับการค้นพบความรู้จากข้อมูลเชิงพื้นที่และการสร้างภาพบนเว็บ ไลบรารี Javascript ใช้สำหรับการสร้างส่วนต่อประสานกับผู้ใช้และสร้างขึ้นจาก OpenLayers

i2map

เส้นเวลาของ OpenLayers

เป็นห้องสมุดง่าย ๆ ในการสร้างแผนที่ที่เกี่ยวข้องกับเวลาด้วย OpenLayers สนับสนุนกลยุทธ์คลัสเตอร์ (OpenLayers.Strategy.Cluster) และการกรองเวลา ขณะนี้รองรับแหล่งข้อมูลในรูปแบบ GeoJSON หรือ GeoRSS

timelien

Timemap.js

เป็นห้องสมุด Javascript เพื่อช่วยในการใช้แผนที่ออนไลน์รวมถึง Google, OpenLayers และ Bing ด้วยไทม์ไลน์ของ SIMILE ห้องสมุดช่วยให้คุณสามารถโหลดชุดข้อมูลหนึ่งชุดขึ้นไปใน JSON, KML หรือ GeoRSS ลงบนทั้งแผนที่และไทม์ไลน์พร้อมกัน ตามค่าเริ่มต้นเฉพาะรายการที่อยู่ในช่วงที่มองเห็นได้ของเส้นเวลาจะปรากฏบนแผนที่

timemap

แผนที่แบ่งปันจักรยาน

ข้อมูลจะถูกอัปเดตโดยอัตโนมัติทุก ๆ 2-20 นาทีจากเว็บไซต์ของผู้ให้บริการ การใช้งานไบค์คือการใช้งานพร้อมกันและรวมถึงการกระจายรอบ การใช้งานจริงทั้งหมดตลอดทั้งวันอาจสูงขึ้นมาก ความไม่สมดุลในการกระจาย - จำนวนรอบที่จะต้องย้ายไปยังขาตั้งอื่นเพื่อให้พื้นที่ทั้งหมดเป็น% เต็ม ตัวเลขที่สูงกว่าบ่งบอกถึงการกระจายที่ไม่สมดุลเช่นจักรยานจำนวนมากที่อยู่ตรงกลาง เว็บไซต์นี้อาจถูกขัดจังหวะ

ข้อมูล: เว็บไซต์ของผู้ให้บริการ ข้อมูลแผนที่: ผู้มีส่วนร่วม OpenStreetMap รวมถึง OS Open Data โฮสติ้ง: UCL ขับเคลื่อนโดย Mapnik และ OpenLayers

Bikeshare

RaphaëlJSและ OpenLayersบูรณาการ

RaphaëlJSเป็นไลบรารี JavaScript ขนาดเล็กที่จะทำให้งานของคุณง่ายขึ้นด้วยกราฟิกแบบเวกเตอร์บนเว็บ หากคุณต้องการสร้างแผนภูมิหรือวิดเจ็ตภาพและหมุนภาพเฉพาะของคุณเองคุณสามารถทำให้สำเร็จได้อย่างง่ายดายด้วยไลบรารีนี้

ราฟาเอล

กลยุทธ์การกรองของ OpenLayers

ตัวอย่างนี้ใช้กลยุทธ์ตัวกรองเพื่อ จำกัด คุณสมบัติที่ส่งผ่านไปยังเลเยอร์ คุณลักษณะที่ผูกไว้กับเลเยอร์นี้จะมีแอททริบิวเมื่อมีค่าวันที่ กลยุทธ์ตัวกรองถูกสร้างขึ้นด้วยตัวกรองระหว่างที่ จำกัด ช่วงวันที่ที่แสดง ภาพเคลื่อนไหวอย่างง่ายวนไปตามโดเมนเมื่อค่าโทร setFilter ตามกลยุทธ์ด้วยตัวกรองที่อัปเดต

กรอง


1
RaphaëlJSและ OpenLayers @Aragon ลิงก์เสีย
kinkajou

ลิงค์ที่ถูกต้องdev.openlayers.org/examples/filter-strategy.html
หมี

คำตอบ:


6

GeoNodeเป็นแพลตฟอร์มรวมโครงการโอเพ่นซอร์สที่แตกต่างกัน (Django, GeoExt, OpenLayers, GeoWebCache, GeoServer, GeoNetwork) สำหรับการจัดการและการเผยแพร่ข้อมูลเชิงพื้นที่

เช่นที่Mapstory ใช้ซึ่งมีโครงสร้างพื้นฐานสำหรับแผนที่แบบเคลื่อนไหวด้วยมุมมองทางประวัติศาสตร์:

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



0

อารากอนตัวอย่างที่คุณชี้นั้นดีมาก

ฉันใช้ OpenLayers เพื่อสร้างแอนิเมชัน แต่ปัญหาหลักคือไม่มี "วิธีมาตรฐาน" ในการทำเพราะไม่มีวิธีมาตรฐานในการจำลองเวลาด้วยคุณสมบัติ

สำหรับข้อมูลแรสเตอร์มันเป็นเรื่องง่ายที่จะสร้างเลเยอร์สำหรับแต่ละคอนกรีตทันทีของเวลาและจัดการชั้นที่จะต้องมองเห็นได้ในแต่ละขั้นตอนการเคลื่อนไหว

สำหรับข้อมูลเวกเตอร์สิ่งต่าง ๆ มีความซับซ้อนมากขึ้นไม่เพียงแค่วิธีการสร้างแบบจำลองคุณลักษณะข้อมูลและเวลา แต่ยังรวมถึงวิธีการมองเห็นด้วยตาด้วย มีเอฟเฟ็กต์และภาพเคลื่อนไหวมากมายที่คุณต้องการขึ้นอยู่กับประเภทของข้อมูล

ไชโย


2
hmmmm นี่คือคำตอบใช่ไหม ฟังดูเหมือนความคิดเห็น มันอาจกลายเป็นคำตอบหากคุณเผยแพร่ตัวอย่าง "ง่าย" และ "ซับซ้อน"
tony gil
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.