Add padding option for View

examples/view-padding.js

@@ -0,0 +1,73 @@
+import GeoJSON from '../src/ol/format/GeoJSON.js';
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
+import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
+import {OSM, Vector as VectorSource} from '../src/ol/source.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {fromLonLat} from '../src/ol/proj.js';
+
+/** @type {VectorSource<import("../src/ol/geom/SimpleGeometry.js").default>} */
+const source = new VectorSource({
+  url: 'data/geojson/switzerland.geojson',
+  format: new GeoJSON(),
+});
+const style = new Style({
+  fill: new Fill({
+    color: 'rgba(255, 255, 255, 0.6)',
+  }),
+  stroke: new Stroke({
+    color: '#319FD3',
+    width: 1,
+  }),
+  image: new CircleStyle({
+    radius: 5,
+    fill: new Fill({
+      color: 'rgba(255, 255, 255, 0.6)',
+    }),
+    stroke: new Stroke({
+      color: '#319FD3',
+      width: 1,
+    }),
+  }),
+});
+const vectorLayer = new VectorLayer({
+  source: source,
+  style: style,
+});
+const view = new View({
+  center: fromLonLat([6.6339863, 46.5193823]),
+  padding: [170, 50, 30, 150],
+  zoom: 6,
+});
+const map = new Map({
+  layers: [
+    new TileLayer({
+      source: new OSM(),
+    }),
+    vectorLayer,
+  ],
+  target: 'map',
+  view: view,
+});
+
+const zoomtoswitzerland = document.getElementById('zoomtoswitzerland');
+zoomtoswitzerland.addEventListener(
+  'click',
+  function () {
+    const feature = source.getFeatures()[0];
+    const polygon = feature.getGeometry();
+    view.fit(polygon);
+  },
+  false
+);
+
+const centerlausanne = document.getElementById('centerlausanne');
+centerlausanne.addEventListener(
+  'click',
+  function () {
+    const feature = source.getFeatures()[1];
+    const point = feature.getGeometry();
+    view.setCenter(point.getCoordinates());
+  },
+  false
+);