Mục tiêu chính của điều khiển Bản đồ JS 2 Essential là hiển thị các hình dạng SVG bằng cách sử dụng GeoJSON dữ liệu. Sử dụng điều khiển này, bạn có thể hiển thị các bản đồ khác nhau cùng với các đối tượng địa lý đơn giản. Ngoài ra, bạn cũng có thể kết xuất các hình dạng tùy chỉnh để mô phỏng các khái niệm như lựa chọn chỗ ngồi du lịch, chỗ ngồi trong sân vận động thể thao, kế hoạch xây dựng, v.v. Trong blog này, tôi sẽ hướng dẫn bạn quy trình từng bước để mô phỏng khái niệm lựa chọn chỗ ngồi trên xe buýt bằng cách hiển thị các hình dạng tùy chỉnh và áp dụng các tính năng điều khiển khác của Bản đồ EJ 2.

Hình ảnh GIF sau đây cho thấy kết quả cuối cùng của blog này, nơi bạn có thể chọn chỗ ngồi trên xe buýt bằng cách nhấp vào hình dạng và chỗ ngồi đã chọn được hiển thị ở bên phải.

Hiển thị hình dạng tùy chỉnh

Vì điều khiển Bản đồ EJ 2 hiển thị hình dạng từ dữ liệu GeoJSON, bạn cần xây dựng dữ liệu GeoJSON với các tọa độ hiển thị bố cục chỗ ngồi trên xe buýt. Bạn cũng cần thêm các thuộc tính như số ghế và màu tô cho mỗi hình dạng. Màu sắc nên được chỉ định cho từng hình dạng để phân biệt chỗ ngồi đã đặt và chỗ ngồi còn trống. Đoạn mã sau thực hiện tất cả những điều này:

export let busSeat: any = { "type": "FeatureCollection", "features": [
{ "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [[[[0, 0], [0, 20], [20, 20], [20, 0], [0, 0]]], [[[0, 22], [0, 27], [20, 27], [20, 22], [0, 22]]]] }, "properties": { "seatNo": 19, "fill": "grey" } },
{ "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [[[[0, 47], [0, 67], [20, 67], [20, 47], [0, 47]]], [[[0, 69], [0, 74], [20, 74], [20, 69], [0, 69]]]] }, "properties": { "seatNo": 18, "fill": "grey" } },
{ "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [[[[0, 94], [0, 114], [20, 114], [20, 94], [0, 94]]], [[[0, 116], [0, 121], [20, 121], [20, 116], [0, 116]]]] }, "properties": { "seatNo": 13, "fill": "grey" } },
{ "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [[[[0, 141], [0, 161], [20, 161], [20, 141], [0, 141]]], [[[0, 163], [0, 168], [20, 168], [20, 163], [0, 163]]]] }, "properties": { "seatNo": 12, "fill": "grey" } },
{ "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [[[[0, 188], [0, 208], [20, 208], [20, 188], [0, 188]]], [[[0, 210], [0, 215], [20, 215], [20, 210], [0, 210]]]] }, "properties": { "seatNo": 7, "fill": "grey" } },
{ "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [[[[0, 235], [0, 255], [20, 255], [20, 235], [0, 235]]], [[[0, 257], [0, 262], [20, 262], [20, 257], [0, 257]]]] }, "properties": { "seatNo": 6, "fill": "grey" } },
{ "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [[[[0, 282], [0, 302], [20, 302], [20, 282], [0, 282]]], [[[0, 304], [0, 309], [20, 309], [20, 304], [0, 304]]]] }, "properties": { "seatNo": 1, "fill": "grey" } },
{ "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [[[[50, 0], [50, 20], [70, 20], [70, 0], [50, 0]]], [[[50, 22], [50, 27], [70, 27], [70, 22], [50, 22]]]] }, "properties": { "seatNo": 20, "fill": "grey" } },
{ "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [[[[50, 47], [50, 67], [70, 67], [70, 47], [50, 47]]], [[[50, 69], [50, 74], [70, 74], [70, 69], [50, 69]]]] }, "properties": { "seatNo": 17, "fill": "grey" } },
{ "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [[[[50, 94], [50, 114], [70, 114], [70, 94], [50, 94]]], [[[50, 116], [50, 121], [70, 121], [70, 116], [50, 116]]]] }, "properties": { "seatNo": 14, "fill": "Orange" } },
{ "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [[[[50, 141], [50, 161], [70, 161], [70, 141], [50, 141]]], [[[50, 163], [50, 168], [70, 168], [70, 163], [50, 163]]]] }, "properties": { "seatNo": 11, "fill": "grey" } },
{ "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [[[[50, 188], [50, 208], [70, 208], [70, 188], [50, 188]]], [[[50, 210], [50, 215], [70, 215], [70, 210], [50, 210]]]] }, "properties": { "seatNo": 8, "fill": "grey" } },
{ "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [[[[50, 235], [50, 255], [70, 255], [70, 235], [50, 235]]], [[[50, 257], [50, 262], [70, 262], [70, 257], [50, 257]]]] }, "properties": { "seatNo": 5, "fill": "grey" } },
{ "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [[[[50, 282], [50, 302], [70, 302], [70, 282], [50, 282]]], [[[50, 304], [50, 309], [70, 309], [70, 304], [50, 304]]]] }, "properties": { "seatNo": 2, "fill": "Orange" } },
{ "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [[[[80, 0], [80, 20], [100, 20], [100, 0], [80, 0]]], [[[80, 22], [80, 27], [100, 27], [100, 22], [80, 22]]]] }, "properties": { "seatNo": 21, "fill": "grey" } },
{ "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [[[[80, 47], [80, 67], [100, 67], [100, 47], [80, 47]]], [[[80, 69], [80, 74], [100, 74], [100, 69], [80, 69]]]] }, "properties": { "seatNo": 16, "fill": "grey" } },
{ "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [[[[80, 94], [80, 114], [100, 114], [100, 94], [80, 94]]], [[[80, 116], [80, 121], [100, 121], [100, 116], [80, 116]]]] }, "properties": { "seatNo": 15, "fill": "Orange" } },
{ "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [[[[80, 141], [80, 161], [100, 161], [100, 141], [80, 141]]], [[[80, 163], [80, 168], [100, 168], [100, 163], [80, 163]]]] }, "properties": { "seatNo": 10, "fill": "grey" } },
{ "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [[[[80, 188], [80, 208], [100, 208], [100, 188], [80, 188]]], [[[80, 210], [80, 215], [100, 215], [100, 210], [80, 210]]]] }, "properties": { "seatNo": 9, "fill": "grey" } },
{ "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [[[[80, 235], [80, 255], [100, 255], [100, 235], [80, 235]]], [[[80, 257], [80, 262], [100, 262], [100, 257], [80, 257]]]] }, "properties": { "seatNo": 4, "fill": "grey" } },
{ "type": "Feature", "geometry": { "type": "MultiPolygon", "coordinates": [[[[80, 282], [80, 302], [100, 302], [100, 282], [80, 282]]], [[[80, 304], [80, 309], [100, 309], [100, 304], [80, 304]]]] }, "properties": { "seatNo": 3, "fill": "grey" } }
]};

Bây giờ, chỉ định điều này cho shapeData trong điều khiển Bản đồ EJ 2. Ngoài ra, vì bạn cần hiển thị các hình dạng tùy chỉnh, bạn phải chỉ định Bình thường cho Hình học tài sản. Giá trị mặc định là Địa lývì nó hiển thị bản đồ địa lý theo mặc định.

import { busSeat } from './bus-seat';
import { Maps } from '@syncfusion/ej2-maps'; 

let maps: Maps = new Maps({
  height: '400',
  layers: [
    {
      geometryType: 'Normal',
      shapeData: busSeat
    }
  ]
});

maps.appendTo('#maps');

Liên kết màu sắc với hình dạng

Màu sắc được áp dụng cho các hình dạng để phân biệt chỗ ngồi đã đặt và chỗ còn trống. Để thực hiện việc này, hãy liên kết trường với các màu từ nguồn dữ liệu với colorValuePath tài sản.

let maps: Maps = new Maps({
  height: '400',
  layers: [
    {
      geometryType: 'Normal',
      shapeData: busSeat,
      shapeSettings: {
        colorValuePath: 'fill'
      }
    }
  ]
});

Bật lựa chọn

Để chọn hình dạng trong bản đồ, tính năng lựa chọn phải được bật. Tất cả các hình dạng trong bản đồ có thể được chọn. Do đó, bạn cần thêm mã vào itemSelection sự kiện cấm chọn chỗ đã đặt trước.

let maps: Maps = new Maps({
   itemSelection: (args: ISelectionEventArgs) => {
      // Prohibit selection on booked seats
      if ((args.shapeData as SeatInfo).fill === 'Orange') {
         args.fill="Orange !important";
         document.getElementById(args.target).setAttribute('class', 'ShapeselectionMapStyle');
         return;
      }
      args.fill="green";
      let seat: number = (args.shapeData as SeatInfo).seatNo;
      let connector: string = ' ';

      // To add initial/connector text
      if (seatInfo.innerHTML === '') {
         seatInfo.innerHTML = 'Seats Selected -';
      } else {
         connector=", ";
      }
      let seatString: string = '' + connector + seat + '';
      let seatString1: string = ' ' + seat + ',';
      let lastString: string = 'Seats Selected - ' + seat + '';
      
      // To add/remove the seat number from the selected list
      if (seatInfo.innerHTML.indexOf(seatString) === -1 && seatInfo.innerHTML.indexOf(seatString1) === -1 && seatInfo.innerHTML.indexOf(lastString) === -1) {
         seatInfo.innerHTML += '' + connector + seat + '';
      } else {
         seatInfo.innerHTML = seatInfo.innerHTML.replace(seatString, '');
         seatInfo.innerHTML = seatInfo.innerHTML.replace(seatString1, '');
         if (seatInfo.innerHTML === lastString) {
            seatInfo.innerHTML = '';
         }
      }
   },
   height: '400',
   width: '200',
   zoomSettings: {
      enable: false
   },
   layers: [
   {
      geometryType: 'Normal',
      shapeData:busSeat,
      shapeSettings: {
         colorValuePath: 'fill'
      },
      selectionSettings: {
         enable: true,
         enableMultiSelect: true
      }
    }
  ]
});

Trong mẫu mã trước đó, tôi đã cấm chọn chỗ ngồi đã được đặt trước. Ngoài ra, tôi đã hiển thị số chỗ ngồi ở bên phải bản đồ khi nhấp vào chỗ ngồi chưa được đặt trước.

Thêm các tùy chỉnh

Bạn có thể thêm tiêu đề, hình ảnh và đường viền vào bản đồ trong HTML để tạo diện mạo của bố cục chỗ ngồi trên xe buýt và cũng có thể thêm nút để xóa lựa chọn trong HTML.

// code for clearing the seat selection
document.getElementById('clear-btn').onclick = () => {
  seatInfo.innerHTML = '';
  let selected: HTMLCollection = document.getElementsByClassName('ShapeselectionMapStyle');
  for (let i:number = 0, length:number = selected.length; i < length; i++) {
    selected[0].setAttribute('class', '');
  }
};

Sự kết luận

Chỉ trong một đoạn mã nhỏ, bạn đã tạo được bố cục chỗ ngồi trên xe buýt bằng cách hiển thị các hình dạng tùy chỉnh bằng cách sử dụng thành phần Bản đồ JS 2 của Essential. Phiên bản tương tác của mẫu này có sẵn trên Stackblitz.

Theo cách tương tự, bạn có thể hiển thị bất kỳ hình dạng tùy chỉnh mong muốn nào bằng cách sử dụng thành phần Bản đồ JS 2 của Essential. Chúng tôi hy vọng rằng bạn sẽ thích tính năng kết xuất hình dạng tùy chỉnh này giúp thành phần Syncfusion Maps có thể sử dụng được nhiều hơn. Nếu bạn có bất kỳ câu hỏi hoặc yêu cầu làm rõ, vui lòng cho chúng tôi biết trong phần bình luận bên dưới. Bạn cũng có thể liên hệ với chúng tôi thông qua diễn đàn hỗ trợ, Trắc trực tiếp hoặc cổng thông tin phản hồi. Chúng tôi luôn sẵn lòng hỗ trợ bạn!

Nếu bạn thích bài đăng trên blog này, chúng tôi nghĩ bạn cũng sẽ thích các sách điện tử miễn phí sau:

Previous articleCách xóa dấu hiệu chỉnh sửa trong Word
Next articleCách tải và xem tệp PDF trong ứng dụng Angular
Natalia Quinn là một nàng thơ của How2Geeks, hiện đang là Copywriting và là nhà biên tập nội dung có tiếng chuyên về lĩnh vực công nghệ và kỹ thuật số. Các bài viết của Natalia đều có những nét riêng và chuyên cung cấp những thông tin về công nghệ, những mẹo công nghệ hay những bản tin công nghệ hay nhất và mới nhất hiện nay.