How to use the ol/View function in ol

var ol_Overlay_Magnify = function (options) {
	var elt = document.createElement("div");
			elt.className = "ol-magnify";
	this._elt = elt;

	ol_Overlay.call(this,
		{	positioning: options.positioning || "center-center",
			element: this._elt,
			stopEvent: false
		});
	// Create magnify map
	this.mgmap_ = new ol_Map(
	{	controls: new ol_Collection(),
		interactions: new ol_Collection(),
		target: options.target || this._elt,
		view: new ol_View({ projection: options.projection }),
		layers: options.layers
	});
	this.mgview_ = this.mgmap_.getView();

	this.external_ = options.target?true:false;

	this.set("zoomOffset", options.zoomOffset||1);
	this.set("active", true);
	this.on("propertychange", this.setView_.bind(this));
};
ol_ext_inherits(ol_Overlay_Magnify, ol_Overlay);

var ol_Game = function(options) {
  options = options || {};
  
  ol_Object.call (this);

  var map = options.map || new ol_Map ({
    target: options.target,
    loadTilesWhileAnimating: true,
    loadTilesWhileInteracting: true,
    view: new ol_View ({
      zoom: options.zoom,
      center: options.center
    }),
    interactions: [],
    controls: [],
    layers: options.layers,
  });

  if (options.controls) for (var i=0; i

function processStyle(glStyle, map, baseUrl, host, path, accessToken) {
  const promises = [];
  let view = map.getView();
  if (!view.isDef() && !view.getRotation() && !view.getResolutions()) {
    view = new View({
      maxResolution: defaultResolutions[0]
    });
    map.setView(view);
  }

  if ('center' in glStyle && !view.getCenter()) {
    view.setCenter(fromLonLat(glStyle.center));
  }
  if ('zoom' in glStyle && view.getZoom() === undefined) {
    view.setResolution(defaultResolutions[0] / Math.pow(2, glStyle.zoom));
  }
  if (!view.getCenter() || view.getZoom() === undefined) {
    view.fit(view.getProjection().getExtent(), {
      nearest: true,
      size: map.getSize()
    });

setView(options: MapViewOptions) {
    const view = new olView(options);
    this.ol.setView(view);

    this.unsubscribeGeolocate();
    if (options) {
      if (options.center) {
        const center = olproj.fromLonLat(options.center, this.projection);
        view.setCenter(center);
      }

      if (options.geolocate) {
        this.geolocate(true);
      }
    }
  }

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import GeoJSON from 'ol/format/GeoJSON';
import GeometryType from 'ol/geom/GeometryType';
import {DragAndDrop, Draw, Modify, Snap} from 'ol/interaction';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import sync from 'ol-hashed';

const map = new Map({
  target: 'map-container',
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

sync(map);

const source = new VectorSource();

const layer = new VectorLayer({
  source: source
});
map.addLayer(layer);

map.addInteraction(new DragAndDrop({
  source: source,

function createPlaceholderView() {
        return new View({
            center: transform([17.474129, 52.574000], 'EPSG:4326', 'EPSG:3857'), //Latitude longitude    to Spherical Mercator
            zoom: 4,
            units: "m"
        })
    }

setView(options: MapViewOptions) {
    if (this.viewController !== undefined) {
      this.viewController.clearStateHistory();
    }

    const view = new olView(options);
    this.ol.setView(view);

    this.unsubscribeGeolocate();
    if (options) {
      if (options.center) {
        const projection = view.getProjection().getCode();
        const center = olproj.fromLonLat(options.center, projection);
        view.setCenter(center);
      }

      if (options.geolocate) {
        this.geolocate(true);
      }
    }
  }

import {OSM, Vector as VectorSource} from 'ol/source';

const map = new Map({
  layers: [
    new TileLayer({
      source: new OSM()
    }),
    new VectorLayer({
      source: new VectorSource({
        url: 'data/geojson/countries.geojson',
        format: new GeoJSON()
      })
    })
  ],
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

document.getElementById('export-png').addEventListener('click', function() {
  map.once('rendercomplete', function() {
    domtoimage.toPng(map.getViewport().querySelector('.ol-layers'))
      .then(function(dataURL) {
        const link = document.getElementById('image-download');
        link.href = dataURL;
        link.click();
      });
  });
  map.renderSync();
});

createOlObject () {
        const view = new View({
          center: this.pointToViewProj(this.center),
          constrainRotation: this.constrainRotation,
          enableRotation: this.enableRotation,
          extent: this.extent ? this.extentToViewProj(this.extent) : undefined,
          maxResolution: this.maxResolution,
          minResolution: this.minResolution,
          maxZoom: this.maxZoom,
          minZoom: this.minZoom,
          projection: this.projection,
          resolution: this.resolution,
          resolutions: this.resolutions,
          rotation: this.rotation,
          zoom: this.zoom,
          zoomFactor: this.zoomFactor,
        })

extent: extent,
      source: this[_drawingSource],
      projection: projection,
      updateWhileAnimating: true,
      updateWhileInteracting: true,
    });

    const view = new View({
      center: getCenter(extent),
      extent: extent,
      projection: projection,
      resolutions: resolutions,
      rotation: rotation
    });

    const overviewView = new View({
      projection: projection,
      resolutions: resolutions,
      rotation: rotation
    });

    this[_interactions] = {
      draw: undefined,
      select: undefined,
      modify: undefined
    };

    this[_controls] = {
      scale: new ScaleLine({
        units: 'metric',
        className: ''
      })