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

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

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

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

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

• สร้างรหัสแผนที่และรูปแบบแผนที่
• สร้างและอัปโหลดชุดข้อมูล

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

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

ทำตามขั้นตอนต่อไปนี้เพื่อเชื่อมโยงชุดข้อมูลกับรูปแบบแผนที่ที่คุณใช้

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

ข้อควรระวัง: การแสดงผลชุดข้อมูลหลายชุดบนแผนที่อาจส่งผลต่อประสิทธิภาพโดยขึ้นอยู่กับขนาดและจำนวนชุดข้อมูล

ใช้กฎรูปแบบที่เรียบง่าย

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

TypeScript

const styleOptions = {
    strokeColor: 'green',
    strokeWeight: 2,
    strokeOpacity: 1,
    fillColor: 'green',
    fillOpacity: 0.3,
};
index.ts

หมายเหตุ: อ่านคำแนะนำเกี่ยวกับการใช้ TypeScript และ Google Maps

JavaScript

const styleOptions = {
    strokeColor: 'green',
    strokeWeight: 2,
    strokeOpacity: 1,
    fillColor: 'green',
    fillOpacity: 0.3,
};
index.js

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

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

TypeScript

function setStyle(/* FeatureStyleFunctionOptions */ params) {
    // Get the dataset feature, so we can work with all of its attributes.
    const datasetFeature = params.feature;
    // Get all of the needed dataset attributes.
    const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor'];

    // Apply styles. Fill is primary fur color, stroke is secondary fur color.
    switch (furColors) {
        case 'Black+':
            return /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 };
            break;
        case 'Cinnamon+':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 };
            break;
        case 'Cinnamon+Gray':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 };
            break;
        case 'Cinnamon+White':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 };
            break;
        case 'Gray+':
            return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 };
            break;
        case 'Gray+Cinnamon':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+Cinnamon, White':
            return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+White':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 };
            break;
        default: // Color not defined.
            return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 };
            break; 
    }
}
index.ts

หมายเหตุ: อ่านคำแนะนำเกี่ยวกับการใช้ TypeScript และ Google Maps

JavaScript

function setStyle(/* FeatureStyleFunctionOptions */ params) {
    // Get the dataset feature, so we can work with all of its attributes.
    const datasetFeature = params.feature;
    // Get all of the needed dataset attributes.
    const furColors = datasetFeature.datasetAttributes['CombinationofPrimaryandHighlightColor'];
    // Apply styles. Fill is primary fur color, stroke is secondary fur color.
    switch (furColors) {
        case 'Black+':
            return /* FeatureStyleOptions */ { fillColor: 'black', pointRadius: 8 };
            break;
        case 'Cinnamon+':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', pointRadius: 8 };
            break;
        case 'Cinnamon+Gray':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'gray', pointRadius: 6 };
            break;
        case 'Cinnamon+White':
            return /* FeatureStyleOptions */ { fillColor: '#8b0000', strokeColor: 'white', pointRadius: 6 };
            break;
        case 'Gray+':
            return /* FeatureStyleOptions */ { fillColor: 'gray', pointRadius: 8 };
            break;
        case 'Gray+Cinnamon':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+Cinnamon, White':
            return /* FeatureStyleOptions */ { fillColor: 'silver', strokeColor: '#8b0000', pointRadius: 6 };
            break;
        case 'Gray+White':
            return /* FeatureStyleOptions */ { fillColor: 'gray', strokeColor: 'white', pointRadius: 6 };
            break;
        default: // Color not defined.
            return /* FeatureStyleOptions */ { fillColor: 'yellow', pointRadius: 8 };
            break;
    }
}
index.js

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

วิธีใช้รูปแบบในฟังก์ชันรูปแบบฟีเจอร์

1. รับเลเยอร์ฟีเจอร์ชุดข้อมูลโดยการเรียก map.getDatasetFeatureLayer(), ส่งรหัสชุดข้อมูล
2. ใช้สไตล์โดยการตั้งค่าตัวเลือกสไตล์ฟีเจอร์ (เช่น styleOptions) หรือฟังก์ชัน (เช่น setStyle) ในเลเยอร์ชุดข้อมูล

TypeScript

// Dataset ID for NYC park data.
const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';

const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
datasetLayer.style = styleOptions;
index.ts

หมายเหตุ: อ่านคำแนะนำเกี่ยวกับการใช้ TypeScript และ Google Maps

JavaScript

// Dataset ID for NYC park data.
const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';
const datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
datasetLayer.style = styleOptions;
index.js

นำการจัดรูปแบบออกจากเลเยอร์

หากต้องการนำการจัดรูปแบบออกจากเลเยอร์ ให้ตั้งค่า style เป็น null

featureLayer.style = null;

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

เพิ่มข้อความระบุแหล่งที่มา

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

วิธีหนึ่งในการเพิ่มข้อความระบุแหล่งที่มาคือการใช้การควบคุมที่กำหนดเอง เพื่อวาง HTML ที่กำหนดเองในตำแหน่งมาตรฐานบนแผนที่ ข้อมูลโค้ดต่อไปนี้ แสดง HTML และ CSS ที่ใช้สำหรับการระบุแหล่งที่มาในตัวอย่างนี้

<gmp-map center="40.757815, -73.933123" zoom="11" map-id="5cd2c9ca1cf05670" map-type-control="false">
  <div id="attribution" slot="control-block-end-inline-start">Data source: NYC Open Data</div>
</gmp-map>
index.html

#attribution {
  background-color: rgba(255, 255, 255, 0.7);
  font-family: "Roboto", "Arial", "sans-serif";
  font-size: 10px;
  padding: 2px;
  margin: 2px;
}
style.css