javascript - 在 OpenLayers OSM() map 上添加三 Angular 形多边形

Question

我正在尝试在 OpenLayers 中的 OSM() map 上添加一个三 Angular 形多边形。

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
});

我已经单独添加了html部分。

OpenLayers 版本:^5.1.3我正在使用 Parcel Bundler 来创建我的测试版本运行上述代码后，只显示 map ，没有显示多边形。

有人可以建议修改我的代码吗？

Answer 1

VectorSource 应具有 features 属性(而不是 feature)，并且该属性应使用特征数组进行初始化:

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

应该是:

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

多边形的路径也需要闭合(最后一个点必须与第一个点相同:

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

概念验证代码片段:

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>