- ВКонтакте
- РћРТвЂВВВВВВВВнокласснРСвЂВВВВВВВВРєРСвЂВВВВВВВВ
- РњРѕР№ Р В Р’В Р РЋРЎв„ўР В Р’В Р РЋРІР‚ВВВВВВВВРЎР‚
- Viber
- Skype
- Telegram
Как отрисовать объекты по координатам 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 );