@fuhidev/gisjs

Install

React

@import "gisjs/styes/styles.css";

Core

DlMap

Dùng để thay thế cho Map (leaflet), tinh chỉnh một số thuộc tính để phù hợp cho dự án DITAGIS

Cách sử dụng

Nếu không setView thì bản đồ sẽ hiển thị vị trí ở Việt Nam

new DlMap(element);

Layers

NestCrudLeafletLayer

Kết hợp với CrudBaseService để tải hiển thị dữ liệu

Cách sử dụng

• Sử dụng trong trường hợp kết hợp với CrudBaseService

new NestCrudLeafletLayer({
  service: this.service,
  primaryKey: '...',
  builder: (qb) => qb.select([...]),
  beforeAddFeature: ({ graphic }) => {
    // nếu muốn lấy properties để thao tác thì gọi
    const properties = graphic.feature.properties;

    // thay đổi style của marker
    graphic.options.icon = new Icon({
      iconUrl: icon.icon,
      iconSize: [25, 25],
    });

    // đăng ký sự kiện với graphic
    graphic.on('click', () => {});
  },
}).addTo(this.map);

• Có thể tự set sources

let sources:Array<T>;
...
const layer = new NestCrudLeafletLayer({
  sources:sources
  ...

  // hoặc
layer.sources = sources;

DlOSMLayer

Bản đồ nên OpenSreetmap

Cách sử dụng

new DlOSMLayer().addTo(map);

DlGmap

Bản đồ nền GoogleMap

Loại bản đồ

• roads
• standarnroadmap
• terrain
• somehowalteredroadmap
• satellite
• terrainonly
• hybrid

Cách sử dụng

thuộc tính type là bắt buộc phải nhập, sử dụng DlGMapType

new DlGmap({ type: DlGMapType.standarnroadmap }).addTo(map);

TileLayer

dùng thay thế cho MapTileLayer của esri-leaflet, chỉ sử dụng với Tile của Esri

Cách sử dụng

new DlTileLayer({ url: "..." }).addTo(map);

Controls

BasemapToggle

Dùng để thay đổi dữ liệu nền

Cách sử dụng

thuộc tính default, next là bắt buộc phải nhập

• default: dữ liệu nền mặc định, nền sẽ được hiển thị mặc định khi gọi addTo(map)
• next: dữ liệu nền khi nhấn vào control sẽ chuyển

new BasemapToggle({
 default: new DlOSMLayer(),
 next: new DlGmap({ type: DlGMapType.standarnroadmap }),
}).addTo(map);