使用 OpenLayers 6 仅显示特定国家/地区的最佳方法是什么

Question

所以我想让视图显示的只是保加利亚的地图，如图所示Bulgaria map

我希望用户无法将视图拖到此图片的边界之外，并且在缩放后能够看到整个国家/地区，但又不能在国家/地区以外走太多路。这是我现在使用的代码，没有我需要的限制。 HTML:

  <h2>Bulgaria Map</h2>
<div id="map" class="map"></div>

CSS:

<style>
  .map {
  margin: 0 auto;
    height: 500px;
    width: 70%;
    
  }
</style>

Javascript:

<script type="text/javascript">
const iconFeature = new ol.Feature({
geometry: new ol.geom.Point(ol.proj.fromLonLat([ 24.184119,41.971153])),
name: 'Bulgaria',

});

const map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
  source: new ol.source.OSM(),
}),
new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [iconFeature]
  }),
  style: new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixels',
      src: 'https://openlayers.org/en/latest/examples/data/icon.png'
    })
  })
})
],
view: new ol.View({
center: ol.proj.fromLonLat([25.4833, 42.7250]),
zoom: 6,
maxZoom: 15,
minZoom: 7,



  })
 });
</script>

到目前为止我发现的是扩展属性，但我不确定如何正确执行，所以我实现了如图所示的限制。

Answer 1

如果定义国家/地区的范围：

   const bulgariaExtent = ol.proj.transformExtent([22.345023234, 41.238104147, 28.603526238, 44.228434539], 'EPSG:4326', 'EPSG:3857');

然后您可以将其缓冲 100 公里（投影单位，而不是测地线距离）或任何您喜欢的距离，作为视图限制：

    view: new ol.View({
      extent: ol.extent.buffer(bulgariaExtent, 100000),
      showFullExtent: true,

使用 OpenLayers 6 仅显示特定国家/地区的最佳方法是什么

What is the best approach to show only a specific country using OpenLayers 6

openlayers