下面是一个使用Angular和Openlayers 6在地图上显示一个多边形的代码示例:
ng new angular-openlayers-polygon
cd angular-openlayers-polygon
npm install ol
ng generate component map
import { Component, OnInit } from '@angular/core';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import Feature from 'ol/Feature';
import Polygon from 'ol/geom/Polygon';
import { Vector as VectorLayer } from 'ol/layer';
import { Vector as VectorSource } from 'ol/source';
import { Style, Fill } from 'ol/style';
export class MapComponent implements OnInit {
ngOnInit() {
const map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new OSM()
})
],
view: new View({
center: [0, 0],
zoom: 2
})
});
const polygon = new Feature({
geometry: new Polygon([
[
[-5e6, 6e6],
[-5e6, 8e6],
[-3e6, 8e6],
[-3e6, 6e6],
[-5e6, 6e6]
]
])
});
const vectorLayer = new VectorLayer({
source: new VectorSource({
features: [polygon]
}),
style: new Style({
fill: new Fill({
color: 'rgba(255, 0, 0, 0.5)'
})
})
});
map.addLayer(vectorLayer);
}
}
ng serve
现在,您将在浏览器中看到一个包含一个红色多边形的地图。