เพิ่มชุดข้อมูลลงในแผนที่และชุดข้อมูลรูปแบบ

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

หน้านี้จะแสดงวิธีเพิ่มชุดข้อมูลลงในแผนที่และใช้การจัดรูปแบบ

ภาพหน้าจอแสดงข้อมูลรูปหลายเหลี่ยมที่มีสไตล์

ข้อกำหนดเบื้องต้น

ก่อนดำเนินการต่อ คุณควรมีรหัสแผนที่และสไตล์แผนที่ รวมถึงรหัสชุดข้อมูล

เชื่อมโยงรหัสชุดข้อมูลกับรูปแบบแผนที่

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

วิธีเชื่อมโยงชุดข้อมูลกับรูปแบบแผนที่

  1. ในคอนโซล Google Cloud ให้ไปที่หน้าชุดข้อมูล
  2. คลิกชื่อชุดข้อมูล หน้ารายละเอียดชุดข้อมูลจะปรากฏขึ้น
  3. คลิกแท็บแสดงตัวอย่าง
  4. ในส่วนรูปแบบแผนที่ที่เชื่อมโยง ให้คลิกเพิ่มรูปแบบแผนที่
    ภาพหน้าจอของปุ่ม "เพิ่มรูปแบบแผนที่"
  5. คลิกช่องทําเครื่องหมายของรูปแบบแผนที่ที่จะเชื่อมโยง แล้วคลิกบันทึก

ใช้รูปแบบกับชุดข้อมูล

วิธีใช้สไตล์กับชุดข้อมูล

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

  2. เรียกใช้ FeatureLayer.setFeatureStyle() เพื่อใช้ฟังก์ชัน Style Factory กับองค์ประกอบแต่ละรายการในชุดข้อมูล

สร้างฟังก์ชันโรงงานสไตล์

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

หากโรงงานสไตล์แสดงผลเป็น null ระบบจะไม่แสดงผลฟีเจอร์ที่ระบุ ดูข้อมูลเพิ่มเติมได้ที่นำการจัดสไตล์ออกจากเลเยอร์

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

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

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

นอกจากนี้ คุณยังเรียกใช้ FeatureLayer.getDatasetId() เพื่อรับรหัสของชุดข้อมูลได้ด้วย

กำหนดเส้นโครงร่าง สีเติม และรัศมีของจุด

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

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

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

  • สีเติมและความโปร่งแสงตามที่ระบุโดยคลาส Color ค่าเริ่มต้นคือ โปร่งใส (Color.TRANSPARENT)

  • รัศมีของจุดขององค์ประกอบจุดระหว่าง 0 ถึง 128 พิกเซล

ใช้กฎสไตล์แบบง่าย

วิธีที่ง่ายที่สุดในการจัดสไตล์ฟีเจอร์คือกำหนด FeatureLayer.StyleFactory ซึ่งจะสร้างออบเจ็กต์ FeatureStyle ที่เหมือนกันเสมอ ไม่ว่าฟีเจอร์จะเป็นอย่างไรก็ตาม ใช้ตัวเลือกรูปแบบองค์ประกอบกับเลเยอร์องค์ประกอบของชุดข้อมูลโดยตรง หรือใช้ร่วมกับ FeatureStyleFunction

ใช้กฎสไตล์แบบประกาศ

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

เช่น ใช้เมธอด DatasetFeature.getDatasetAttributes() เพื่อแสดงผลMap<String,String>แอตทริบิวต์ชุดข้อมูลของฟีเจอร์ จากนั้นคุณสามารถปรับแต่งสไตล์ของฟีเจอร์ตามแอตทริบิวต์ของฟีเจอร์ได้

ตัวอย่างนี้จะกำหนดค่าแอตทริบิวต์ "highlightColor" ของฟีเจอร์แต่ละรายการของชุดข้อมูลเพื่อควบคุมการจัดรูปแบบ

Kotlin

// Get the dataset feature, so we can work with all of its attributes.
val datasetFeature: DatasetFeature = feature as DatasetFeature

// Create a switch statement based on the value of the
// "highlightColor" attribute of the dataset.
val attributeColor: MutableMap<String, String> = datasetFeature.getDatasetAttributes()
when (attributeColor["highlightColor"]) {
  "Black" -> {
    ...
  }
  "Red" -> {
    ...
  }
  else -> {
    ...
  }
}

Java

// Get the dataset feature, so we can work with all of its attributes.
DatasetFeature datasetFeature = (DatasetFeature) feature;

// Create a switch statement based on the value of the
// "highlightColor" attribute of the dataset.
Map<String, String> attributeColor = datasetFeature.getDatasetAttributes();
switch(attributeColor.get("highlightColor"))
{
  case "Black":
    ...
    break;
  case "Red":
    ...
    break;
  default: // Color not defined.
    ...
    break;
}

ใช้สไตล์กับเลเยอร์ฟีเจอร์ชุดข้อมูล

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

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

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

    Kotlin

    private var datasetLayer: FeatureLayer? = null
    
override fun onMapReady(googleMap: GoogleMap) {
  // Get the DATASET feature layer.
  datasetLayer = googleMap.getFeatureLayer(FeatureLayerOptions.Builder()
    .featureType(FeatureType.DATASET)
    // Specify the dataset ID.
    .datasetId(YOUR_DATASET_ID)
    .build())
    
  // Apply style factory function to DATASET layer.
  styleDatasetsLayer()
}

    Java

    private FeatureLayer datasetLayer;
    
@Override
public void onMapReady(GoogleMap map) {
  // Get the DATASET feature layer.
  datasetLayer = map.getFeatureLayer(new FeatureLayerOptions.Builder()
    .featureType(FeatureType.DATASET)
    // Specify the dataset ID.
    .datasetId(YOUR_DATASET_ID)
    .build());
    
  // Apply style factory function to DATASET layer.
  styleDatasetsLayer();
}

  3. สร้างฟังก์ชันโรงงานสไตล์และใช้กับเลเยอร์ฟีเจอร์ของชุดข้อมูล

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

    Kotlin

    private fun styleDatasetsLayer() {
    
  // Create the style factory function.
  val styleFactory = FeatureLayer.StyleFactory { feature: Feature ->
    
      // Check if the feature is an instance of DatasetFeature.
      if (feature is DatasetFeature) {
    
            return@StyleFactory FeatureStyle.Builder()
                // Define a style with green fill at 50% opacity and
                // solid green border.
                .fillColor(0x8000ff00.toInt())
                .strokeColor(0xff00ff00.toInt())
                .strokeWidth(2F)
                .build()
      }
      return@StyleFactory null
  }
    
  // Apply the style factory function to the feature layer.
  datasetLayer?.setFeatureStyle(styleFactory)
}

    Java

    private void styleDatasetsLayer() {
    
  // Create the style factory function.
  FeatureLayer.StyleFactory styleFactory = (Feature feature) -> {
    
    // Check if the feature is an instance of DatasetFeature.
    if (feature instanceof DatasetFeature) {
    
        return new FeatureStyle.Builder()
          // Define a style with green fill at 50% opacity and solid green border.
          .fillColor(0x8000ff00)
          .strokeColor(0xff00ff00)
          .strokeWidth(2)
          .build();
      }
      return null;
    };
    
    // Apply the style factory function to the feature layer.
    datasetLayer.setFeatureStyle(styleFactory);
}

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

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

นอกจากนี้ คุณยังส่งคืน null จากโรงงานสไตล์ได้ เช่น หากต้องการให้ฟีเจอร์ชุดย่อยยังคงมองไม่เห็น