Angular / Openlayers6：在地图上显示多边形

问题描述

如何使用Openlayers 6和Angular 10在地图上绘制多边形？

我的组件HTML文件是：

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

组件的样式：

.map {
  width: 100%;
  height: 100vh;
}

组件逻辑：

import ... all imports

@Component({
  selector: 'app-openlayers-polygon',templateUrl: './openlayers-polygon.component.html',styleUrls: ['./openlayers-polygon.component.css']
})
export class OpenlayerspolygonComponent implements AfterViewInit {
  map: Map;
  vectorSource: VectorSource;
  vectorLayer: Vector;
  // Update via @Mike
  coordinatespolygon = [[[48.12345,25.1234],[46.12345,28.1234],[48.12345,25.1234]]];

  ngAfterViewInit() {
    let polygonStyle = new Style({
      fill: new Fill({
        color: 'rgba(255,255,0.2)'
      }),stroke: new stroke({
        color: '#ffcc33',width: 10
      })
    });
    this.vectorSource = new VectorSource({ features: [] });
    this.vectorLayer = new Vector({
      source: this.vectorSource,styles: [polygonStyle]
    });
    this.map = new Map({
      target: 'map',layers: [
        new TileLayer({
          source: new XYZ({
            url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
          })
        }),this.vectorLayer
      ],view: new View({
        center: [813079.7791264898,5929220.284081122],zoom: 7
      }),controls: defaultControls().extend([
        new ZoomToExtent({
          extent: [
            813079.7791264898,5929220.284081122,848966.9639063801,5936863.986909639
          ]
        })
      ])
    });
    this.addpolygon();
  }

  addpolygon() {
    // Update via @Mike
    const geometry = new polygon(this.coordinatespolygon).transform('epsg:4326',this.map.getView().getProjection());
    this.vectorLayer.getSource().addFeature(geometry);
  }
}

我还检查了层顺序是否正确。没变化。

@Mike实现的最终解决方案是：

import {AfterViewInit,Component} from '@angular/core';
import {defaults as defaultControls} from 'ol/control';

import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import ZoomToExtent from "ol/control/ZoomToExtent";
import VectorSource from "ol/source/Vector";
import Vector from "ol/layer/Vector";
import { Fill,stroke,Style } from "ol/style";
import polygon from "ol/geom/polygon";
import Feature from "ol/Feature";

@Component({
  selector: 'app-openlayers-polygon',styleUrls: ['./openlayers-polygon.component.css']
})
export class OpenlayerspolygonComponent implements AfterViewInit {
  vectorLayer: Vector;
  map: Map;
  coordinatespolygon = [
    [
      [15.1234,48.12345],[15.1234,46.12345],[18.1234,48.12345]
    ]
  ];

  ngAfterViewInit() {
    let polygonStyle = new Style({
      fill: new Fill({
        color: "rgba(255,0.2)"
      }),stroke: new stroke({
        color: "#ffcc33",width: 10
      })
    });
    let vectorSource = new VectorSource({features: []});
    this.vectorLayer = new Vector({
      source: vectorSource,styles: [polygonStyle]
    });
    this.map = new Map({
      target: "map",layers: [
        new TileLayer({
          source: new XYZ({
            url: "https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          })
        }),5936863.986909639
          ]
        })
      ])
    });
    this.addpolygon();
  }

  addpolygon() {
    const geometry = new polygon( this.coordinatespolygon).transform( "epsg:4326",this.map.getView().getProjection());
    this.vectorLayer.getSource().addFeature(new Feature(geometry));
  }
}

解决方法

LinearRing和Polygon是直接按照GeoJSON规范中的坐标数组构造的。投影变换也可以应用于完整的几何。

  coordinatesPolygon = [[[48.12345,25.1234],[46.12345,28.1234],[48.12345,25.1234]]];

  let geometry = new Polygon(coordinatesPolygon).transform('EPSG:4326',this.map.getView().getProjection());