OpenLayers отрисовывает геометрию на холсте - PullRequest
Новая
       37

OpenLayers отрисовывает геометрию на холсте

0 голосов
/ 25 мая 2018

Я видел пример « Отображение геометрии на холст »: 

  var canvas = document.getElementById('canvas');
  var vectorContext = ol.render.toContext(canvas.getContext('2d'), {size: [100, 100]});

  var fill = new ol.style.Fill({color: 'blue'});
  var stroke = new ol.style.Stroke({color: 'black'});
  var style = new ol.style.Style({
    fill: fill,
    stroke: stroke,
    image: new ol.style.Circle({
      radius: 10,
      fill: fill,
      stroke: stroke
    })
  });
  vectorContext.setStyle(style);

  vectorContext.drawGeometry(new ol.geom.LineString([[10, 10], [90, 90]]));
  vectorContext.drawGeometry(new ol.geom.Polygon([[[2, 2], [98, 2], [2, 98], [2, 2]]]));
  vectorContext.drawGeometry(new ol.geom.Point([88, 88]));

Но что делать с геометрией в проекции EPSG: 4326 (или EPSG: 3857)?

PS Я видел вопрос " Как мы можем отрисовать элемент OpenLayers 3 на холсте, используя стиль, но не используя карту ", но я неЯ не понимаю, с какой проекцией работает код.И уточнить автор не позволяет мне с низкой репутацией на stackoverflow .

Ответы [ 2 ]

0 голосов
/ 28 мая 2018

@ Catch Я немного покопался.В этом ответе он использует canvas.width (в пикселях) и ol.extent.getWidth (экстент) / высота.ol.Extent - это только массив чисел, не имеющий никакой информации о системе координат.Если бы вы использовали географические координаты, он работал бы с ними так, как будто они были картезианскими.Так что это зависит от того, какую область вы хотите отобразить, но я бы рекомендовал преобразовать ее в некоторую проекцию, а затем использовать рекомендованный подход - переводить, масштабировать, переводить (масштаб теперь поддерживается в ol.geom).

Мне удалось нарисовать многоугольник на холсте: 

    var geoJson = '{"type":"Polygon","coordinates":[[[32.00592041015625,49.55951603052614],[31.97296142578125,49.51673910294474],[32.103424072265625,49.433752230525585],[32.224273681640625,49.346151509388676],[32.54974365234375,49.24718981286537],[32.81890869140625,49.09814978542761],[32.80517578125,49.0729662700941],[32.85736083984375,49.0657686340536],[32.87933349609375,49.08376076915357],[32.95623779296875,49.067568140816434],[32.98370361328125,49.09095579858044],[33.145751953125,49.081961848889364],[33.11828613281251,49.067568140816434],[33.123779296875,49.056770122686174],[33.24737548828125,49.063969062121345],[33.23089599609375,49.16284875720291],[33.12652587890625,49.18080571099239],[33.079833984375,49.256153800301064],[32.95898437500001,49.28841067865025],[32.87933349609375,49.3295971091282],[32.83538818359375,49.38863055043896],[32.8436279296875,49.42794681507826],[32.67608642578125,49.4672315972079],[32.67333984375001,49.4297331699307],[32.7447509765625,49.352413884497594],[32.66510009765625,49.34794084076262],[32.52227783203125,49.38460779401288],[32.31079101562501,49.513172668717914],[32.18856811523438,49.50247180563116],[32.18856811523438,49.50247180563116],[32.00592041015625,49.55951603052614]]]}';
var parser  = new ol.format.GeoJSON();
var feature = parser.readFeature( geoJson );
var geom    = feature.getGeometry();

var canvas  = document.getElementById( 'canvas' );

var fill   = new ol.style.Fill({ color: 'blue' });
var stroke = new ol.style.Stroke({ color: 'black' });
var style  = new ol.style.Style({
    fill  : fill,
    stroke: stroke,
    image : new ol.style.Circle({
        radius: 10,
        fill  : fill,
        stroke: stroke
    })
});



function render( height, width, canvas, geometry, style ) {
    var vectorContext = ol.render.toContext(
                                            canvas.getContext( '2d' ),
                                            { size: [width, height] }
                                        );

    var geom   = geometry.clone(),
        line   = geom.getCoordinates()[0],
        extent = ol.extent.boundingExtent( line );

    var dxy = ol.extent.getCenter(extent),
        sxy = [ 
            width / ol.extent.getWidth(extent),
            height / ol.extent.getHeight(extent)
        ];

    var dx = dxy[0],
        dy = dxy[1],
        sx = sxy[0],
        sy = sxy[1];

    geom.translate( -dx, -dy );
    geom.scale( Math.min(sx, sy), -Math.min(sx, sy) );
    geom.translate( width / 2, height / 2 );

    vectorContext.setStyle( style );
    vectorContext.drawGeometry( geom );
}


geom.transform( 'EPSG:4326', 'EPSG:3857' );
render( 400, 400, canvas, geom, style );
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<canvas id="canvas" width="400" height="400" style="width: 400px; height: 400px;"></canvas>

Пример:

Визуализация геометрии OpenLayers в Canvas

0 голосов
/ 26 мая 2018

Элемент HTML canvas используется для рисования графики на лету с помощью JavaScript.Если ваш рисунок на холсте больше не проецируется, вы находитесь в пиксельной координате.Вам придется преобразовать свою геометрию в пиксели.

См. Функцию getPixelFromCoordinate карты, если вы рисуете на холсте карты.

...