การวางซ้อนกระเบื้อง

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
เลือกแพลตฟอร์ม: Android iOS JavaScript

การวางซ้อนแบบเรียงชิดกัน{/0}

ตัวอย่างโค้ด

ที่เก็บข้อมูล ApiDemos ใน GitHub มีตัวอย่างที่แสดงฟีเจอร์การวางซ้อนไทล์

บทนำ

TileOverlay กําหนดชุดรูปภาพที่เพิ่มที่ด้านบนของชิ้นส่วนแผนที่ฐาน

คุณต้องใส่การ์ดสําหรับแต่ละระดับการซูมที่ต้องการรองรับ หากมีไทล์ที่ระดับการซูมหลายระดับ คุณจะเสริมข้อมูลแผนที่ของ Google สําหรับทั้งแผนที่ได้

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

คุณยังใช้การวางซ้อนแบบโปร่งใสเพื่อเพิ่มฟีเจอร์เพิ่มเติมลงในแผนที่ได้โดยการตั้งค่าความโปร่งใสของการวางซ้อนแบบเรียงโปรแกรมแบบเป็นโปรแกรมหรือใส่รูปภาพโปร่งใส

พิกัดกระเบื้องและระดับการซูม

Google Maps API จะแจกแจงภาพในแต่ละระดับการซูมออกเป็นชุดชิ้นส่วนแผนที่สี่เหลี่ยมจัตุรัสที่จัดเรียงอยู่ในตารางกริด เมื่อแผนที่ย้ายไปยังตําแหน่งใหม่หรือระดับการซูมใหม่ Maps API จะกําหนดว่าควรใช้ไทล์ใดและแปลข้อมูลดังกล่าวเป็นชุดชิ้นส่วนเพื่อเรียก

ไทล์ที่มีพิกัด (0,0) จะอยู่ที่มุมทิศตะวันตกเฉียงเหนือของแผนที่เสมอ โดยค่า x จะเพิ่มขึ้นจากทิศตะวันตกไปยังทิศตะวันออก ส่วนค่า y เพิ่มขึ้นจากทิศเหนือถึงทิศใต้ ระบบจะจัดทําดัชนีการ์ดโดยใช้พิกัด x,y จากต้นทางนั้น

ที่ระดับการซูม 0 โลกทั้งใบจะแสดงผลในไทล์เดียว การซูมแต่ละระดับจะเพิ่มการขยายเป็น 2 เท่า ดังนั้นที่ระดับการซูม 1 แผนที่จะแสดงผลเป็นตารางกริดขนาด 2x2 ของชิ้นส่วนแผนที่ และที่ระดับการซูม 2 จะมีตารางกริดขนาด 4x4 และที่ระดับ 3 จะแสดงเป็นตารางกริดขนาด 8x8 เป็นต้น

ตัวอย่างเช่น ที่ระดับการซูม 2 โลกจะแบ่งออกเป็น 16 ชิ้นส่วน ไทล์แต่ละรายการจะอ้างอิงได้ด้วยชุดค่าผสมของ x, y และ Zoom ที่ไม่ซ้ํากัน

แผนที่โลกแบ่งออกเป็น 4 แถวและ 4 คอลัมน์ไทล์

เมื่อสร้างรูปภาพสําหรับเลเยอร์ไทล์ คุณจะต้องสร้างรูปภาพสําหรับการ์ดแต่ละระดับในระดับการซูมแต่ละระดับที่คุณต้องการรองรับ Google Maps จะกําหนดเป้าหมายเป็น 256 dp (พิกเซลที่ไม่เกี่ยวกับอุปกรณ์) เมื่อแสดงการ์ด สําหรับอุปกรณ์ที่มีความละเอียดสูง เราขอแนะนําให้คุณส่งคืนการ์ด dpi สูง (512x512 พิกเซล) โปรดอ่านเอกสารประกอบสําหรับนักพัฒนาซอฟต์แวร์ Android เพื่อดูข้อมูลเกี่ยวกับการรองรับขนาดหน้าจอและความหนาแน่นต่างๆ

หมายเหตุ: ระดับการซูมที่กล้องรองรับจะขึ้นอยู่กับหลายปัจจัย และไม่เกี่ยวข้องกับระดับการซูมที่การ์ดจะรองรับ

  1. GoogleMap.getMaxZoomLevel() แสดงผลระดับการซูมสูงสุดที่มีอยู่ที่ตําแหน่งกล้องปัจจุบัน โดยคํานึงถึงประเภทแผนที่ที่ใช้อยู่ เช่น แผนที่ดาวเทียมหรือภูมิประเทศอาจมีระดับการซูมสูงสุดต่ํากว่าแผนที่แผนที่ฐาน
  2. GoogleMap.getMinZoomLevel() จะแสดงระดับการซูมขั้นต่ําซึ่งเหมือนกันในทุกตําแหน่ง (ต่างจากระดับการซูมสูงสุด) แต่อาจแตกต่างกันไปตามอุปกรณ์และขนาดของแผนที่

เพิ่มการวางซ้อนไทล์

วิธีที่ง่ายที่สุดในการสร้างการวางซ้อนแบบเรียงชิดกันคือ ให้ URL ที่ชี้ไปยังภาพไทล์ที่เกี่ยวข้อง UrlTileProvider เป็นการใช้งานบางส่วน TileProvider ซึ่งระบุชิ้นส่วนรูปภาพตาม URL คลาสนี้กําหนดให้รูปภาพทั้งหมดต้องมีขนาดเท่ากัน

คุณจะต้องใช้ UrlTileProvider.getTileUrl() ซึ่งยอมรับพิกัดไทล์ (x, y, ซูม) และแสดงผล URL ที่นําไปยังรูปภาพที่ใช้สําหรับไทล์ เมธอดควรแสดงผลเป็น Null หากไม่มีการ์ดสําหรับ X, Y และ Zoom ที่ระบุ URL ชี้ไปยังทรัพยากรเว็บ เนื้อหา Android หรือไฟล์ในดิสก์ในเครื่องได้

ตั้งค่ารายการรูปภาพย่อยบนเซิร์ฟเวอร์ ซึ่งกําหนดสําหรับพิกัด x,y และระดับการซูมทั้งหมดที่คุณต้องการรองรับ จากนั้นเพิ่มการวางซ้อนการ์ด ดังนี้

  1. กําหนด UrlTileProvider เพื่อใส่รูปภาพการ์ด
  2. ลบล้าง getTileUrl() เพื่อสร้าง URL สําหรับภาพย่อยแต่ละภาพ
  3. ระบุออบเจ็กต์ TileOverlayOptions ด้วยตัวเลือกที่เกี่ยวข้อง
    • fadeIn: บูลีน ระบุว่าชิ้นส่วนควรจางลงหรือไม่ ค่าเริ่มต้นคือ true การปิดความจางลงเมื่อสลับระหว่างการวางซ้อนแบบชิ้นส่วนได้อย่างรวดเร็วอาจเป็นประโยชน์ ดูข้อมูลเกี่ยวกับความสัมพันธ์ระหว่างความโปร่งใสและการจางลงได้ที่ส่วนความโปร่งใสด้านล่าง
    • tileProvider: TileProvider ที่จะใช้สําหรับการวางซ้อนนี้
    • transparency: ลอย กําหนดปัจจัยความโปร่งใสสําหรับรูปภาพไทล์ ค่าต้องอยู่ในช่วง [0.0f, 1.0f] ที่ 0.0f หมายถึงทึบแสงทั้งหมด (ค่าเริ่มต้น) และ 1.0f หมายถึงโปร่งใสทั้งหมด ดูส่วนความโปร่งใสด้านล่างสําหรับตัวอย่างโค้ดและความสัมพันธ์ระหว่างความโปร่งใสและการจางลง
    • visible: บูลีน ระบุระดับการมองเห็นการวางซ้อนการวางซ้อน การวางซ้อนไทล์ที่มองไม่เห็น (ค่า false) ไม่ได้วาดบนแผนที่ แต่ยังคงเก็บพร็อพเพอร์ตี้อื่นๆ ทั้งหมดไว้ ค่าเริ่มต้นคือ true
    • zIndex: กําหนดลําดับการวาดชิ้นส่วนแบบสัมพัทธ์กับการวางซ้อนอื่นๆ ซึ่งรวมถึงการวางซ้อนพื้น วงกลม โพลีไลน์ และรูปหลายเหลี่ยม การวางซ้อนที่มีดัชนีลําดับ Z สูงกว่าจะแสดงอยู่ด้านบนของดัชนีลําดับ Z ที่ต่ํากว่า ลําดับของการวางซ้อนที่มีดัชนี z เดียวกันนั้นไม่ถูกต้อง ดัชนีลําดับ Z เริ่มต้นคือ 0 โปรดทราบว่าเครื่องหมายจะวาดเหนือการวางซ้อนอื่นๆ เสมอ โดยไม่คํานึงถึงดัชนีลําดับ Z ของการวางซ้อนอื่นๆ
  4. เรียกใช้ GoogleMap.addTileOverlay() เพื่อเพิ่มการวางซ้อนลงในแผนที่

Java


private GoogleMap map;

TileProvider tileProvider = new UrlTileProvider(256, 256) {

    @Override
    public URL getTileUrl(int x, int y, int zoom) {

        /* Define the URL pattern for the tile images */
        String s = String.format("http://my.image.server/images/%d/%d/%d.png", zoom, x, y);

        if (!checkTileExists(x, y, zoom)) {
            return null;
        }

        try {
            return new URL(s);
        } catch (MalformedURLException e) {
            throw new AssertionError(e);
        }
    }

    /*
     * Check that the tile server supports the requested x, y and zoom.
     * Complete this stub according to the tile range you support.
     * If you support a limited range of tiles at different zoom levels, then you
     * need to define the supported x, y range at each zoom level.
     */
    private boolean checkTileExists(int x, int y, int zoom) {
        int minZoom = 12;
        int maxZoom = 16;

        return (zoom >= minZoom && zoom <= maxZoom);
    }
};

TileOverlay tileOverlay = map.addTileOverlay(new TileOverlayOptions()
    .tileProvider(tileProvider));

Kotlin


private lateinit var map: GoogleMap

var tileProvider: TileProvider = object : UrlTileProvider(256, 256) {
    override fun getTileUrl(x: Int, y: Int, zoom: Int): URL? {

        /* Define the URL pattern for the tile images */
        val url = "http://my.image.server/images/$zoom/$x/$y.png"
        return if (!checkTileExists(x, y, zoom)) {
            null
        } else try {
            URL(url)
        } catch (e: MalformedURLException) {
            throw AssertionError(e)
        }
    }

    /*
     * Check that the tile server supports the requested x, y and zoom.
     * Complete this stub according to the tile range you support.
     * If you support a limited range of tiles at different zoom levels, then you
     * need to define the supported x, y range at each zoom level.
     */
    private fun checkTileExists(x: Int, y: Int, zoom: Int): Boolean {
        val minZoom = 12
        val maxZoom = 16
        return zoom in minZoom..maxZoom
    }
}

val tileOverlay = map.addTileOverlay(
    TileOverlayOptions()
        .tileProvider(tileProvider)
)

หากต้องการดูตัวอย่างการทํางานของ UrlTileProvider โปรดดู TileOverlayDemoActivity ในโค้ดตัวอย่างที่มาพร้อมกับ SDK ของบริการ Google Play

ตั้งค่าความโปร่งใสสําหรับการวางซ้อนแบบเรียงชิดกัน

การวางซ้อนแบบโปร่งใสบนแผนที่จะมีประโยชน์เพื่อให้ผู้ใช้ดูแผนที่ฐานด้านล่างการ์ดที่วางซ้อนได้ ซึ่งทําได้โดยการระบุการ์ดโปร่งใสของคุณเอง หรือตั้งค่าปัจจัยความโปร่งใสในการวางซ้อนไทล์แบบเป็นโปรแกรม

ตัวอย่างโค้ดต่อไปนี้จะสลับความโปร่งใสของการวางซ้อนกระเบื้องระหว่าง 0.5f และ 0.0f

Java


private TileOverlay tileOverlayTransparent;

@Override
public void onMapReady(GoogleMap map) {
    tileOverlayTransparent = map.addTileOverlay(new TileOverlayOptions()
        .tileProvider(new UrlTileProvider(256, 256) {
            // ...
        })
        .transparency(0.5f));
}

// Switch between 0.0f and 0.5f transparency.
public void toggleTileOverlayTransparency() {
    if (tileOverlayTransparent != null) {
        tileOverlayTransparent.setTransparency(0.5f - tileOverlayTransparent.getTransparency());
    }
}

Kotlin


private var tileOverlayTransparent: TileOverlay? = null

override fun onMapReady(map: GoogleMap) {
    tileOverlayTransparent = map.addTileOverlay(
        TileOverlayOptions()
            .tileProvider(object : UrlTileProvider(256, 256) {
                // ...
            })
            .transparency(0.5f)
    )
}

// Switch between 0.0f and 0.5f transparency.
fun toggleTileOverlayTransparency() {
    tileOverlayTransparent?.let {
        it.transparency = 0.5f - it.transparency
    }
}

และใช้ความโปร่งใสเป็นตัวคูณช่องอัลฟ่าสําหรับรูปภาพไทล์ หากต้องการตั้งค่าความโปร่งใสของการวางซ้อนไทล์ ให้ระบุออบเจ็กต์ TileOverlayOptions ที่มี transparency ในช่วง [0.0f, 1.0f] ดังที่แสดงในตัวอย่างด้านบน ค่า 0.0f หมายความว่าการวางซ้อนกระเบื้องจะทึบแสงและ 1.0f หมายถึงโปร่งใสทั้งหมด ค่าเริ่มต้นคือ 0.0f (ทึบ)

คุณเข้าถึงความโปร่งใสของการวางซ้อนแบบเรียงชิดกันได้โดยเรียกใช้ TileOverlay.getTransparency() และเปลี่ยนได้โดยเรียกใช้ TileOverlay.setTransparency()

ความโปร่งใส ภาพเคลื่อนไหว และการจางลง

ไม่มีภาพเคลื่อนไหวเมื่อมีการเปลี่ยนแปลงความโปร่งใส ตัวเลือกความโปร่งใสจะทํางานควบคู่ไปกับตัวเลือก fadeIn

การจางลงจะแสดงภาพเคลื่อนไหวของความโปร่งใสเมื่อโหลดการ์ด หากคุณกําหนดค่าความโปร่งใส ชิ้นส่วนจะค่อยๆ จางหายไปจากค่าโปร่งใสที่กําหนดไว้ หากเปลี่ยนความโปร่งใสระหว่างการค่อยๆ จางลง ภาพเคลื่อนไหวจะไปยังความโปร่งใสเป้าหมายใหม่ต่อไป

นําการวางซ้อนไทล์ออก

คุณนําการวางซ้อนแบบไทล์ออกได้โดยใช้เมธอด TileOverlay.remove()

Java


tileOverlay.remove();

Kotlin


tileOverlay?.remove()

ล้างการ์ดที่ไม่มีอัปเดต

หากไทล์ที่การวางซ้อนแบบเรียงชิดกันกลายเป็น "ไม่มีอัปเดต" คุณสามารถเรียกใช้ clearTileCache() เพื่อบังคับให้รีเฟรชได้ การดําเนินการนี้จะทําให้ระบบโหลดการ์ดทั้งหมดในการวางซ้อนนี้ซ้ํา ตัวอย่างเช่น หากการ์ดที่ได้มาจาก TileProvider มีการเปลี่ยนแปลง คุณต้องเรียกใช้ clearTileCache() หลังจากนั้นเพื่อไม่ให้การ์ดก่อนหน้าแสดงผลอีกต่อไป

Java


tileOverlay.clearTileCache();

Kotlin


tileOverlay?.clearTileCache()