Lớp dữ liệu

Chọn nền tảng: Android iOS JavaScript

Lớp Dữ liệu Google Maps cung cấp vùng chứa cho dữ liệu không gian địa lý tùy ý. Bạn có thể sử dụng lớp Dữ liệu để lưu trữ dữ liệu tùy chỉnh của mình hoặc hiển thị dữ liệu GeoJSON trên bản đồ của Google.

Tổng quan

Xem video DevBytes này để tìm hiểu thêm về Lớp dữ liệu.

Với API JavaScript cho Maps, bạn có thể đánh dấu một bản đồ bằng nhiều lớp phủ, chẳng hạn như điểm đánh dấu, nhiều đường, đa giác, v.v. Mỗi chú thích trong số này kết hợp thông tin định kiểu với dữ liệu vị trí. Lớp google.maps.Data là vùng chứa dữ liệu không gian địa lý tuỳ ý. Thay vì thêm các lớp phủ này, bạn có thể sử dụng lớp Dữ liệu để thêm dữ liệu địa lý tùy ý vào bản đồ của mình. Nếu dữ liệu đó chứa các hình học, chẳng hạn như điểm, đường hoặc đa giác, API sẽ hiển thị các hình này theo mặc định dưới dạng điểm đánh dấu, nhiều đường và đa giác. Bạn có thể tạo kiểu cho các đối tượng này như khi tạo lớp phủ thông thường hoặc áp dụng quy tắc tạo kiểu dựa trên các thuộc tính khác có trong tập dữ liệu của bạn.

Lớp google.maps.Data cho phép bạn:

  • Vẽ đa giác trên bản đồ.
  • Thêm dữ liệu GeoJSON vào bản đồ của bạn.
    GeoJSON là một tiêu chuẩn cho dữ liệu không gian địa lý trên Internet. Lớp Data tuân theo cấu trúc của GeoJSON trong bản trình bày dữ liệu và giúp bạn dễ dàng hiển thị dữ liệu GeoJSON. Hãy sử dụng phương thức loadGeoJson() để dễ dàng nhập dữ liệu GeoJSON và hiển thị điểm, chuỗi dòng và đa giác.
  • Sử dụng google.maps.Data để lập mô hình dữ liệu tuỳ ý.
    Hầu hết các thực thể trong thế giới thực đều có các thuộc tính khác liên kết với chúng. Ví dụ: cửa hàng có giờ mở cửa, đường có tốc độ giao thông cao và mỗi đoàn hướng dẫn nữ sinh có một bãi cỏ bán bánh quy. Với google.maps.Data, bạn có thể lập mô hình các thuộc tính này và tạo kiểu cho dữ liệu của mình cho phù hợp.
  • Chọn cách trình bày dữ liệu của bạnthay đổi suy nghĩ của bạn.
    Lớp Dữ liệu cho phép bạn đưa ra quyết định về hình ảnh và hoạt động tương tác với dữ liệu của mình. Ví dụ: khi xem bản đồ các cửa hàng tiện lợi, bạn có thể chọn chỉ hiển thị những cửa hàng bán vé đi phương tiện công cộng.

Vẽ đa giác

Lớp Data.Polygon sẽ xử lý việc cuộn đa giác cho bạn. Bạn có thể chuyển giá trị này vào một mảng gồm một hoặc nhiều vòng tuyến tính, được xác định là vĩ độ/kinh độ. Vòng tuyến tính đầu tiên xác định ranh giới bên ngoài của đa giác. Nếu bạn truyền nhiều vòng tròn tuyến tính, các vòng tuyến tính thứ hai và các vòng tiếp theo sẽ được dùng để xác định đường dẫn bên trong (các lỗ) trong đa giác.

Ví dụ sau đây tạo một đa giác hình chữ nhật có hai lỗ:

TypeScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 6,
      center: { lat: -33.872, lng: 151.252 },
    }
  );

  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 }, // north west
    { lat: -35.364, lng: 153.207 }, // south west
    { lat: -35.364, lng: 158.207 }, // south east
    { lat: -32.364, lng: 158.207 }, // north east
  ];

  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];

  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: { lat: -33.872, lng: 151.252 },
  });
  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 },
    { lat: -35.364, lng: 153.207 },
    { lat: -35.364, lng: 158.207 },
    { lat: -32.364, lng: 158.207 }, // north east
  ];
  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];
  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

window.initMap = initMap;

Tải GeoJSON

GeoJSON là một tiêu chuẩn phổ biến để chia sẻ dữ liệu không gian địa lý trên Internet. Tệp này có kích thước nhỏ và dễ đọc đối với người dùng, lý tưởng để chia sẻ và cộng tác. Với lớp Dữ liệu, bạn có thể thêm dữ liệu GeoJSON vào bản đồ Google chỉ trong một dòng mã.

map.data.loadGeoJson('google.json');

Mỗi bản đồ đều có một đối tượng map.data đóng vai trò là một lớp dữ liệu cho dữ liệu không gian địa lý tuỳ ý, bao gồm cả GeoJSON. Bạn có thể tải và hiển thị tệp GeoJSON bằng cách gọi phương thức loadGeoJSON() của đối tượng data. Ví dụ bên dưới cho biết cách thêm bản đồ và tải dữ liệu GeoJSON bên ngoài.

TypeScript

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 4,
    center: { lat: -28, lng: 137 },
  });

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
    "https://storage.googleapis.com/mapsdevsite/json/google.json"
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -28, lng: 137 },
  });
  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
    "https://storage.googleapis.com/mapsdevsite/json/google.json"
  );
}

window.initMap = initMap;
Xem ví dụ

Dùng thử mẫu

Ví dụ về GeoJSON

Hầu hết ví dụ trên trang này đều sử dụng tệp GeoJSON phổ biến. Tệp này xác định sáu ký tự trong "Google" là các đa giác trên Úc. Vui lòng sao chép hoặc sửa đổi tệp này khi bạn thử nghiệm lớp Dữ liệu.

Lưu ý: Để tải tệp json từ một miền khác, miền đó phải bật tính năng Chia sẻ tài nguyên trên nhiều nguồn gốc.

Bạn có thể xem toàn bộ văn bản của tệp bằng cách mở rộng mũi tên nhỏ bên cạnh các từ mà google.json.

google.json

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "letter": "G",
        "color": "blue",
        "rank": "7",
        "ascii": "71"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40],
            [118.65, -24.76], [118.43, -26.07], [118.78, -27.56], [119.22, -28.57], [120.23, -29.49],
            [121.77, -29.87], [123.57, -29.64], [124.45, -29.03], [124.71, -27.95], [124.80, -26.70],
            [124.80, -25.60], [123.61, -25.64], [122.56, -25.64], [121.72, -25.72], [121.81, -26.62],
            [121.86, -26.98], [122.60, -26.90], [123.57, -27.05], [123.57, -27.68], [123.35, -28.18],
            [122.51, -28.38], [121.77, -28.26], [121.02, -27.91], [120.49, -27.21], [120.14, -26.50],
            [120.10, -25.64], [120.27, -24.52], [120.67, -23.68], [121.72, -23.32], [122.43, -23.48],
            [123.04, -24.04], [124.54, -24.28], [124.58, -23.20], [123.61, -22.14]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "red",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [128.84, -25.76], [128.18, -25.60], [127.96, -25.52], [127.88, -25.52], [127.70, -25.60],
            [127.26, -25.79], [126.60, -26.11], [126.16, -26.78], [126.12, -27.68], [126.21, -28.42],
            [126.69, -29.49], [127.74, -29.80], [128.80, -29.72], [129.41, -29.03], [129.72, -27.95],
            [129.68, -27.21], [129.33, -26.23], [128.84, -25.76]
          ],
          [
            [128.45, -27.44], [128.32, -26.94], [127.70, -26.82], [127.35, -27.05], [127.17, -27.80],
            [127.57, -28.22], [128.10, -28.42], [128.49, -27.80], [128.45, -27.44]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "yellow",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [131.87, -25.76], [131.35, -26.07], [130.95, -26.78], [130.82, -27.64], [130.86, -28.53],
            [131.26, -29.22], [131.92, -29.76], [132.45, -29.87], [133.06, -29.76], [133.72, -29.34],
            [134.07, -28.80], [134.20, -27.91], [134.07, -27.21], [133.81, -26.31], [133.37, -25.83],
            [132.71, -25.64], [131.87, -25.76]
          ],
          [
            [133.15, -27.17], [132.71, -26.86], [132.09, -26.90], [131.74, -27.56], [131.79, -28.26],
            [132.36, -28.45], [132.93, -28.34], [133.15, -27.76], [133.15, -27.17]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "g",
        "color": "blue",
        "rank": "7",
        "ascii": "103"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [138.12, -25.04], [136.84, -25.16], [135.96, -25.36], [135.26, -25.99], [135, -26.90],
            [135.04, -27.91], [135.26, -28.88], [136.05, -29.45], [137.02, -29.49], [137.81, -29.49],
            [137.94, -29.99], [137.90, -31.20], [137.85, -32.24], [136.88, -32.69], [136.45, -32.36],
            [136.27, -31.80], [134.95, -31.84], [135.17, -32.99], [135.52, -33.43], [136.14, -33.76],
            [137.06, -33.83], [138.12, -33.65], [138.86, -33.21], [139.30, -32.28], [139.30, -31.24],
            [139.30, -30.14], [139.21, -28.96], [139.17, -28.22], [139.08, -27.41], [139.08, -26.47],
            [138.99, -25.40], [138.73, -25.00 ], [138.12, -25.04]
          ],
          [
            [137.50, -26.54], [136.97, -26.47], [136.49, -26.58], [136.31, -27.13], [136.31, -27.72],
            [136.58, -27.99], [137.50, -28.03], [137.68, -27.68], [137.59, -26.78], [137.50, -26.54]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "l",
        "color": "green",
        "rank": "12",
        "ascii": "108"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [140.14,-21.04], [140.31,-29.42], [141.67,-29.49], [141.59,-20.92], [140.14,-21.04]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "e",
        "color": "red",
        "rank": "5",
        "ascii": "101"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [144.14, -27.41], [145.67, -27.52], [146.86, -27.09], [146.82, -25.64], [146.25, -25.04],
            [145.45, -24.68], [144.66, -24.60], [144.09, -24.76], [143.43, -25.08], [142.99, -25.40],
            [142.64, -26.03], [142.64, -27.05], [142.64, -28.26], [143.30, -29.11], [144.18, -29.57],
            [145.41, -29.64], [146.46, -29.19], [146.64, -28.72], [146.82, -28.14], [144.84, -28.42],
            [144.31, -28.26], [144.14, -27.41]
          ],
          [
            [144.18, -26.39], [144.53, -26.58], [145.19, -26.62], [145.72, -26.35], [145.81, -25.91],
            [145.41, -25.68], [144.97, -25.68], [144.49, -25.64], [144, -25.99], [144.18, -26.39]
          ]
        ]
      }
    }
  ]
}

Tạo kiểu dữ liệu GeoJSON

Sử dụng phương thức Data.setStyle() để chỉ định hình thức hiển thị của dữ liệu. Phương thức setStyle() lấy giá trị cố định của đối tượng StyleOptions hoặc một hàm tính toán kiểu cho mỗi tính năng.

Quy tắc kiểu đơn giản

Cách đơn giản nhất để tạo kiểu cho các tính năng là truyền giá trị cố định của đối tượng StyleOptions đến setStyle(). Việc này sẽ đặt một kiểu duy nhất cho mỗi tính năng trong bộ sưu tập của bạn. Xin lưu ý rằng mỗi loại tính năng chỉ có thể hiển thị một tập hợp con các tùy chọn có sẵn. Điều này có nghĩa là bạn có thể kết hợp các kiểu cho nhiều loại tính năng trong một đối tượng duy nhất. Ví dụ: đoạn mã dưới đây sẽ đặt cả icon tuỳ chỉnh, chỉ ảnh hưởng đến hình học điểm và fillColor, chỉ ảnh hưởng đến đa giác.

map.data.setStyle({
  icon: '//example.com/path/to/image.png',
  fillColor: 'green'
});

Bạn có thể tìm thêm thông tin về các kiểu kết hợp kiểu/tính năng hợp lệ trong Tuỳ chọn kiểu.

Dưới đây là ví dụ về cách đặt nét vẽ và màu nền cho một số tính năng bằng cách sử dụng giá trị cố định đối tượng StyleOptions. Lưu ý rằng mỗi đa giác được tạo kiểu giống nhau.

// Set the stroke width, and fill color for each polygon
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 1
});

Quy tắc kiểu khai báo

Nếu muốn cập nhật kiểu của một số lượng lớn lớp phủ, chẳng hạn như điểm đánh dấu hoặc nhiều đường, bạn thường phải lặp lại qua từng lớp phủ trên bản đồ và đặt kiểu riêng cho từng lớp phủ. Với lớp Dữ liệu, bạn có thể đặt các quy tắc theo cách khai báo và các quy tắc này sẽ được áp dụng trên toàn bộ tập dữ liệu của bạn. Khi dữ liệu hoặc quy tắc được cập nhật, kiểu sẽ tự động được áp dụng cho mọi tính năng. Bạn có thể sử dụng các thuộc tính tính năng để tùy chỉnh kiểu của thuộc tính đó.

Ví dụ: mã dưới đây thiết lập màu của từng ký tự trong google.json bằng cách kiểm tra vị trí của ký tự đó trong bộ ký tự ascii. Trong trường hợp này, chúng tôi đã mã hoá vị trí ký tự cùng với dữ liệu của mình.

// Color Capital letters blue, and lower case letters red.
// Capital letters are represented in ascii by values less than 91
map.data.setStyle(function(feature) {
    var ascii = feature.getProperty('ascii');
    var color = ascii > 91 ? 'red' : 'blue';
    return {
      fillColor: color,
      strokeWeight: 1
    };
});

Xóa kiểu

Nếu bạn muốn xoá bất kỳ kiểu nào đã áp dụng, hãy truyền một giá trị cố định đối tượng trống cho phương thức setStyles().

// Remove custom styles.
map.data.setStyle({});

Việc này sẽ xoá mọi kiểu tuỳ chỉnh mà bạn đã chỉ định và các tính năng sẽ hiển thị bằng cách sử dụng kiểu mặc định. Ngược lại, nếu bạn không muốn kết xuất các tính năng nữa, hãy đặt thuộc tính visible của StyleOptions thành false.

// Hide the Data layer.
map.data.setStyle({visible: false});

Ghi đè kiểu mặc định

Quy tắc tạo kiểu thường được áp dụng cho mọi tính năng trong lớp Dữ liệu. Tuy nhiên, có những lúc bạn muốn áp dụng các quy tắc định kiểu đặc biệt cho các tính năng cụ thể. Ví dụ: để làm nổi bật tính năng khi nhấp chuột.

Để áp dụng các quy tắc định kiểu đặc biệt, hãy sử dụng phương thức overrideStyle(). Mọi thuộc tính bạn thay đổi bằng phương thức overrideStyle() sẽ được áp dụng ngoài các kiểu toàn cục đã được chỉ định trong setStyle(). Ví dụ: mã dưới đây sẽ thay đổi màu tô của một đa giác khi nhấp, nhưng sẽ không đặt bất kỳ kiểu nào khác.

// Set the global styles.
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 3
});

// Set the fill color to red when the feature is clicked.
// Stroke weight remains 3.
map.data.addListener('click', function(event) {
   map.data.overrideStyle(event.feature, {fillColor: 'red'});
});

Gọi phương thức revertStyle() để xoá tất cả ghi đè kiểu.

Tùy chọn kiểu

Các tuỳ chọn có sẵn để định kiểu cho từng tính năng sẽ tuỳ thuộc vào loại tính năng. Ví dụ: fillColor sẽ chỉ hiển thị trên các hình học đa giác, trong khi icon sẽ chỉ xuất hiện trên một hình dạng điểm. Bạn có thể xem thêm thông tin trong tài liệu tham khảo cho StyleOptions.

Có sẵn trên tất cả các hình học

  • clickable: Nếu true, tính năng này sẽ nhận các sự kiện chuột và chạm
  • visible: Nếu true, tính năng này sẽ hiển thị.
  • zIndex: Tất cả các đối tượng được hiển thị trên bản đồ theo thứ tự zIndex, với các giá trị cao hơn hiển thị phía trước các đối tượng có giá trị thấp hơn. Điểm đánh dấu luôn hiển thị trước các chuỗi dòng và đa giác.

Có sẵn trên hình học điểm

  • cursor: Con trỏ chuột hiển thị khi di chuột.
  • icon: Biểu tượng hiển thị cho hình dạng điểm.
  • shape: Xác định bản đồ hình ảnh dùng để phát hiện lượt truy cập.
  • title: Văn bản cuộn qua.

Có sẵn trên hình học đường

  • strokeColor: Màu nét vẽ. Tất cả màu CSS3 đều được hỗ trợ, ngoại trừ màu có tên mở rộng.
  • strokeOpacity: Độ mờ nét vẽ từ 0 đến 1,0
  • strokeWeight: Chiều rộng nét vẽ tính bằng pixel.

Có sẵn trên hình đa giác

  • fillColor: Màu tô. Tất cả màu CSS3 đều được hỗ trợ, ngoại trừ màu có tên mở rộng.
  • fillOpacity: Độ mờ màu nền giữa 0.01.0.
  • strokeColor: Màu nét vẽ. Tất cả màu CSS3 đều được hỗ trợ, ngoại trừ màu có tên mở rộng.
  • strokeOpacity: Độ mờ nét vẽ từ 0 đến 1,0
  • strokeWeight: Chiều rộng nét vẽ tính bằng pixel.

Thêm trình xử lý sự kiện

Các tính năng phản hồi các sự kiện, chẳng hạn như mouseup hoặc mousedown. Bạn có thể thêm trình nghe sự kiện để cho phép người dùng tương tác với dữ liệu trên bản đồ. Trong ví dụ bên dưới, chúng tôi thêm một sự kiện di chuột để hiển thị thông tin về tính năng đó dưới con trỏ chuột.

// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
  document.getElementById('info-box').textContent =
      event.feature.getProperty('letter');
});

Sự kiện lớp dữ liệu

Sau đây là các sự kiện phổ biến của tất cả các tính năng, bất kể loại hình là gì:

  • addfeature
  • click
  • dblclick
  • mousedown
  • mouseout
  • mouseover
  • mouseup
  • removefeature
  • removeproperty
  • rightclick
  • setgeometry
  • setproperty

Bạn có thể tìm thêm thông tin về những sự kiện này trong tài liệu tham khảo cho lớp google.maps.data.

Thay đổi giao diện động

Bạn có thể đặt kiểu của lớp Dữ liệu bằng cách truyền một hàm tính toán kiểu của từng tính năng cho phương thức google.maps.data.setStyle(). Hàm này sẽ được gọi mỗi khi thuộc tính của một tính năng được cập nhật.

Trong ví dụ bên dưới, chúng ta thêm một trình xử lý sự kiện cho sự kiện click để cập nhật thuộc tính isColorful của tính năng này. Kiểu tính năng được cập nhật để phản ánh thay đổi ngay khi thuộc tính được đặt.

// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
  var color = 'gray';
  if (feature.getProperty('isColorful')) {
    color = feature.getProperty('color');
  }
  return /** @type {!google.maps.Data.StyleOptions} */({
    fillColor: color,
    strokeColor: color,
    strokeWeight: 2
  });
});

// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
  event.feature.setProperty('isColorful', true);
});

// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
  map.data.revertStyle();
  map.data.overrideStyle(event.feature, {strokeWeight: 8});
});

map.data.addListener('mouseout', function(event) {
  map.data.revertStyle();
});