การวางซ้อนของชิ้นส่วนแผนที่

เลือกแพลตฟอร์ม: Android iOS JavaScript

การวางซ้อนของชิ้นส่วนแผนที่ หรือที่เรียกว่าเลเยอร์ชิ้นส่วนแผนที่ คือชุดรูปภาพที่ แสดงอยู่ด้านบนของชิ้นส่วนแผนที่ฐาน

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

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

  • TileOverlayDemoActivity - Java: ฟีเจอร์การวางซ้อนของชิ้นส่วนแผนที่ใน Java
  • TileCoordinateDemoActivity - Java: ระบบพิกัดที่ใช้ สำหรับการวางซ้อนของชิ้นส่วนแผนที่ใน Java
  • TileOverlayDemoActivity - Kotlin: ฟีเจอร์การวางซ้อนของชิ้นส่วนแผนที่ใน Kotlin
  • TileCoordinateDemoActivity - Kotlin: ระบบพิกัดที่ใช้ สำหรับการวางซ้อนของชิ้นส่วนแผนที่ใน Kotlin

บทนำ

ออบเจ็กต์ 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 และการซูม ดังนี้

แผนที่โลกที่แบ่งออกเป็น 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 และการซูมที่ระบุ 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-index สูงกว่าจะวาดอยู่ด้านบนของการวางซ้อนที่มี z-index ต่ำกว่า ลำดับของการวางซ้อนที่มี z-index เดียวกันจะขึ้นอยู่กับดุลยพินิจ z-index เริ่มต้นคือ 0 โปรดทราบว่า มาร์กเกอร์ จะ วาดไว้เหนือการวางซ้อนอื่นๆ เสมอ ไม่ว่า z-index ของการวางซ้อน อื่นๆ จะเป็นเท่าใด
  4. เรียกใช้ GoogleMap.addTileOverlay() เพื่อเพิ่มการวางซ้อนลงใน แผนที่

Kotlin

val 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)
)
tileOverlay?.let {
    val isVisible = it.isVisible
    val fadeIn = it.fadeIn
    val transparency = it.transparency
    val zIndex = it.zIndex
}

Java

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(java.util.Locale.US, "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));

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

ตั้งค่าความโปร่งใสสำหรับการวางซ้อนของชิ้นส่วนแผนที่

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

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

Kotlin

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

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

Java

TileOverlay tileOverlayTransparent = map.addTileOverlay(new TileOverlayOptions()
    .tileProvider(new UrlTileProvider(256, 256) {
        // ...
    })
    .transparency(0.5f));

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

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

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

ความโปร่งใส ภาพเคลื่อนไหว และการค่อยๆ ปรากฏขึ้น

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

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

นำการวางซ้อนของชิ้นส่วนแผนที่ออก

คุณนำการวางซ้อนของชิ้นส่วนแผนที่ออกได้ด้วยเมธอด TileOverlay.remove()

Kotlin

tileOverlay?.remove()

Java

tileOverlay.remove();

ล้างชิ้นส่วนแผนที่ที่ล้าสมัย

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

Kotlin

tileOverlay?.clearTileCache()

Java

tileOverlay.clearTileCache();