现在我正在使用OpenLayers 4在basemap上覆盖一些平铺图像地图,但是有些图层数据不准确,所以图层的特征位置与基地图的特征位置相差不大。为了避免这一点,我想要显示图层从原来的瓷砖位置的小位移.在OpenLayers 4中有可能吗?
发布于 2017-12-18 09:00:44
OpenLayers通常使用画布呈现(您可以告诉它不要这样做)并公开钩子,以便您可以操作呈现上下文。图层间谍示例向我们展示了如何做到这一点。可以找到这里的API,包括所有可用方法的列表。一个是void ctx.translate(x, y);
下面的样本有两个基本层,其中一个被50像素抵消。请注意,如果您的偏移量是空间的而不仅仅是像素,则可能必须考虑缩放级别(计算当前缩放级别的偏移量由您决定)。
const tileA = new ol.layer.Tile({
source: new ol.source.OSM(),
opacity: 1
});
const tileB = new ol.layer.Tile({
source: new ol.source.OSM(),
opacity: 0.5
});
// before rendering the layer, move it
tileB.on('precompose', function(event) {
var ctx = event.context;
// in case 1 pixel is not really 1 pixel, e.g iPhone
var pixelRatio = event.frameState.pixelRatio;
ctx.save();
ctx.translate(pixelRatio * 50, pixelRatio * 50);
});
// after rendering the layer, restore the canvas context,
// so that continous rendering cycles do not stack
tileB.on('postcompose', function(event) {
var ctx = event.context;
ctx.restore();
});
const map = new ol.Map({
target: document.getElementById('map'),
view: new ol.View({
center: ol.proj.fromLonLat([76.8512, 43.2220]),
zoom: 15
}),
layers: [ tileA, tileB ]
});#map {
/* just for testing purposes */
width: 100%;
min-width: 240px;
max-width: 500px;
margin-top: 50px;
height: 200px;
}<link href="https://openlayers.org/en/v4.6.4/css/ol.css" rel="stylesheet"/>
<script src="https://openlayers.org/en/v4.6.4/build/ol-debug.js"></script>
<div id="map"></div>
https://stackoverflow.com/questions/47852884
复制相似问题