首页 文章

Angular4添加WMS(openlayers)

提问于
浏览
4

我想在GeularServer中添加一个带有OpenLayers的示例 wms-layer 到我在Angular 4中的 Map 2 .
我不知道这样做的正确语法 .
也许有人对Angular2或Angular4中的OpenLayers有一些经验?
非常感谢!

map.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);
    ////
  }

}

map.component.html

<div  id={{mapId2}} class="map">

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

仅供参考:
我们的想法是从一个表单,一个服务,从GeoServer注入自定义指定的URL,以在基本 Map 中渲染多个图层 .

1 回答

  • 3

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

    另外在基本层添加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的投影类型 . 参数可选 .

相关问题