使用 openlayer 和 OSM 仅显示一个区域

Question

我找到了这个问题 which is exactly what I'm looking for but the problem is I don't use leaflet. Currently using OpenLayers at the moment, saw some example here 但没有任何想法？

    <div id="map" class="map"></div>
<script type="text/javascript">
  var map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([125.126012,6.066714]),
      zoom: 17,
      minZoom: 17,
      maxZoom: 18
    })
  });
</script>

Answer 1

您需要使用 view extent 属性。注意，它限制了地图中心的位置。

var map = new ol.Map({
  target: 'map',
  layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ],
  view: new ol.View({
    center: ol.proj.fromLonLat([125.126012,6.066714]),
    zoom: 17,
    minZoom: 17,
    maxZoom: 18,
    extent:ol.proj.transformExtent([113,4, 119, 8], 'EPSG:4326', 'EPSG:3857')
  })
});

使用 openlayer 和 OSM 仅显示一个区域

Show only an area using openlayer and OSM

javascript

openlayers

openstreetmap