如何更改app.component.html中地图的宽度和高度

Question

在下面发布的代码中，我试图更改地图的宽度和高度，如下面的样式标记所示

<style>
     #map3 .map {
        width: 100%;
        height:90px;
      }

</style>

但是，无论宽度和高度的值是什么，地图的宽度和高度都不会改变。请告诉我如何改变地图的宽度和高度。

app.component.html

<div class="MousePosition">
  <div id="mouse-position"></div>
</div>
<form>
  <label for="projection">Projection </label>
  <select id="projection">
    <option value="EPSG:4326">EPSG:4326</option>
    <option value="EPSG:3857">EPSG:3857</option>
  </select>
  <label for="precision">Precision</label>
  <input id="precision" type="number" min="0" max="12" value="4"/>
</form>
    <div id="map"></div>
    <style>
     #map3 .map {
        width: 100%;
        height:90px;
      }

    </style>

app.component.ts

    ngOnInit() {
    var mousePositionControl = new MousePosition({
      className: 'custom-mouse-position',
      coordinateFormat: createStringXY(7),
      projection: 'EPSG:4326',
      /*render: function(){
        console.log(createStringXY(7));
      },*/
      // comment the following two lines to have the mouse position
      // be placed within the map.
      target: document.getElementById('mouse-position'),
      undefinedHTML: '',//for what to be rendered when the mouse leaves map scope: values https://openlayers.org/en/latest/apidoc/module-ol_control_MousePosition-MousePosition.html
    });
  
    this. map = new Map({
      controls: defaultControls().extend([mousePositionControl]),
    target: 'map3',
    layers: [
      new TileLayer({
        source: new XYZSource({
          url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
        })
      })
    ],
    view: new View({
      center: [0, 0],
      zoom: 2
    })
  });

  var projectionSelect = document.getElementById('projection');
    projectionSelect.addEventListener('change', function (event) {
      mousePositionControl.setProjection((event.target as HTMLSelectElement).value);
    });

    var precisionInput = document.getElementById('precision');
    precisionInput.addEventListener('change', function (event) {
    var format = createStringXY((event.target as HTMLInputElement).valueAsNumber);
    mousePositionControl.setCoordinateFormat(format);
    console.log(createStringXY(format));
  });
  
  this.map.on('dblclick', function(evt){
    // Get the pointer coordinate
    //let coordinate = transform(evt.coordinate);
    var lonlat = transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326')
    console.log(lonlat);
  });

  var zoomslider = new ZoomSlider();
  this.map.addControl(zoomslider);
 }

Answer 1

让我们看看这里。首先，您的开放层映射是在canvas上绘制的，一旦呈现出来，它就不能被css调整大小。因此，您需要做的是在组件class中以编程方式调整大小。

因此，我们将实现ngAfterViewInit函数，因为我们需要一个已经呈现的映射引用，然后我们有以下内容：

//...
ngAfterViewInit() {
  this.map.updateSize();
}
//...

这应该可以很好地工作，但是对于其他映射API来说也是一样的。canvas先在浏览器中呈现，然后再呈现其他html，所以在加载应用程序的重置时，canvas将被扭曲，因此一旦加载了应用程序的所有其他组件，您就需要调整它的大小。

示例

• map.component.html

<div id="map"></div>

• map.component.ts

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit, AfterViewInit {
  // define a reference to the map
  map: any | undefined;

  // So you will then initialize the map as you have in your code
  ngOnInit() {
    this. map = new Map({
      target: 'map',,
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    });
  }

  // So after angular has rendered all the html stuff, it will call this function
  // down here, so then what you want to do is update the map size, now that
  // the rendering is stable
  ngAfterViewInit() {
    this.map?.updateSize();
  }

  //...
  // Then down here you will have the remaining functionality that you add to
  // your code.
}

作为参考，您可以查看此堆栈交换以获得更多详细信息。

https://gis.stackexchange.com/questions/342309/resizing-map-width-and-height-avoid-distortion

希望它能帮上忙