mongodb 如何更改瓣叶中缩放控件的位置(Angular )

ttygqcqt  于 2023-02-03  发布在  Go
关注(0)|答案(1)|浏览(95)

我试着找到一种方法来移动我的控件. 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的初始化中移动元素,但它不起作用,我也没有找到任何令人满意的例子。有人能解决这个问题吗?

pengsaosao

pengsaosao1#

您可以通过在您的styles.scss中导入传单CSS来完成此操作:

@import '../node_modules/leaflet/dist/leaflet.css';
.leaflet-touch .leaflet-bar a {
    width: 30px;
    height: 30px;
    line-height: 30px;
}

相关问题