```css @import "gisjs/styes/styles.css"; ```
npm install @fuhidev/gisjscss
@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
`typescript
new DlMap(element);
`
Layers
$3
Kết hợp với CrudBaseService để tải hiển thị dữ liệu
$3
- Sử dụng trong trường hợp kết hợp với CrudBaseService
`typescript
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
`typescript
let sources:Array;
...
const layer = new NestCrudLeafletLayer({
sources:sources
...
// hoặc
layer.sources = sources;
`
$3
Bản đồ nên OpenSreetmap
#### Cách sử dụng
`typescript
new DlOSMLayer().addTo(map);
`
$3
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
`typescript
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
$3
`typescript
new DlTileLayer({ url: "..." }).addTo(map);
`
Controls
BasemapToggle
Dùng để thay đổi dữ liệu nền
$3
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
`typescript
new BasemapToggle({
default: new DlOSMLayer(),
next: new DlGmap({ type: DlGMapType.standarnroadmap }),
}).addTo(map);
``