Vue+Openlayers implements drawing polygons on the map, assigning three layers of coordinate arrays, otherwise it will not be displayed.

Scene

Vue+Openlayers implements drawing lines on the map:

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/121252960

The above implementation adds Points and lines, how to add polygon/polygon

Note:

Blog:
https://blog.csdn.net/badao_liumang_qizhi

Follow the official account
The domineering programmer
Get programming-related e-books, tutorials and free downloads.

Implementation

1. Introduce the required modules

//Import basic modules
import “ol/ol.css“;
import Map from ” ol/Map“;
import View from “ol/View“;
import { Fill,Style,Stroke} from ” ol/style“;
//Import related modules span>
import { Tile as TileLayer , Vector as VectorLayer } from ‘ol/ layer‘
import { TileWMS ,Vector as VectorSource } from ‘ ol/source‘
import { Polygon} from “ol/geom“;
import Feature from “ol/Feature“;

2. Declare the polygon layer and data source

data() {
return {
map: null, // map map
layer:null, //Map layer
polygonLayer: null,
polygonSource: null,
};
},

3. Encapsulate drawing Polygon method

//Draw polygon
drawPolygon(data){
debugger
let self = this;
//Add a first-line feature below
var feature = new Feature({
type: “Polygon“,
geometry: new Polygon(
data // linear Coordinates
),
});
let lineStyle = new Style({
fill: span>new Fill({
color: ‘rgba(1, 210, 241, 0.2) ‘
}),
stroke: new Stroke({
color: ‘rgba(255, 0, 0)‘,
width: 4,
}),
});
// Add line style
feature.setStyle(lineStyle);
// Add line feature
self.polygonSource.addFeature(feature);
},

4. After the page is loaded, initialize the map and call the method of drawing polygons

mounted() {
this.initMap();
let pointArr = [[[[986957.12],[ 215578.12]],[[989763.12],[213860.12]],[[987415.12],[212008.12]],[[986957.12],[215578.12]]]];
this .drawPolygon(pointArr);
},

5. Complete sample code

“app“>
“map“ class=“map“>

6. Notes

The polygon will not be displayed at the beginning and no error will be reported. The original coordinate array is a nested three-level array during assignment

let pointArr =

[[[[986957.12],[215578.12]],[[989763.12],[213860.12]],[[987415.12],[212008.12]],[[986957.12],[215578.12]]]];

This is a triangle, which requires four points, and the coordinates of the first point and the fourth point are consistent.

When using Draw to draw a polygon on the page, after the drawing is completed, you can see that its point coordinates also have the following three-layer array structure.

Blog Park:

https://www.cnblogs.com/badaoliumangqizhi/

Follow the public account

The Domineering Programmer

Get programming-related e-books, tutorials and free downloads.