Question

我正在开发一个Web GIS应用程序，现在我只希望在用户单击时显示一个点。这是我正在使用的代码：

ts文件`

@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>

在app 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>

点击地图时会添加一个新点。问题是，如果我在标签中保留地图组件选择器，则地图会以某种方式显得不那么集中，地名更小，距离更多。问题还在于图标没有出现在我单击的位置，而是出现在右上角。相反，如果我将选择器放在外面，并且地图会更好地集中显示所有具有正确尺寸的元素，并且图标会出现在单击的位置。在两幅图片下面，两种情况下，红点停留在点击点上。

wrong

desired

可以看到，第一个图像的缩放比例有所降低，并且图标显示在红色圆圈的右上角，而在第二个图像中，圆圈与图标重叠，并且地图通常看起来更集中。即使两种情况下的缩放级别都相同，也会发生这种情况，因此该问题似乎是由于角度材质网格列表和开放层之间的某些交互作用而引起的。有没有暗示不取消网格列表的建议？

Angular 7材质+开放层：在显示位置绘制点错误

0 个答案: