目前我有一个使用KML文件作为矢量源显示的矢量 Map .
我想要做的是有一个图像衬垫这个矢量 Map .
Map 是室内地板图,图像与矢量 Map 完全相同,只有更多的细节,文字写在上面等 . 我需要的是 Map 图像底层矢量 Map ,以便墙的矢量 Map 与图像的墙壁完美对齐 . 这可能是因为KML是通过使用QGIS在图像上进行追踪而创建的 .
到目前为止,我已经能够将KML矢量 Map 和png图像显示在 Map 上,但它们并非彼此对齐且尺寸不同 . 这是我需要帮助的!
这里有一些我目前拥有的代码:
创建 Map ,还没有图层(从下拉框中选择 Map )
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 (KML)添加到 Map 中
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: '© <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);
}
});
}
在这一点上,我有一个矢量 Map ,图像位于 Map 上方,图像似乎也较小 .
任何人都可以帮我解决这个问题吗?
***解决方案! ***
一个有效的解决方案,虽然可能不是最好的方法,但它仍然有效 .
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 图层
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);
});
}
似乎工作得很好!任何人都可以帮我分层排序吗?
1 回答
必须使用视图的投影正确地对图像进行地理配准 .
默认视图的投影是
EPSG:3857 (Spherical Mercator).
,此预测的范围是[-20026376.39,-20048966.10,20062366.39,20048966.10]在代码中,为静态图层指定投影(以像素为单位) . 您需要使用视图的投影,如下所示:
更新:
对于图层排序,如果您希望矢量图层在顶部使用push:
http://openlayers.org/en/v3.8.2/apidoc/ol.Collection.html#push