时间戳

首页 > 解决方案 > OpenLayers 6.5.0：放大时功能消失

openlayers-6 - OpenLayers 6.5.0：放大时功能消失

问题描述

放大时，所有功能都会消失。这些特征位于反子午线的两侧。为了能够使用修改交互，某些要素的地理长度超过了 180 度的值。

欢迎任何帮助！

var coords = [
  [32100000, -7900000],
  [28900000, -9700000],
  [26300000, -10000000],
  [23800000, -9300000],
  [20400000, -6500000]
];

var osmLayer = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var featuresLayer = new ol.layer.Vector({
  source: new ol.source.Vector()
});

var map = new ol.Map({
  layers: [osmLayer, featuresLayer],
  target: document.getElementById("map")
});

var s = featuresLayer.getSource();
for (var i = 0; i < coords.length; i++) {
  s.addFeature(new ol.Feature({
    geometry: new ol.geom.Point(coords[i])
  }));
}

map.setView(new ol.View({
  center: coords[parseInt(coords.length / 2)],
  zoom: 3,
  maxZoom: 18,
  minZoom: 3
}));
html,
      body,
      .map {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
<link href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
<div id="map" class="map"></div>

标签： openlayers-6

解决方案

根据@Mike 的评论，如果您的坐标超出正常世界，请使用 new ol.source.Vector({wrapX: false})

var featuresLayer = new ol.layer.Vector({
  source: new ol.source.Vector({wrapX: false})
});

更新的代码片段： 

var coords = [
  [32100000, -7900000],
  [28900000, -9700000],
  [26300000, -10000000],
  [23800000, -9300000],
  [20400000, -6500000]
];

var osmLayer = new ol.layer.Tile({
  source: new ol.source.OSM()
});

var featuresLayer = new ol.layer.Vector({
  source: new ol.source.Vector({wrapX: false})
});

var map = new ol.Map({
  layers: [osmLayer, featuresLayer],
  target: document.getElementById("map")
});

var s = featuresLayer.getSource();
for (var i = 0; i < coords.length; i++) {
  s.addFeature(new ol.Feature({
    geometry: new ol.geom.Point(coords[i])
  }));
}

map.setView(new ol.View({
  center: coords[parseInt(coords.length / 2)],
  zoom: 3,
  maxZoom: 18,
  minZoom: 3
}));
html,
      body,
      .map {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
<link href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/css/ol.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/build/ol.js"></script>
<div id="map" class="map"></div>

推荐阅读