จัดรูปแบบรูปหลายเหลี่ยมขอบเขต

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

วิธีใช้รูปแบบสำหรับเส้นขอบและสีเติมกับรูปหลายเหลี่ยมขอบเขตในเลเยอร์ของฟีเจอร์

  1. สร้างฟังก์ชัน Style Factory ที่ใช้อินเทอร์เฟซ FeatureLayer.StyleFactory ฟังก์ชันนี้จะกำหนดตรรกะการจัดสไตล์สำหรับเลเยอร์ของฟีเจอร์

  2. เรียกใช้ FeatureLayer.setFeatureStyle() เพื่อใช้ฟังก์ชัน Style Factory กับเลเยอร์ของฟีเจอร์

แผนที่ตัวอย่างต่อไปนี้แสดงการไฮไลต์รูปหลายเหลี่ยมขอบเขตสำหรับภูมิภาคเดียวในเลเยอร์ของฟีเจอร์ของสถานที่

ภาพหน้าจอแสดงรูปหลายเหลี่ยมของ Hana Hawaii

สร้างฟังก์ชัน Style Factory

ฟังก์ชัน Style Factory จะใช้กับรูปหลายเหลี่ยมทุกรูปในเลเยอร์ของฟีเจอร์ที่ได้รับผลกระทบในขณะที่คุณตั้งค่าฟังก์ชันในเลเยอร์ของฟีเจอร์ ฟังก์ชันนี้ต้อง แสดงผลออบเจ็กต์ FeatureStyle ที่ระบุวิธีจัดสไตล์รูปหลายเหลี่ยม

Maps SDK สำหรับ Android จะส่ง Feature อินสแตนซ์ไปยังฟังก์ชัน Style Factory อินสแตนซ์ Feature แสดงข้อมูลเมตาของฟีเจอร์ ซึ่งช่วยให้คุณเข้าถึงข้อมูลเมตาในฟังก์ชัน Style Factory ได้

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

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

  • เปิดใช้เฉพาะ Feature Layer ที่คุณต้องการ

  • เรียกใช้ FeatureLayer.setFeatureStyle(null) เมื่อไม่ได้ใช้เลเยอร์ของฟีเจอร์อีกต่อไป

กำหนดเส้นขอบและสีเติมของรูปหลายเหลี่ยม

เมื่อจัดสไตล์รูปหลายเหลี่ยมขอบเขตในฟังก์ชัน Style Factory คุณจะกำหนดสิ่งต่อไปนี้ได้

  • สีและความทึบแสงของเส้นขอบ รูปหลายเหลี่ยมในรูปแบบสี ARGB ตามที่กำหนดโดย Color คลาส ค่าเริ่มต้นคือโปร่งใส (0x00000000)

  • ความกว้างของเส้นขอบ รูปหลายเหลี่ยมเป็นพิกเซลบนหน้าจอ ค่าเริ่มต้นคือ 2

  • สีและความทึบแสงของสีเติม รูปหลายเหลี่ยมในรูปแบบสี ARGB ตามที่ กำหนดโดย Color คลาส ค่าเริ่มต้นคือโปร่งใส (0x00000000)

ค้นหารหัสสถานที่เพื่อกำหนดเป้าหมายฟีเจอร์

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

รหัสสถานที่จะระบุสถานที่ในฐานข้อมูล Google Places และใน Google Maps โดยไม่ซ้ำกัน วิธีรับรหัสสถานที่มีดังนี้

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

ความครอบคลุมจะแตกต่างกันไปตามภูมิภาค ดูรายละเอียดได้ที่ ความครอบคลุมของขอบเขต Google

ชื่อทางภูมิศาสตร์มีให้ใช้งานจากแหล่งที่มาหลายแห่ง เช่น USGS Board on Geographic Names และ U.S. Gazetteer Files

ใช้ PlaceFeature เพื่อรับรหัสสถานที่

คลาส PlaceFeature เป็นคลาสย่อยของคลาส Feature โดยแสดงถึง ฟีเจอร์สถานที่ (ฟีเจอร์ที่มีรหัสสถานที่) ซึ่งรวมถึงฟีเจอร์ประเภท ADMINISTRATIVE_AREA_LEVEL_1, ADMINISTRATIVE_AREA_LEVEL_2, COUNTRY, LOCALITY, POSTAL_CODE และ SCHOOL_DISTRICT

เมื่อรหัสสถานที่พร้อมใช้งาน Maps SDK สำหรับ Android จะส่งอินสแตนซ์ของ PlaceFeature ไปยังฟังก์ชัน Style Factory เพื่อให้คุณกำหนดตำแหน่งของฟีเจอร์ได้

ตัวอย่าง Style Factory

ตัวอย่างนี้ใช้ฟังก์ชัน Style Factory กับรูปหลายเหลี่ยมในเลเยอร์ของฟีเจอร์ของสถานที่ ฟังก์ชัน Style Factory จะกำหนดรหัสสถานที่ของฟีเจอร์โดยใช้อินสแตนซ์ PlaceFeature หากรหัสสถานที่เป็นของ Hana, Hawaii ฟังก์ชันจะใช้สไตล์สีเติมและเส้นขอบที่กำหนดเองกับรูปหลายเหลี่ยม โดยทำดังนี้

  1. หากยังไม่ได้ทำ ให้ทำตามขั้นตอนใน เริ่มต้นใช้งาน เพื่อสร้างรหัสแผนที่และสไตล์แผนที่ใหม่ อย่าลืมเปิดใช้เลเยอร์ของฟีเจอร์สถานที่

  2. รับการอ้างอิงไปยังเลเยอร์ของฟีเจอร์สถานที่เมื่อแผนที่เริ่มต้น

    Java

    private FeatureLayer localityLayer;
    
@Override
public void onMapReady(GoogleMap map) {
  // Get the LOCALITY feature layer.
  localityLayer = map.getFeatureLayer(new FeatureLayerOptions.Builder()
    .featureType(FeatureType.LOCALITY)
    .build());
    
  // Apply style factory function to LOCALITY layer.
  styleLocalityLayer();
}

    Kotlin

    private var localityLayer: FeatureLayer? = null
    
override fun onMapReady(googleMap: GoogleMap) {
  // Get the LOCALITY feature layer.
  localityLayer = googleMap.getFeatureLayer(FeatureLayerOptions.Builder()
    .featureType(FeatureType.LOCALITY)
    .build())
    
  // Apply style factory function to LOCALITY layer.
  styleLocalityLayer()
}

  3. สร้างฟังก์ชัน Style Factory และใช้กับเลเยอร์ของฟีเจอร์ของสถานที่

    ตัวอย่างต่อไปนี้จะใช้ฟังก์ชันก็ต่อเมื่อรหัสสถานที่ของฟีเจอร์เป็นของ Hana, Hawaii ("ChIJ0zQtYiWsVHkRk8lRoB1RNPo") หากรหัสสถานที่ที่ระบุไม่ใช่ของ Hana, Hawaii ระบบจะไม่ใช้สไตล์

    Java

    private void styleLocalityLayer() {
    
  // Create the style factory function.
  FeatureLayer.StyleFactory styleFactory = (Feature feature) -> {
    
    // Check if the feature is an instance of PlaceFeature,
    // which contains a place ID.
    if (feature instanceof PlaceFeature) {
      PlaceFeature placeFeature = (PlaceFeature) feature;
    
      // Determine if the place ID is for Hana, HI.
      if (placeFeature.getPlaceId().equals("ChIJ0zQtYiWsVHkRk8lRoB1RNPo")) {
    
        // Use FeatureStyle.Builder to configure the FeatureStyle object
        // returned by the style factory function.
        return new FeatureStyle.Builder()
          // Define a style with purple fill at 50% opacity and solid purple border.
          .fillColor(0x80810FCB)
          .strokeColor(0xFF810FCB)
          .build();
      }
    }
    return null;
  };
    
  // Apply the style factory function to the feature layer.
  localityLayer.setFeatureStyle(styleFactory);
}

    Kotlin

    private fun styleLocalityLayer() {
    
  // Create the style factory function.
  val styleFactory = FeatureLayer.StyleFactory { feature: Feature ->
    
      // Check if the feature is an instance of PlaceFeature,
      // which contains a place ID.
      if (feature is PlaceFeature) {
          val placeFeature: PlaceFeature = feature as PlaceFeature
    
          // Determine if the place ID is for Hana, HI.
          if (placeFeature.getPlaceId().equals("ChIJ0zQtYiWsVHkRk8lRoB1RNPo")) {
    
              // Use FeatureStyle.Builder to configure the FeatureStyle object
              // returned by the style factory function.
              return@StyleFactory FeatureStyle.Builder()
                  // Define a style with purple fill at 50% opacity and
                  // solid purple border.
                  .fillColor(0x80810FCB.toInt())
                  .strokeColor(0xFF810FCB.toInt())
                  .build()
          }
      }
      return@StyleFactory null
  }
    
  // Apply the style factory function to the feature layer.
  localityLayer?.setFeatureStyle(styleFactory)
}

นำการจัดสไตล์ออกจากเลเยอร์

หากต้องการนำการจัดสไตล์ออกจากเลเยอร์ ให้เรียกใช้ FeatureLayer.setFeatureStyle(null)