Проблемы с производительностью статического изображения - Открытые слои 3

Question

Я получаю данные в lat/lon. Мне нужно построить все это на статическом изображении в OpenLayers 3. Я не использую OSM или что-то еще, мое изображение должно быть базовым слоем с векторным слоем (точками) сверху. Я получил его работу, добавив статический слой изображения, установив, чтобы степень была четырьмя углами в lat/lon, а затем построила мои функции поверх нее. Однако это работает в браузере очень медленно, и на мобильных устройствах он выведет браузер через пару секунд. Каков правильный способ сделать это? Должен ли я использовать другой тип слоя? Нужно ли преобразовывать координаты lat/lon в пиксели? Если да, то как бы это сделать?

я сузил рухнуть к статическому слоя изображения, а когда я поставил его проекцию мне нужно, он падает на мобильной (моей целевой платформе):

var ovProj = ol.proj.get('EPSG:4326'); 
var myStaticImageLayer = new ol.layer.Image({ 
    source: new ol.source.ImageStatic({ 
     url: '../_images/mallSitePlan.png', 
     imageExtent: [-121.90320739419553, 37.409945396290674, -121.89234011506653, 37.41962634032544], 
     projection: ovProj 
    }) 
}); 

var view = new ol.View({ 
    center: ol.proj.transform([-121.90320739419553, 37.409945396290674], 'EPSG:4326', 'EPSG:3857'), 
    zoom: 18, 
    enableRotation: false 
}); 

var map = new ol.Map({ 
    target: 'map', 
    layers: [myStaticImageLayer], 
    view: view 
}) 

Если я запускаю его в этой проекции , это не сбой, но я не могу нарисовать свои точки в правильных местах, поскольку я получаю их в EPSG: 4326.

var extent = [0, 0, 1024, 968]; 
var projection = new ol.proj.Projection({ 
    code: 'xkcd-image', 
    units: 'pixels', 
    extent: extent 
}); 

var imageLayer = new ol.layer.Image({ 
    source: new ol.source.ImageStatic({ 
     attributions: '© <a href="http://xkcd.com/license.html">xkcd</a>', 
     url: '../_images/mallSitePlan.png', 
     projection: projection, 
     imageExtent: extent 
    }) 
}); 

var map = new ol.Map({ 
    layers: [imageLayer, myVectorLayer], 
    target: 'mymap', 
    view: new ol.View({ 
     projection: projection, 
     center: ol.extent.getCenter(extent) 
    }) 
}); 

Answer 1

Итак, я как-то понял это. Я не совсем уверен, почему он работает таким образом, а не так, как у меня. Если кто-то может дать дополнительное объяснение, это будет очень признательно. Лучше всего сначала создать свою карту? Во всяком случае, вот код, который позволяет мне иметь статический слой изображения без проблем с производительностью/сбой на хроме, и это в проекции, в которой я нуждаюсь.

// Create map 
var map = new ol.Map({ 
    target: 'map', // The DOM element that will contains the map 
    view: new ol.View({ 
     center: ol.proj.transform([-121.897329, 37.415616], 'EPSG:4326', 'EPSG:3857'), 
     zoom: 16, 
     minZoom: 16, 
     enableRotation: false, 
     extent: ol.extent.applyTransform([-121.90320739419553, 37.409945396290674, -121.89234011506653, 37.41962634032544], ol.proj.getTransform("EPSG:4326", "EPSG:3857")) 
    }) 
}); 

// Create an image layer 
var imageLayer = new ol.layer.Image({ 
    source: new ol.source.ImageStatic({ 
     url: '../_images/mallSitePlan.png', 
     projection: map.getView().getProjection(), 
     imageExtent: ol.extent.applyTransform([-121.90320739419553, 37.409945396290674, -121.89234011506653, 37.41962634032544], ol.proj.getTransform("EPSG:4326", "EPSG:3857")) 
    }) 
}); 
//add image layer to map 
map.addLayer(imageLayer);