时间戳

首页 > 解决方案 > 如何在 Openlayers 中绘制 LinearRing

javascript - 如何在 Openlayers 中绘制 LinearRing

问题描述

我编写了下面的代码来创建一个线性环。但是当我运行这段代码时屏幕上什么也没有

 var circleGeom = new ol.geom.Circle(center, 250, 'XY');
 var circleFeature = new ol.Feature();
 var cordPoly = new ol.geom.Polygon.fromCircle(circleGeom);
 var coordinates = cordPoly.getCoordinates();
 var linearRing = new ol.geom.LinearRing(coordinates);
 circleFeature.setGeometry(linearRing);
 vectorlayer.getSource().addfeatures([circleFeature]);

谁能帮我在这里找到问题？

标签： javascriptopenlayers

解决方案

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector(),
  style: new ol.style.Style({
    stroke: new ol.style.Stroke({
      width: 2,
      color: "red"
    })
  })
});

var circleGeom = new ol.geom.Circle([0, 0], 100, 'XY');
vectorLayer.getSource().addFeature(new ol.Feature(ol.geom.Polygon.fromCircle(circleGeom, 10)));

var map = new ol.Map({
  layers: [vectorLayer],
  target: document.getElementById("map"),
  view: new ol.View({
    center: [0, 0],
    zoom: 16
  })
});
html,
body,
#map {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
<link href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<body>
  <div id="map" class="map"></div>
</body>

根据文档，不能单独渲染 LinearRing。请试试：

circleFeature.setGeometry(cordPoly);

推荐阅读