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

เลือกแพลตฟอร์ม 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

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

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

JavaScript

const datasetLayer = map.getDatasetFeatureLayer(datasetId);

datasetLayer.style = styleOptions;
index.js

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

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

featureLayer.style = null;

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

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

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

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

TypeScript

function createAttribution(map) {
    const attributionLabel = document.createElement('div');
    // Define CSS styles.
    attributionLabel.style.backgroundColor = '#fff';
    attributionLabel.style.opacity = '0.7';
    attributionLabel.style.fontFamily = 'Roboto,Arial,sans-serif';
    attributionLabel.style.fontSize = '10px';
    attributionLabel.style.padding = '2px';
    attributionLabel.style.margin = '2px';
    attributionLabel.textContent = 'Data source: NYC Open Data';
    return attributionLabel;
}
index.ts

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

JavaScript

function createAttribution(map) {
  const attributionLabel = document.createElement("div");

  // Define CSS styles.
  attributionLabel.style.backgroundColor = "#fff";
  attributionLabel.style.opacity = "0.7";
  attributionLabel.style.fontFamily = "Roboto,Arial,sans-serif";
  attributionLabel.style.fontSize = "10px";
  attributionLabel.style.padding = "2px";
  attributionLabel.style.margin = "2px";
  attributionLabel.textContent = "Data source: NYC Open Data";
  return attributionLabel;
}
index.js

เมื่อกําหนดการควบคุมแล้ว คุณสามารถเพิ่มการควบคุมลงในแผนที่ได้เมื่อเริ่มต้น ดังที่แสดงที่นี่

TypeScript

// Create an attribution DIV and add the attribution to the map.
const attributionDiv = document.createElement('div');
const attributionControl = createAttribution(map);
attributionDiv.appendChild(attributionControl);
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
index.ts

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

JavaScript

// Create an attribution DIV and add the attribution to the map.
const attributionDiv = document.createElement("div");
const attributionControl = createAttribution(map);

attributionDiv.appendChild(attributionControl);
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
index.js