Lớp dữ liệu

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

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

Tổng quan

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

Với API Maps JavaScript, bạn có thể đánh dấu bản đồ bằng nhiều loại lớp phủ, chẳng hạn như điểm đánh dấu, hình nhiều đường, đa giác, v.v. Mỗi loại chú giải kết hợp thông tin định kiểu với dữ liệu vị trí. Chiến lược phát hành đĩa đơn Lớp google.maps.Data là một vùng chứa dữ liệu không gian địa lý tuỳ ý. Thay vào đó Khi thêm những lớp phủ này, bạn có thể sử dụng Lớp dữ liệu để thêm dữ liệu địa lý vào bản đồ của bạn. Nếu dữ liệu đó chứa hình học, chẳng hạn như điểm, đường kẻ hoặc đa giác, API sẽ hiển thị chúng theo mặc định dưới dạng điểm đánh dấu, hình nhiều đường và đa giác. Bạn có thể tạo kiểu cho các đối tượng này như cách bạn làm với lớp phủ thông thường, hoặc áp dụng quy tắc định 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. Chiến lược phát hành đĩa đơn Lớp Data tuân theo cấu trúc của GeoJSON trong cách trình bày dữ liệu và giúp bạn dễ dàng hiển thị dữ liệu GeoJSON. Sử dụng phương thức loadGeoJson() để dễ dàng nhập dữ liệu GeoJSON và các điểm hiển thị, chuỗi đườ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 liên kết với các thuộc tính khác. Cho ví dụ: các cửa hàng có giờ mở cửa, đường có tốc độ giao thông và mỗi cô gái Hướng dẫn viên có sân 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 dữ liệu cho phù hợp.
  • Chọn cách dữ liệu của bạn được thể hiện và thay đổi nhanh chóng.
    Lớp dữ liệu cho phép bạn đưa ra quyết định về hình ảnh trực quan và tương tác của dữ liệu. Ví dụ: khi xem bản đồ tiện lợi bạn có thể chọn chỉ hiển thị những cửa hàng bán phương tiện công cộng vé.

Vẽ hình đa giác

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

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

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;
index.ts

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 }, // 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,
    ]),
  });
}

window.initMap = initMap;
index.js

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. Giao diện này nhẹ và dễ đọc, tạo điều kiện 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ỉ bằng một dòng mã.

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

Mỗi bản đồ có một map.data Đối tượng này đóng vai trò như một lớp dữ liệu cho dữ liệu không gian địa lý tuỳ ý, bao gồm GeoJSON. Bạn có thể tải và hiển thị một tệp GeoJSON bằng cách gọi loadGeoJSON() của đối tượng data. Ví dụ bên dưới cho thấy 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;
index.ts

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;
index.js
Xem ví dụ

Dùng thử mẫu

GeoJSON mẫu

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

Lưu ý: Để tải tệp json từ một miền khác, miền đó phải có 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ộ nội dung tệp bên dưới bằng cách mở rộng mũi tên nhỏ bên cạnh vào các từ 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 cho 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. Chiến lược phát hành đĩa đơn Phương thức setStyle() sẽ lấy giá trị StyleOptions giá trị cố định của đối tượng hoặc một hàm tính toán kiểu cho mỗi đối tượ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(). Thao tác này sẽ đặt một kiểu cho mỗi tính năng trong bộ sưu tập. 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ủa thuộc tính các lựa chọn hiện có. Điều này có nghĩa là bạn có thể kết hợp các kiểu cho các loại đối tượng trong một giá trị cố định đối tượng duy nhất. Ví dụ: đoạn mã dưới đây tập hợp cả icon tuỳ chỉnh, chỉ ảnh hưởng đến hình học của đ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ể xem thêm thông tin về tổ hợp kiểu/tính năng hợp lệ trong mục Kiểu Tuỳ chọn.

Dưới đây là ví dụ về cách đặt nét vẽ và màu nền cho một số đối tượ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 .

// 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 bạn 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 hình nhiều đường, bạn thường phải lặp lại từng lớp phủ trên bản đồ và đặt kiểu riêng. Với lớp Dữ liệu, bạn có thể đặt các quy tắc 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, thì kiểu sẽ được tự động áp dụng cho mọi tính năng. Bạn có thể dùng các thuộc tính của tính năng để tuỳ chỉnh kiểu của thuộc tính đó.

Ví dụ: đoạn mã dưới đây đặt màu của mỗi ký tự trong google.json bằng cách kiểm tra vị trí của mã trong bộ ký tự ASCII. Trong trường hợp này mà 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
    };
});

Xoá kiểu

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

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

Thao tác này sẽ xóa mọi kiểu tùy 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. Thay vào đó, nếu bạn không muốn hiển thị 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 đối tượ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 tạo kiểu đặc biệt cho các tính năng cụ thể. Ví dụ: để làm nổi bật một đối tượng khi nhấp vào.

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

// 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á mọi chế độ ghi đè kiểu.

Tùy chọn kiểu

Các lựa chọn có sẵn để tạo kiểu cho mỗi tính năng phụ thuộc vào loại tính năng. Ví dụ: fillColor sẽ chỉ hiển thị trên các hình đa giác, trong khi icon sẽ chỉ xuất hiện trên hình học đ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 mọi hình học

  • clickable: Nếu là true, tính năng này sẽ nhận được các sự kiện nhấn và chuột
  • visible: Nếu là true, tính năng này sẽ xuất hiện.
  • zIndex: Tất cả các đối tượng được hiển thị trên bản đồ theo thứ tự zIndex của chúng, có giá trị cao hơn hiển thị trước đối tượng có giá trị thấp hơn. Điểm đánh dấu luôn được hiển thị trướ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 sẽ hiển thị khi di chuột.
  • icon: Biểu tượng hiển thị cho hình học đ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 di chuột 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 tên mở rộng.
  • strokeOpacity: Độ mờ nét vẽ từ 0,0 đến 1,0.
  • strokeWeight: Chiều rộng nét vẽ tính bằng pixel.

Có sẵn trong hình học đa giác

  • fillColor: Màu nền. Tất cả màu CSS3 đều được hỗ trợ, ngoại trừ màu được đặt tên mở rộng.
  • fillOpacity: Độ mờ màu nền giữa 0.0 và 1.0.
  • strokeColor: Màu nét vẽ. Tất cả màu CSS3 đều được hỗ trợ, ngoại trừ màu được đặt tên mở rộng.
  • strokeOpacity: Độ mờ nét vẽ từ 0,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 sự kiện trình nghe cho phép người dùng tương tác với dữ liệu trên bản đồ. Trong phần bên dưới ví dụ: chúng ta thêm sự kiện di chuột qua, sự kiện này hiển thị thông tin về tính năng bên 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 chung cho tất cả đối tượng, bất kể hình học của chúng loại:

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

Bạn có thể xem 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 một cách linh hoạt

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(). Chiến dịch này hàm sẽ được gọi mỗi khi thuộc tính của một đối tượng được cập nhật.

Trong ví dụ bên dưới, chúng ta thêm một trình nghe sự kiện cho sự kiện click cập nhật thuộc tính isColorful của đối tượng này. Kiểu tính năng được cập nhật thành phản ánh thay đổi ngay sau 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();
});