2

I want to add an images like vector feature to map. Now I use this code:

const format = new WKT()
for (let i=0; i<previews.length; i++)
    let vectorFeature = format.readFeature(previews[i].polygon, {
         dataProjection: 'EPSG:4326',
         featureProjection: 'EPSG:3857'
    })
    let imageLayer = new ImageLayer({
        source: new Static({
            attributions: 'attributions',
            url: '/10103996_'+(i+1)+'.png',
            projection: mapProjection,
            imageExtent: vectorFeature.getGeometry().getExtent()
        })
    })

And previews have structure like this:

"previews": [{
            "file_name": url + "10103996_1.png",
            "polygon": "MULTIPOLYGON(((84.7750652694291 56.1279268975274,86.6554085015044 56.1279268975274,86.6554085015044 55.0621305005073,84.7750652694291 55.0621305005073,84.7750652694291 56.1279268975274)))"
        }, {
            "file_name": url + "10103996_2.png",
            "polygon": "MULTIPOLYGON(((84.4341862638055 55.2868953528938,86.2427851333094 55.2868953528938,86.2427851333094 54.2884096525321,84.4341862638055 54.2884096525321,84.4341862638055 55.2868953528938)))"
        }]

In Openlayers 2 there is a solution to add an images to vector contour:

OpenLayers.Feature.ImageFeature = OpenLayers.Class(OpenLayers.Feature.Vector, {
    previews: null,
    previewsVisibility: false,
    visibility: true,
    initialize: function(options){ 
        OpenLayers.Feature.Vector.prototype.initialize.call(this, options.geometry, options.attributes, options.style);
        this.fid = options.fid;
        this.previews = [];
        this.previewsVisibility = options.previewVisibility || false;

        Ext.each(options.previews, function(preview) {
            var g = OpenLayers.Geometry.fromWKT(preview.polygon);
            g = g.transform("EPSG:4326", "EPSG:3857");

            this.addPreview(g, preview.fileName);
        }, this);
    },
    addPreview: function(geometry, url){
        if (Ext.isNumber(Ext.each(this.previews, function(feature){
            return feature.attributes.previewOriginalUrl != url;
        }, this))) return;
        var vertices = geometry.getVertices();
        var preview = new OpenLayers.Feature.Vector(
            geometry.getCentroid(),
            {
                width: vertices[0].distanceTo(vertices[1]),
                height: vertices[1].distanceTo(vertices[2]),
                alpha: Math.atan2(vertices[1].y - vertices[0].y, vertices[1].x - vertices[0].x),
                previewOriginalUrl: url,
                previewUrl: url +"?r=" + Math.random(),
                render: "drawAlways"
            });
        preview.selectable = false;
        this.previews.push(preview);
    },
    CLASS_NAME: "OpenLayers.Feature.Vector"
});

What classes i need to use for add more than 1 image feature to layer?

Veers
  • 21
  • 3
  • layer is not kind of feature. layer just covers whole map. you need vertor layer and feature object with icon style http://openlayers.org/en/latest/apidoc/module-ol_style_Icon.html – Chase Choi Aug 23 '18 at 02:04

0 Answers0