Отображение многоугольника на карте OpenLayers - PullRequest
Новая
       11

Отображение многоугольника на карте OpenLayers

0 голосов
/ 05 июня 2019

У меня есть многоугольник в точках (долгота, широта), которые я хотел бы нарисовать: 

      var maxPoint = [36.283, -114.368];
      var geoSquare = [ minPoint, [minPoint[0], maxPoint[1]], maxPoint, [maxPoint[0], minPoint[1]]];
      var polygonFeature = new Feature(
              new Polygon(geoSquare));

Я рисую карту следующим образом: 

      var map = new Map({
        interactions: defaultInteractions().extend([new Drag()]),
        layers: [
          new TileLayer({
            source: new TileJSON({
              url: 'https://maps.siemens.com/styles/osm-bright.json'
            })
          }),
          new VectorLayer({
            source: new VectorSource({
              features: [polygonFeature]
            }),
            style: new Style({
              stroke: new Stroke({
                width: 3,
                color: [255, 0, 0, 1]
              }),
              fill: new Fill({
                color: [0, 0, 255, 0.6]
              })
            })
          })
        ],
        target: 'map',
        view: new View({
          center: [0, 0],
          zoom: 2
        })
      });

Этот полигон находится недалеко от Южной Калифорнии, но я вообще не вижу квадрата на карте. Что не так ??

EDIT

Вот это jsfiddle

1 Ответ

1 голос
/ 06 июня 2019

Координаты объекта должны быть в формате LonLat и должны быть преобразованы в проекцию вида.Кольцо многоугольника должно начинаться и заканчиваться в одной и той же точке, и многоугольнику нужна дополнительная пара [], поскольку они могут иметь дополнительные внутренние кольца (отверстия).Альтернативно вы можете создать полигон из экстента.Любой из них будет работать. 

  var minPoint = [-121.091, 32.92];
  var maxPoint = [-114.368, 36.283];
  var geoSquare = [[minPoint, [minPoint[0], maxPoint[1]], maxPoint, [maxPoint[0], minPoint[1]], minPoint]];
  var polygonFeature = new Feature(
    new Polygon(geoSquare).transform('EPSG:4326','EPSG:3857'));



  var minPoint = [-121.091, 32.92];
  var maxPoint = [-114.368, 36.283];
  var polygonFeature = new Feature(
    Polygon.fromExtent(minPoint.concat(maxPoint)).transform('EPSG:4326','EPSG:3857'));


  var minPoint = fromLonLat([-121.091, 32.92]);
  var maxPoint = fromLonLat([-114.368, 36.283]);
  var geoSquare = [[minPoint, [minPoint[0], maxPoint[1]], maxPoint, [maxPoint[0], minPoint[1]], minPoint]];
  var polygonFeature = new Feature(
    new Polygon(geoSquare));


  var minPoint = fromLonLat([-121.091, 32.92]);
  var maxPoint = fromLonLat([-114.368, 36.283]);
  var polygonFeature = new Feature(
    Polygon.fromExtent(minPoint.concat(maxPoint)));
...