在OpenLayers OSM（）地图上添加三角形多边形

Question

I am trying to add one triangle Polygon over OSM() map in OpenLayers.

import Map from 'ol/Map';
import View from 'ol/View';
import Feature from 'ol/Feature';
import {
    OSM,
    Vector as VectorSource
} from 'ol/source';
import $ from 'jquery';
import {
    Tile as TileLayer,
    Vector as VectorLayer
} from 'ol/layer';
import {
    fromLonLat,
    toLonLat
} from 'ol/proj';
import Polygon from 'ol/geom/Polygon';

import {
    Circle as CircleStyle,
    Fill,
    Stroke,
    Style
} from 'ol/style.js';


//Position of our map center

var pos = fromLonLat([76.87403794962249, 8.569385045000772]);

//Position for our Polygon

var pos1 = fromLonLat([76.85860825505787, 8.575525035547585]);

var pos2 = fromLonLat([76.85286067404068, 8.56925661298456]);

var pos3 = fromLonLat([76.86300346314657, 8.56917303421666]);


//OSM() Tile layer for our Map
var tileLayer = new TileLayer({
    source: new OSM()
});

//Setting View for our Map
var view = new View({

    center: pos,
    zoom: 15
});

var cord = [pos1,pos2,pos3];

var polyone = new Polygon([cord]);

var featureone = new Feature(polyone);

var vectorSource = new VectorSource({
    feature: featureone
});

//vectorSource.addFeature(feature);
featureone.setStyle(new Style({fill: new Fill({color: 'red'})}));

var vectorLayer = new VectorLayer({
    source: vectorSource
});

var map = new Map({

    layers: [tileLayer,vectorLayer],
    target: 'map',
    view: view
});

I have added the html part separately.

OpenLayers version: ^5.1.3 And I am using Parcel Bundler to create my test build After running the above code, only Map is getting displayed and no polygons displayed.

Can anyone suggest an edit to my code?

Answer 1

the VectorSource should have the features property (not feature ) and that property should be initialized with an array of features:

var vectorSource = new VectorSource({
    feature: featureone
});

should be:

var vectorSource = new VectorSource({
    features: [featureone]
});

Also the path for the polygon needs to be closed (the last point must be the same as the first point:

var cord = [pos1, pos2, pos3, pos1];

proof of concept code snippet:

 html, body { height: 100%; width: 100%; padding: 0px; margin: 0px; } .map { height: 100%; width: 100%; } 

 <link rel="stylesheet" href="https://openlayers.org/en/v5.1.3/css/ol.css" type="text/css"> <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.1.3/build/ol.js"></script> <div id="map" class="map"></div> <script> //Position of our map center var pos = ol.proj.fromLonLat([76.87403794962249, 8.569385045000772]); //Position for our Polygon var pos1 = ol.proj.fromLonLat([76.85860825505787, 8.575525035547585]); var pos2 = ol.proj.fromLonLat([76.85286067404068, 8.56925661298456]); var pos3 = ol.proj.fromLonLat([76.86300346314657, 8.56917303421666]); //OSM() Tile layer for our Map var tileLayer = new ol.layer.Tile({ // TileLayer({ source: new ol.source.OSM() }); //Setting View for our Map var view = new ol.View({ center: pos, zoom: 14 }); var cord = [pos1, pos2, pos3, pos1]; var polyone = new ol.geom.Polygon([cord]); var featureone = new ol.Feature(polyone); var vectorSource = new ol.source.Vector({ // VectorSource({ features: [featureone] }); //vectorSource.addFeature(feature); featureone.setStyle(new ol.style.Style({ fill: new ol.style.Fill({ color: 'red' }) })); var vectorLayer = new ol.layer.Vector({ // VectorLayer({ source: vectorSource }); var map = new ol.Map({ layers: [tileLayer, vectorLayer], target: 'map', view: view }); </script>