我试着找到一种方法来移动我的控件. zoom和我的控件. layer。我用css和::ngdeep标记,但我发现它不干净。
下面是我的代码:我的TS:
import { Component, OnInit } from '@angular/core';
import * as L from 'leaflet';
import {circle, icon, latLng, map, marker, polygon, tileLayer} from 'leaflet';
import {ObservatoryService} from '../../../@core/services/observatory.service';
import {Observatory} from '../../../@core/models/observatory.model';
@Component({
selector: 'ngx-observatory-labs',
templateUrl: './observatory-labs.component.html',
styleUrls: ['./observatory-labs.component.scss'],
})
export class ObservatoryLabsComponent implements OnInit {
Observ: Array<Observatory>;
ObservLayers = [];
constructor(private obsService: ObservatoryService) {
}
leafletOptions: any = {
layers: [
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
zoomControl: false,
maxZoom: 18,
attribution: '...',
id: 'mapbox.streets',
accessToken: 'your.mapbox.access.token',
}),
L.control.zoom({
position: 'bottomleft',
}),
L.control.layer-toggle({
position: 'topleft',
}),
],
zoom: 17,
center: L.latLng({lat: 43.599508, lng: 1.439671}),
};
layersControl = {
baseLayers: {
'Open Map basic': tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{maxZoom: 18, attribution: '...'}),
'Open Cycle Map': tileLayer('http://{s}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png',
{maxZoom: 18, attribution: '...'}),
'Open satelit Map': tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
{maxZoom: 18, attribution: '...'}),
},
overlays: {
'Critical Zone': L.layerGroup([
circle([43.529070, 1.429942], {radius: 60, color: 'green'}).bindTooltip('<b>Hôtel :</b><br>la flannerie')]),
},
};
我的网址:
<div style="height: 700px;"
leaflet
[leafletOptions]='leafletOptions'
[leafletLayersControl]='layersControl'
[leafletLayers]="ObservLayers">
</div>
我试图在Map的初始化中移动元素,但它不起作用,我也没有找到任何令人满意的例子。有人能解决这个问题吗?
1条答案
按热度按时间pengsaosao1#
您可以通过在您的styles.scss中导入传单CSS来完成此操作: