แอปแผนที่เว็บแบบปูกระเบื้องออฟไลน์


23

ฉันไม่แน่ใจว่าจะโพสต์ที่นี่หรือใน Stackoverflow เนื่องจากเป็นครอสโอเวอร์ ให้ฉันลองดู

ในมาตรฐาน HTML5 ที่นำเสนอมีตัวเลือกในการจัดเก็บข้อมูลการใช้เว็บในแคชท้องถิ่นโดยใช้การแคชอย่างชัดแจ้ง ฉันกำลังมองหาที่จะใช้เทคนิคนี้สำหรับแอปพลิเคชั่นแผนที่บนเว็บแบบออฟไลน์และทำต้นแบบอย่างรวดเร็วที่นี่ตามมาตรฐานการติดตั้งของ Geoserver

ฉันเพิ่งฉีกหน้าไคลเอนต์ OpenLayers ที่สร้างขึ้นจากเลเยอร์เริ่มต้นและเปลี่ยน<html>แท็กเป็น

<html xmlns="http://www.w3.org/1999/xhtml" manifest="cache.manifest">

และสร้างไฟล์cache.manifestที่อ่านง่าย

CACHE MANIFEST
http://lima.schaaltreinen.nl:8080/

ซึ่งในความเข้าใจที่ จำกัด ของฉันเกี่ยวกับเรื่องนี้แคชภายในเครื่องทุกอย่างที่โหลดจาก URL นั้น: ไทล์ทั้งหมดและ OpenLayers JS อันที่จริงแล้วเมื่อมีการโทรครั้งแรกใน Firefox จะขอให้ฉันอนุญาตการจัดเก็บในตัวเครื่อง แต่เมื่อฉันกดรีเฟรชไม่ว่าจะออนไลน์หรือออฟไลน์หน้าเว็บก็บ่นว่าไม่มีการกำหนดวัตถุ OpenLayers ดูเหมือนว่าไม่ได้โหลด OpenLayers JS

ทุกคนประสบความสำเร็จในการใช้งานแอพพลิเคชั่นแผนที่บนเว็บ OpenLayers แบบออฟไลน์ได้หรือไม่ หรือบอกใบ้ถึงวิธีการตรวจสอบนี้เพิ่มเติม

คำตอบ:


9

คุณอาจสนใจโครงการของMaps บน Stickและ MapBox iPad (ข้อจำกัดความรับผิดชอบ: ได้รับการออกแบบมาก่อนมีส่วนร่วมในภายหลังอย่างไรก็ตามทั้งสองได้รับใบอนุญาต BSD และรูปแบบไทล์พื้นฐานที่เรียกว่า " .mbtiles" เป็น SQL-based)

Maps on the Stick เป็นแผนที่ OpenLayers ออฟไลน์ เหตุผลหลักในการไปกับฐานข้อมูลแบบพกพา / เซิร์ฟเวอร์แทนที่จะเป็นที่เก็บข้อมูลฝั่งไคลเอ็นต์คือการใช้เบราว์เซอร์เนื่องจากการจัดเก็บข้อมูลขนาดใหญ่นั้นไม่ค่อยได้ผล


ทางออกที่น่าสนใจไม่ใช่สิ่งที่ฉันคิด แต่มันก็ดูใช้งานได้ การโหลด MapBox / Maps บน Stick นั้นง่ายหรือยากเพียงใด
mvexel

1
มันค่อนข้างง่าย: มีเครื่องมือไม่กี่ตัวคือผู้นำเข้าแบบ C ( github.com/developmentseed/mb_tiles_importer ), รุ่นของ gdal2tiles ที่ส่งออก mbtiles ( github.com/developmentseed/gdal2mb ) และเครื่องมือ GUI ที่กำลังจะมีขึ้น
tmcw

4

คิดว่าคุณจะต้องสร้างtilecacheของคุณเองที่ 'localhost' ดูที่http://code.google.com/p/cumberland/wiki/TilePyramiderAndOpenLayers

ตัวอย่าง

    Using vmap
    http://localhost:8081/vmap0/levelzero/0/0.png
    The tile near the middle of the tile set in the third zoom level of vmap0.
    http://localhost:8081/vmap0/leveltwo/3/4.png
    The tile near the middle of the tile set in the fifth zoom level of landsat2000.
    hhttp://localhost:8081/vmap0/landsat2000/1/8500/8500.png
Source:
    The tile at the origin of the tile set in the first zoom level of basemap.
    http://www.osgeo.org/services/basemap/L1/0/0.png

หมายเหตุ: ต้องไม่มีช่องว่าง


สิ่งนี้มีประโยชน์ แต่ต้องใช้เว็บเซิร์ฟเวอร์ในตัวเครื่องซึ่งอาจไม่สามารถทำได้เช่นเมื่อคุณต้องการให้มันทำงานบน iPhone / iPad โดยทั่วไปฉันต้องการบรรลุสิ่งนี้โดยไม่มีข้อกำหนดใด ๆ ในฝั่งไคลเอ็นต์นอกเหนือจากเว็บเบราว์เซอร์ที่เข้าใจ HTML5 / แคชอย่างชัดแจ้ง
mvexel


1
ฉันเชื่อมโยงไปยังหน้านั้นในคำถามเดิมแล้ว ฉันรู้ว่านี่เป็นวิธีที่จะไป แต่ฉันพยายามที่จะหาว่ามันเป็นไปได้ทั้งหมด
mvexel

3

ความซับซ้อนอย่างหนึ่งที่ดูเหมือนจะปรากฏในบทความเกี่ยวกับเรื่องนี้คือ:

โปรดทราบว่าประเภท MIME ของไฟล์รายการนั้นคือ text / cache-manifest

และตัวอย่างทั้งหมดดูเหมือนจะแสดงรายการไฟล์ที่เฉพาะเจาะจงเพื่อแคช (แต่ฉันอาจต้องอ่านเพิ่มเติม)


นั่นคือสิ่งหนึ่งที่ไม่ชัดเจนสำหรับฉัน: ไม่ว่าคุณจะต้องอนุญาตรายการ URL ที่เฉพาะเจาะจงหรือคุณสามารถใช้ส่วนนำหน้า URL ฉันยังไม่สามารถทดสอบสิ่งนี้ได้ ใครมีบ้าง
mvexel

3

อาจเป็นวิธีการอื่น: Geopublisher http://www.geopublishing.org/สามารถเผยแพร่แผนที่ของคุณสำหรับการใช้งานแบบออฟไลน์ Geopublisher เป็นซอฟต์แวร์เดสก์ท็อปที่ให้คุณเชื่อมต่อข้อมูลเวกเตอร์และแรสเตอร์และสร้างแผนที่ดิจิทัล จากนั้นคุณสามารถส่งออกแผนที่นี้เป็นแอปพลิเคชัน Java แบบสแตนด์อะโลน มันยังสร้างไฟล์ autostart เป็นต้นและไม่จำเป็นต้องมีการติดตั้ง Java บนคอมพิวเตอร์เป้าหมาย

UPDATE 2018: Geopublisher ไม่ได้รับการพัฒนาอย่างแข็งขันอีกต่อไป


หมายเหตุ: ปลายทางเป็นภาษาเยอรมันแม้ว่า URL จะเป็นเวอร์ชั่นภาษาอังกฤษของเว็บไซต์ ในการแก้ไขปัญหาให้ค้นหาลิงค์ [ภาษาอังกฤษ] ในคอลัมน์นำทางด้านซ้าย
matt wilkie
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.