OpenLayers 3:尝试将图像参考添加到矢量图层

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了OpenLayers 3:尝试将图像参考添加到矢量图层相关的知识,希望对你有一定的参考价值。

目前我有一个使用KML文件作为矢量源显示的矢量地图。

我想要做的是有一个图像衬垫这个矢量地图。

地图是室内地板图,图像与矢量地图完全相同,只有更多细节,文字写在上面等。我需要的是地图图像底层矢量地图,以便墙壁的矢量地图与图像的墙壁完美对齐。这可能是因为KML是通过使用QGIS在图像上进行追踪而创建的。

到目前为止,我已经能够将KML矢量地图和png图像显示在地图上,但它们并未彼此对齐且尺寸不同。这是我需要帮助的!

这里有一些我目前拥有的代码:

创建地图,还没有图层(从下拉框中选择地图)

var map = new ol.Map({
  layers: [],  
  target: 'floormap',
  interactions: ol.interaction.defaults({mouseWheelZoom:false}),
  view: new ol.View({
      center: [0, 0],          
      zoom: 19,
      minZoom: 15,
      maxZoom: 30
    })    
});   

将所选地图(KML)添加到地图中

map.removeLayer(vector);

vector = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: MAPS_URL + maps[map_id],
        format: new ol.format.KML()
    })
});        

map.addLayer(vector);
setMapExtent(vector);  

现在我试图添加图像,但它没有对齐

// this part here i feel may be the problem, 
// i just copied and pasted from an example om openlayers.org, 
// i dont actually know much about the extent and how to match it to 
// the vector map
var extent = [0,0,1024,684];

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

image = new ol.layer.Image({
    source: new ol.source.ImageStatic({
        attributions: [
            new ol.Attribution({
                html: '&copy; <a href="http://xkcd.com/license.html">xkcd</a>'
            })
        ],
        url: MAPS_URL + images[map_id],
        projection: projection,
        imageExtent: extent
    })
});

map.addLayer(image);

setMapExtent方法

function setMapExtent(vectorMap) {
    var vectorSource = vectorMap.getSource();
    var listenerKey = vectorSource.on('change', function () {
        if (vectorSource.getState() === 'ready') {
            var extent = vectorSource.getExtent();
            map.getView().fitExtent(extent, map.getSize());
            vectorSource.unByKey(listenerKey);
        }
    });
}  

在这一点上,我有一个矢量地图,图像位于地图上方,图像似乎也较小。

任何人都可以帮我解决这个问题吗?

***解决方案! ***

一个有效的解决方案,虽然可能不是最好的方法,但它仍然有效。

var map = new ol.Map({
   layers: [],  
   target: 'floormap',
   interactions: ol.interaction.defaults({mouseWheelZoom:false}),
   view: new ol.View({
   center: [0, 0],          
   zoom: 19,
   minZoom: 15,
   maxZoom: 30
 })    

});

添加新地图图层

map.removeLayer(vector);

vector = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: MAPS_URL + maps[map_id],
        format: new ol.format.KML()
    })
});        

map.addLayer(vector);
setMapExtent(vector);   

// call image adding function pass in vector
// to get its extend
addImage(vector);

addImage函数

function addImage(vectorMap) {

    var vectorSource = vectorMap.getSource();

    // listen for one change on the vector to get the extent of it
    // for use in setting the image extent. tried to use on.('load')
    // but it didnt work
    var listenerKey = vectorSource.once('change', function () {

        var extent = vectorSource.getExtent();

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

        image = new ol.layer.Image({
            source: new ol.source.ImageStatic({
                attributions: [],
                url: MAPS_URL + images[map_id],
                projection: projection,
                imageExtent: extent
            })
        });

        // remove vector layer else they keep stacking up
        map.removeLayer(vector);
        // add image
        map.addLayer(image); 
        // re-add vector only push so it goes above the image
        map.getLayers().push(vector); 

    });
}

似乎工作得很好!任何人都可以帮我分层排序吗?

答案

必须使用视图的投影正确地对图像进行地理配准。

默认视图的投影是EPSG:3857 (Spherical Mercator).,此预测的范围是[-20026376.39,-20048966.10,200866366.39,20048966.10]

在代码中,为静态图层指定投影(以像素为单位)。您需要使用视图的投影,如下所示:

    // Here the extent of your layer in EPSG:3857  -> [minx, miy, max, mayy]
    var extent = [-10000000, -10000000, 10000000, 10000000];

    image = new ol.layer.Image({
        source: new ol.source.ImageStatic({
            attributions: [
                new ol.Attribution({
                    html: '&copy; <a href="http://xkcd.com/license.html">xkcd</a>'
                })
            ],
            url: MAPS_URL + images[map_id],
            imageSize: [1024, 684],  // Don't forget the image size here
            imageExtent: extent
        })
    });

    map.addLayer(image);

更新:

对于图层排序,如果您希望矢量图层在顶部使用push:

http://openlayers.org/en/v3.8.2/apidoc/ol.Collection.html#push

map.getLayers().push(vector)

以上是关于OpenLayers 3:尝试将图像参考添加到矢量图层的主要内容,如果未能解决你的问题,请参考以下文章

地理服务器将空矢量图块发送到 Openlayers

11openlayers 地图交互

openlayers 3缩放到组合范围

从 API 到矢量图层 openlayers JSON

Openlayers API-Style

性能测试 OpenLayers vs Leaflet