Angular4 添加 WMS (openlayers)

Posted 2023-03-25

【中文标题】Angular4 添加 WMS (openlayers)

【英文标题】：Angular4 add WMS (openlayers)

【发布时间】：2017-07-26 10:56:58

【问题描述】：

我想将一个示例 wms-layer 与来自 GeoServer 的 OpenLayers 添加到我在 Angular 4 中的地图 | 2. 我不知道执行此操作的正确语法。 也许有人对 Angular2 或 Angular4 中的 OpenLayers 有一些经验？ 非常感谢！

ma​​p.component.ts

import Component, OnInit, AfterViewInit, ViewEncapsulation, Input 

from '@angular/core';
import  WmslayerService from '../../wmslayer.service';


import * as ol from 'openlayers';

@Component(
  selector: 'olmap',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
)export class MapComponent implements OnInit, AfterViewInit 

  @Input() id3: number;

  mapId2: string;

  map: ol.Map = undefined;

  mapexample: ol.Map = undefined;


  constructor(private wmslayerService: WmslayerService) 

    // generate random id for every map
    this.mapId2 = "map" + Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);

  


  ngOnInit() 
    // test service
    console.log(this.wmslayerService.addMyWms());
    console.log(this.wmslayerService.layer);
    //

    console.log(this.mapId2);
  

  // render the basic map
  ngAfterViewInit() 
    this.map = new ol.Map(
      target: this.mapId2,
      layers: [
        new ol.layer.Tile(
          source: new ol.source.OSM()
        )
      ],
      view: new ol.View(
        center: ol.proj.fromLonLat([37.41, 8.82]),
        zoom: 8
      )
    );
    //

    //// add WMS layer to the basic map
    this.mapexample = new ol.layer.Tile(
      extent: [-13884991, 2870341, -7455066, 6338219],
      source: new ol.source.TileWMS(
        url: 'http://osgis.astun.co.uk/geoserver/gwc/service/wms?',
        params: 
          'LAYERS': 'osgb:district_borough_unitary_region',
          'VERSION': '1.1.1',
          'FORMAT': 'image/png',
          'TILED': true
        ,
        serverType: 'geoserver'
      )
    );
    map.addLayer(mapexample);
    ////
  

ma​​p.component.html

  <div  id=mapId2 class="map">

  <div><app-menue></app-menue></div>
  </div>

仅供参考： 这个想法是从一个带有服务的表单中注入来自 GeoServer 的自定义指定 url，以在基本地图中呈现多个图层。

【参考方案1】：

我解决了答案，也许这对其他人有帮助：

在基本层之外添加一个 wms 层：

//// basic layer

var examplelayer = new ol.layer.Tile(
  source: new ol.source.TileWMS(
    url: 'https://ahocevar.com/geoserver/wms',
    params: 
      'LAYERS': 'topp:states',
      'TILED': true
    ,
    projection: 'EPSG:4326',
    serverType: 'geoserver'
  )
);
this.mapId2 = "map";
this.map.addLayer(examplelayer);


////

而且你必须在角度 4 中引用投影类型。 参数是可选的。