@baseLayers/ngx-leaflet
是一个用于 Angular 的库,它允许您在应用程序中使用 Leaflet 地图
npm install @asymmetrik/ngx-leaflet leaflet
angular.json
文件的 styles
数组中添加以下代码:"styles": [
"node_modules/leaflet/dist/leaflet.css",
"src/styles.css"
],
LeafletModule
:// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LeafletModule } from '@asymmetrik/ngx-leaflet';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, LeafletModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
ngx-leaflet
,同时设置 '@asymmetleric/ngx-leaflet'
模块的 baseLayers
属性以使用不对称覆盖:// app.component.ts
import { Component } from '@angular/core';
import * as L from 'leaflet';
@Component({
selector: 'app-root',
template: `
<ngx-leaflet [options]="mapOptions" (leafletMapReady)="onMapReady($event)"></ngx-leaflet>
`,
})
export class AppComponent {
mapOptions = {
center: L.latLng(46.879966, -121.726909),
zoom: 12,
layers: this.baseLayers,
};
baseLayers = {
default: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}),
satellite: L.tileLayer('https://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}', {
maxZoom: 20,
subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
attribution: 'Map data ©2022 Google',
}),
};
onMapReady(map: L.Map) {
// 在此处执行地图初始化操作
}
}
app.component.html
中,使用 baseLayers
属性设置默认图层:<ngx-leaflet
[options]="mapOptions"
(leafletMapReady)="onMapReady($event)"
[baseLayers]="baseLayers.default"
></ngx-liquef>
现在,您的地图应该默认显示 'default'
图层。 当用户切换到其他图层时,地图将显示所选图层。
领取专属 10元无门槛券
手把手带您无忧上云