- Layer source for tile data with URLs in a set XYZ format that are defined in a URL template. By default, this follows the widely-used Google grid where x 0 and y 0 are in the top left. Grids like TMS where x 0 and y 0 are in the bottom left can be used by using the {-y} placeholder in the URL template, so long as the source does not have a custom tile grid

 var baseLayer;
    if(isProduction) {
      baseLayer = new ol.layer.Tile({
        source: new ol.source.XYZ({
          url: '/basemap/xyz/DOSM/Desktop/?z={z}&y={y}&x={x}'
        })
      });

API - Sources & Formats

Tile sources => ol.layer.Tile
source : ol.source.TileWMS

- Layer source for tile data from WMS servers.

  var buLayer = new ol.layer.Tile({
      source: new ol.source.TileWMS({
        serverType: 'geoserver',
        url: wmsBaseUrl,
        params: {
          LAYERS: 'dsm:bu'
        }
      })
    });

API - Sources & Formats

Image sources => ol.layer.Image

- ol.source.ImageWMS

- ol.source.ImageCanvas

- ol.source.ImageStatic

- ol.source.ImageMapGuide

- ol.source.ImageArcGISRest

Subclasses:

API - Sources & Formats

Vector sources => ol.layer.Vector
source : ol.source.TileWMS

- Provides a source of features for vector layers.

- Vector features provided by this source are suitable for editing.

 this.ebSource = new ol.source.Vector();
    var ebLayer = new ol.layer.Vector({
      source: this.ebSource,
      style: new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: "rgb(192,0,0)",
          width: 2
        })
      })
    });

API - Sources & Formats

Formats for reading/writing vector data => ol.format.GeoJSON
format : ol .format.GeoJSON

- Format for reading and writing data in the GeoJSON format

  mounted() {
    this.gjFormat = new ol.format.GeoJSON({
      featureProjection: 'EPSG:3857'
    });

API - Features

A vector object for geographic features with a geometry and other attributes properties, similar to the features in vector file formats like GeoJSON.
format : ol.Feature

 var feature = new ol.Feature({
  geometry: new ol.geom.Polygon(polyCoords),
  labelPoint: new ol.geom.Point(labelCoords),
  name: 'My Polygon'
});
 
// get the polygon geometry
var poly = feature.getGeometry();
 
// Render the feature as a point using the coordinates from labelPoint
feature.setGeometryName('labelPoint');
 
// get the point geometry
var point = feature.getGeometry();

API - Features

 DRAW_POINTS(payload) {
      // Draw the points on the map + set label
      let { label, coordinates } = payload;
      let newCurrentFeature = new ol.Feature(new ol.geom.Point(coordinates));
      newCurrentFeature.set("text", label);
      this.markerSource.addFeature(newCurrentFeature);
 
      // Push the points to the submit object
      this.PUSH_POINTS_TO_SUBMIT({label, coordinates});
    },

Projection

All coordinates and extents need to be provided in view projection (default: EPSG:3857)

 //Transforms a coordinate from longitude/latitude to a different projection.
this.mapView = new ol.View({
      center: ol.proj.fromLonLat([101.5183469, 3.0738379]),
      zoom: 12,
      minZoom: 11,
      maxZoom: 19
});

REFERENCES

https://openlayers.org/en/latest/doc/

https://geoadmin.github.io/ol3/apidoc/?stableonly=true

https://en.wikipedia.org/wiki/OpenLayers

https://openlayers.org/en/latest/apidoc/

https://github.com/openlayers/ol-parcel

	this.map = new ol.Map({
	target: 'map',
	interactions: ol.interaction.defaults({
	mouseWheelZoom: false
	}),

	var drawMarkerPoints = new ol.interaction.Draw({
	type: "Point",
	source: this.markerSource
	});

	import Map from 'ol/Map';

	var map = new Map({target: 'map'});

	//dsl job-assignment.js
	this.map = new ol.Map({
	target: 'ol-map-eb',
	layers: [baseLayer, ebLayer],
	view: this.mapView
	});

	import View from 'ol/View';

	map.setView(new View({
	center: [0, 0],
	zoom: 2
	}));

	//dsl job-assignment
	this.map = new ol.Map({
	target: 'ol-map-eb',
	layers: [baseLayer, ebLayer],
	view: this.mapView
	});
	this.gjFormat = new ol.format.GeoJSON({
	featureProjection: 'EPSG:3857'
	});

	import TileLayer from 'ol/layer/Tile';

	var osmLayer = new TileLayer({source: osmSource});
	map.addLayer(osmLayer);

	//dsl job-assignment - Tile
	var baseLayer = new ol.layer.Tile({
	source: new ol.source.XYZ({
	url: basemapUrl
	})
	});

	controls: ol.control.defaults().extend([new ol.control.ScaleLine({
	className: 'petabp-scale-line ol-scale-line'
	})]),

	var baseLayer;
	if(isProduction) {
	baseLayer = new ol.layer.Tile({
	source: new ol.source.XYZ({
	url: '/basemap/xyz/DOSM/Desktop/?z={z}&y={y}&x={x}'
	})
	});

	var buLayer = new ol.layer.Tile({
	source: new ol.source.TileWMS({
	serverType: 'geoserver',
	url: wmsBaseUrl,
	params: {
	LAYERS: 'dsm:bu'
	}
	})
	});

	this.ebSource = new ol.source.Vector();
	var ebLayer = new ol.layer.Vector({
	source: this.ebSource,
	style: new ol.style.Style({
	stroke: new ol.style.Stroke({
	color: "rgb(192,0,0)",
	width: 2
	})
	})
	});

	mounted() {
	this.gjFormat = new ol.format.GeoJSON({
	featureProjection: 'EPSG:3857'
	});

	var feature = new ol.Feature({
	geometry: new ol.geom.Polygon(polyCoords),
	labelPoint: new ol.geom.Point(labelCoords),
	name: 'My Polygon'
	});

	// get the polygon geometry
	var poly = feature.getGeometry();

	// Render the feature as a point using the coordinates from labelPoint
	feature.setGeometryName('labelPoint');

	// get the point geometry
	var point = feature.getGeometry();

	DRAW_POINTS(payload) {
	// Draw the points on the map + set label
	let { label, coordinates } = payload;
	let newCurrentFeature = new ol.Feature(new ol.geom.Point(coordinates));
	newCurrentFeature.set("text", label);
	this.markerSource.addFeature(newCurrentFeature);

	// Push the points to the submit object
	this.PUSH_POINTS_TO_SUBMIT({label, coordinates});
	},

	//Transforms a coordinate from longitude/latitude to a different projection.
	this.mapView = new ol.View({
	center: ol.proj.fromLonLat([101.5183469, 3.0738379]),
	zoom: 12,
	minZoom: 11,
	maxZoom: 19
	});

	import OSM from 'ol/source/OSM';

	var osmSource = OSM();

	//dsl job-assignment
	this.gjFormat = new ol.format.GeoJSON({
	featureProjection: 'EPSG:3857'
	});

	dsl job-assignment.js - Vector
	// prepare eb layer
	this.ebSource = new ol.source.Vector();
	var ebLayer = new ol.layer.Vector({
	source: this.ebSource,
	style: function style(feature) {
	return new ol.style.Style({
	stroke: new ol.style.Stroke({
	color: 'red',
	width: 2
	}),
	fill: new ol.style.Fill({
	color: [255, 0, 0, 0.1]
	}),
	text: new ol.style.Text({
	font: '12px Arial',
	fill: new ol.style.Fill({
	color: 'black'
	}),
	text: feature.get('ngdbbp') \|\| ''
	})
	});
	}
	});

OpenLayers