Угловой материал 7 + открытые слои: точки отображаются в неправильном положении на дисплее - PullRequest
Новая
       8

Угловой материал 7 + открытые слои: точки отображаются в неправильном положении на дисплее

0 голосов
/ 14 января 2019

Я занимаюсь разработкой веб-приложения для ГИС и сейчас хочу, чтобы по щелчку пользователя отображалась точка. Это код, который я использую:

ts file `

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {

  constructor() { }

  map: OlMap;
  source: OSM;
  layers: [OlTileLayer, OlVectorLayer, OlVectorLayer]; //  OlTileLayer;
  beVectSource: OlVectorSource;
  view: OlView;
  vectorSource: OlVectorSource;
  marker: OlFeature;
  markers: [];

  ngOnInit() {
    const markerStyle = new OlStyle({
      image: new OlIcon(/**  {olx.style.IconOptions} */ ({
        anchor: [0.5, 0.5],
        anchorXUnits: 'fraction',
        anchorYUnits: 'fraction',
        src: 'https://wiki.openstreetmap.org/w/images/c/c5/Orienteering-icon-16px.png'
      }))
    });
    /*this.marker = new OlFeature({
      geometry: new OlPoint(fromLonLat([11.1822, 43.6699 ]))
    });*/

    this.source = new OSM();

    this.vectorSource = new OlVectorSource({
      // features: [this.marker]
    });

    this.beVectSource = new OlVectorSource({

    });

    this.layers = [
      new OlTileLayer({
      source: this.source,
      // minResolution: 200,
      // maxResolution: 2000,
      projection: 'EPSG:3857'
    }),
    new OlVectorLayer({
      source: this.beVectSource,
      projection : 'EPSG:3857',
      style: markerStyle
    }),
    new OlVectorLayer({
      source: this.vectorSource,
      projection : 'EPSG:3857',
      style: markerStyle
    }),
  ],

    this.view = new OlView({
      // center: fromLonLat([11.1722, 43.5599 ]),
      zoom: 7,
      minZoom: 6,
      center: fromLonLat([11.1722, 43.5599 ]), // transform([11.1722, 43.5599 ], 'EPSG:4326', 'EPSG:3857'),
    });

    this.map = new OlMap({
      target: 'map',
      layers: this.layers,
      view: this.view,
    });
    this.map.on('click', (args) => {

      /*this.map.getInteractions().getArray().forEach(function(interaction) {
        if (interaction instanceof ol.interaction.DoubleClickZoom) {
          this.map
        }
      });*/
      console.log(args);
      // const lonlat = tranform(args.coordinate, 'EPSG:3857', 'EPSG:4326');
      const lonlat = toLonLat(args.coordinate);
      const longitude = parseFloat(lonlat[0]);
      const latitude = parseFloat(lonlat[1]);
      const point: OlPoint = new OlPoint(fromLonLat([longitude, latitude])); // transform([longitude, latitude], 'EPSG:4326', 'EPSG:3857'));
      const feature = new OlFeature({
        geometry: point,
      });
      this.vectorSource.addFeature(feature);
    });
  }

  addToBeVectSource(point: OlPoint) {
    this.beVectSource.addFeature(point);
  }

}`

HTML-файл 

<mat-card >
    <mat-card-content>
        <div id="map" >
        </div>
    </mat-card-content>
    <mat-card-actions>
            <button mat-raised-button color="primary">Salva posizione</button>
    </mat-card-actions>
</mat-card>

в приложении component.html: 

<mat-grid-list cols="2" rowHeight="2:1">
    <mat-grid-tile class="mapTile" >
          <app-map></app-map>
    </mat-grid-tile>
    <mat-grid-tile>
    </mat-grid-tile>
  </mat-grid-list>

при нажатии на карту добавляется новая точка. Проблема заключается в том, что если я удерживаю селектор компонента карты внутри тега, карта выглядит как-то менее сфокусированной, а названия мест меньше и смотрят дальше. Проблема также в том, что значки появляются не там, где я нажал, а в правом верхнем углу. Вместо этого, если я размещу селектор снаружи и карта станет более сфокусированной, все элементы будут отображены в нужном размере, а значки появятся в выбранном месте. Ниже два изображения с двумя разными случаями, когда красная точка остается для точки щелчка.

неправильно

желательно

Как видно, первое изображение выглядит как-то менее увеличенным, а значок отображается в правом верхнем углу красного круга, в то время как во втором круг перекрывает значок, и карта в целом выглядит более сфокусированной. Это происходит даже в том случае, если уровень масштабирования в обоих случаях одинаков, поэтому проблема, по-видимому, вызвана некоторым взаимодействием между списком угловых сеток материала и открытыми слоями. Любое предложение, которое не подразумевает отклонение списка сетки?

...