首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >OpenLayers 4能改变贴图的显示位置吗?

OpenLayers 4能改变贴图的显示位置吗?
EN

Stack Overflow用户
提问于 2017-12-17 06:50:59
回答 1查看 915关注 0票数 0

现在我正在使用OpenLayers 4在basemap上覆盖一些平铺图像地图,但是有些图层数据不准确,所以图层的特征位置与基地图的特征位置相差不大。为了避免这一点,我想要显示图层从原来的瓷砖位置的小位移.在OpenLayers 4中有可能吗?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-12-18 09:00:44

OpenLayers通常使用画布呈现(您可以告诉它不要这样做)并公开钩子,以便您可以操作呈现上下文。图层间谍示例向我们展示了如何做到这一点。可以找到这里的API,包括所有可用方法的列表。一个是void ctx.translate(x, y);

下面的样本有两个基本层,其中一个被50像素抵消。请注意,如果您的偏移量是空间的而不仅仅是像素,则可能必须考虑缩放级别(计算当前缩放级别的偏移量由您决定)。

代码语言:javascript
运行
复制
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 ]
});
代码语言:javascript
运行
复制
#map {
  /* just for testing purposes */
  width: 100%;
  min-width: 240px;
  max-width: 500px;
  margin-top: 50px;
  height: 200px;
}
代码语言:javascript
运行
复制
<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>

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/47852884

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档