2

I have an image that I need to create an OL3 map for, so I've done:

var map;

$(function() {
    var imgProjection = new ol.proj.Projection({
        code: 'pixel',
        units: 'pixels',
        extent: [0, 0, 3721, 2631]
    });

    map = new ol.Map({
        target: 'skimap',
        renderer: 'canvas',
        layers: [
            new ol.layer.Image({
                source: new ol.source.ImageStatic({
                    url: 'http://skimondo.swissgeo.ch/mapeditor/config/schwarzsee/data/map.jpg',
                    imageSize: [3721, 2631],
                    imageExtent: [0, 0, 3721, 2631],
                    projection: imgProjection,
                    center: ol.extent.getCenter(imgProjection.getExtent()),
                    extent: imgProjection.getExtent()
                })
            })
        ],
        view: new ol.View2D({
            projection: new ol.proj.EPSG4326(),
            center: ol.extent.getCenter(imgProjection.getExtent()),
            zoom: 2
        })
    });

    var vectorSource = new ol.source.GeoJSON({"type":"LineString","coordinates":[[3.625,-28.952465726],[0.1875,2.235034274],[0.09375,19.578784274],[-1.25,33.922534274]]});
    var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#FF0000',
                width: 2
            })
        })
    });

    map.addLayer(vectorLayer);

But no feature shows up plotted onto the map? I am not sure if I have correctly made the map / layers / projection ? I have basically been trying to convert the old OL 2.13 code that I had working. It used WKT which was generated from the DB using ST_AsText, for the OL3 code, I have to use geoJSON (which is generated from ST_AsGeoJSON I believe):

$(function() {
    var map = new OpenLayers.Map('skimap', { controls: [] });

    map.addControl(new OpenLayers.Control.PanZoomBar());
    map.addControl(new OpenLayers.Control.KeyboardDefaults());
    map.addControl(new OpenLayers.Control.Navigation());
    map.addControl(new OpenLayers.Control.ArgParser());

    var options = {
        numZoomLevels: 5,
        minResolution: 0.05,
        maxResolution: 0.30,
        projection: new OpenLayers.Projection('EPSG:4326'),
        isBaseLayer: true,
        opacity: 0.8
    };

    var skimap_image = new OpenLayers.Layer.Image(
        'schwarzsee',
        'http://skimondo.swissgeo.ch/mapeditor/config/schwarzsee/data/map.jpg',
        new OpenLayers.Bounds(-180, -127.272238646, 180, 127.272238646),
        new OpenLayers.Size(3721, 2631),
        options
    );

    map.addLayers([skimap_image]);

    var vector_layer = new OpenLayers.Layer.Vector('Points', {
        projection: new OpenLayers.Projection('EPSG:4326')
    });

    var polygonFeature = [];

    var polygonGeom = new OpenLayers.Geometry.fromWKT('LINESTRING(X X, X X)');
    polygonFeature.push( new OpenLayers.Feature.Vector(polygonGeom,
        {
            id: '1'
        },
        {
            pointRadius: 8,
            color: '#FF0000',
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            fillColor: '#FF0000',
            fillOpacity: 0.4
        }
    ) );

    vector_layer.addFeatures(polygonFeature);

    map.addLayer(vector_layer);

    map.zoomToMaxExtent();

    map.zoomTo(10);

});

Any ideas why my OL3 version code isn't working (with added features showing up)?

1 Answer 1

2

Ok, I got this working with a work-around. Since WKT isn't yet implemented into OL3 (beta.5), and my GeoJSON calls didn't seem to show up anything, I then tried ol.geom.

I had to parse which function to use for each item in my data, but now it works for LinePoints:

$(function() {
    var epsgProjection = new ol.proj.EPSG4326();

    var imgProjection = new ol.proj.Projection({
        code: 'pixel',
        units: 'pixels',
        extent: [-180, -127.272238646, 180, 127.272238646]
    });

    var vectorSrc = new ol.source.Vector();

    map = new ol.Map({
        ol3Logo: false,
        target: 'skimap',
        renderer: 'canvas', // 'canvas', 'dom', 'webgl'
        layers: [
            new ol.layer.Image({
                source: new ol.source.ImageStatic({
                    url: 'http://skimondo.swissgeo.ch/mapeditor/config/schwarzsee/data/map.jpg',
                    imageSize: [3721, 2631],
                    imageExtent: imgProjection.getExtent(),
                    projection: epsgProjection,
                    extent: imgProjection.getExtent()
                })
            }),
            new ol.layer.Vector({
                projection: epsgProjection,
                source: vectorSrc
            })
        ],
        view: new ol.View2D({
            projection: epsgProjection,
            extent: imgProjection.getExtent(),
            center: [0, 0],
            zoom: 3,
            maxZoom: 5,
            minZoom: 2
        })
    }).on('click', function(evt) {
        var coordinate = evt.coordinate;
        console.info(coordinate);
    });

            var vectorFeature = new ol.Feature({
        geometry: new ol.geom.LineString([[3.625,-28.952465726],[0.1875,2.235034274],[0.09375,19.578784274],[-1.25,33.922534274]]),
        name: 'Vallée de l\'impossible'
    });
    vectorFeature.setStyle(new ol.style.Style({
        fill: new ol.style.Fill({
            color: '#FF0000',
            weight: 10
        }),
        stroke: new ol.style.Stroke({
            color: '#FF0000',
            width: 3
        }),
        text: new ol.style.Text({
            font: '12px Calibri,sans-serif',
            text: 'Vallée de l\'impossible',
            textBaseline: 'middle',
            textAlign: 'center',
            fill: new ol.style.Fill({
                color: '#000'
            }),
            stroke: new ol.style.Stroke({
                color: '#fff',
                width: 3
            })
        })
    }));

    vectorSrc.addFeature(vectorFeature);

    });

I suppose this will probably change again when OL3 is stable.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.