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);

静态图像层性能问题 - 打开图层3

1 个答案: