OpenLayers несколько изображений с географической привязкой - PullRequest
Новая
       36

OpenLayers несколько изображений с географической привязкой

0 голосов
/ 27 марта 2019

Мне нужно отображать конкретные карты в определенных местах. Карты хранятся в файлах изображений (JPG) с известной географической привязкой. Остальная часть представления заполнена стандартными плитками XYZ.

Для отображения 1 изображения (согласно документации) я могу использовать 

new ol.layer.Image({
  source: new ol.source.ImageStatic({
    url: 'myimage.jpg',
    projection: 'EPSG:3857',
    imageExtend: [486303.9778100852272473,
                  800886.4222691040486097, 
                  486822.4427326705190353, 
                  6801434.6447209259495139]
  })
})

Это дает мне 1 изображение на слой. Поскольку у меня есть около 200 таких мест на карте, мне нужно создать 200 слоев. Я верю, что это убьет компьютер клиента. Есть ли способ, как отобразить все изображения, используя 1 слой?

1 Ответ

1 голос
/ 27 марта 2019

До тех пор, пока изображения не будут перепроецированы, производительность загрузки после загрузки всех изображений будет незначительной.Загрузка всех изображений (или одного изображения с разными фиктивными параметрами, чтобы сломать кэш и имитировать разные изображения) очень заметно занимает время, но это будет неизбежно, как бы они ни были загружены.Вот сценарий быстрого теста: 

var raster_OSM = new ol.layer.Tile({
    source: new ol.source.OSM()
});

var map = new ol.Map({        
    layers: [raster_OSM],
    target: 'map',
    view: new ol.View({
        center: [0,0],
        zoom: 2
    })        
});

for (var i=0; i<20; i++) {
    for (var j=0; j<10; j++) {
        var raster_image = new ol.layer.Image({
            source: new ol.source.ImageStatic({         
                url: 'https://imgs.xkcd.com/comics/online_communities.png?i='+ i + '&j=' + j,
                imageExtent: ol.proj.transformExtent([-170+i*15, 75-j*15, -160+i*15, 65-j*15],'EPSG:4326','EPSG:3857')
            })
        });
        map.addLayer(raster_image);
    }
}

Но 200 слоев, перепроектированных из EPSG: 4326 в EPSG: 3857 действительно убивают браузер: 

    var raster_image = new ol.layer.Image({
        source: new ol.source.ImageStatic({         
            url: 'https://imgs.xkcd.com/comics/online_communities.png?i='+ i + '&j=' + j,
            imageExtent: [-170+i*15, 75-j*15, -160+i*15, 65-j*15],
            projection: 'EPSG:4326'
        })
    });
...