Как отрисовать объекты по координатам EPSG:3857 с помощью java script?

Необходимо отрисовать несколько объектов по координатам EPSG:3857. Ниже код позволяет отрисовывать только один объект, а мне надо несколько в одном канвасе. Очень прошу помочь.

var geoJson = '{"type":"Polygon","coordinates":[[[1598509.53,506813.03],[1598511.21,506853.01],[1598529.81,506850.96],[1598535.33,506810.44],[1598509.53,506813.03]]]}';
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 );

Ответы (0 шт):