@extendz/extendz-openlayer
Version:
Extend UI Platform built on Angular Material
647 lines • 24.7 kB
JavaScript
/**
* Copyright 2018 the original author or authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import * as tslib_1 from "tslib";
import { Injectable, NgZone } from '@angular/core';
import * as ol from 'openlayers';
import { OpenLayerToolType, PointTool, PolygonTool } from './utils/index';
import { Observable } from 'rxjs/Observable';
var ExtendzOpenlayerService = /** @class */ (function () {
function ExtendzOpenlayerService(zone) {
this.zone = zone;
this.polygonFeaturs = [];
this.pointFeaturs = [];
this.coordinats = [];
/**
* All map interactions
*/
this.interactions = new ol.Collection();
/**
* Drap and pan interaction.
* Activated only with middle mouse button.
*/
this.dragPanInteraction = new ol.interaction.DragPan({
condition: function (event) {
var originalEvent = event.originalEvent;
if (originalEvent.button == 1)
return true;
return false;
}
});
/**
* Mouse Wheel zoom interaction.
*/
this.mouseWheelZoomInteraction = new ol.interaction.MouseWheelZoom();
this.haveFeature = false;
this.featureDeleted = false;
this.returnCollection = [];
}
/**
* @method : initMap
* @author : Rumes
* @param olOption
* @returns void
* @description get the png image and extent and show it in the canves.
*/
ExtendzOpenlayerService.prototype.initMap = function (olOption) {
// set initial extent
this.tiffImage = olOption.tiffImage;
if (olOption.tiffImage.extent) {
this.extent = this.tiffImage.extent;
}
//initial projection
this.projection = new ol.proj.Projection({
code: 'EPSG:4326',
units: 'pixels',
extent: this.extent
});
// initial source
this.source = new ol.source.ImageStatic({
url: this.tiffImage.imageUrl,
imageExtent: this.extent,
projection: this.projection
});
// initial image layer
this.imageLayer = new ol.layer.Image({
source: this.source
});
// initial interaction
this.interactions.push(this.dragPanInteraction);
this.interactions.push(this.mouseWheelZoomInteraction);
// initiate map
this.map = new ol.Map({
interactions: this.interactions,
target: 'openlayer',
layers: [this.imageLayer],
renderer: 'canvas',
view: new ol.View({
projection: this.projection,
center: ol.extent.getCenter(this.extent),
zoom: 2,
maxZoom: 8
})
});
this.jobID = olOption.tiffImage.jobId;
this.onDraw = olOption.drawEmmiter;
this.onDelete = olOption.deleteEmmiter;
if (olOption.drawType == 0 || olOption.drawType == 1) {
this.setToolExist(olOption.drawType, olOption.tooltype, olOption.points, olOption.color);
}
}; // initMap()ointToolType
ExtendzOpenlayerService.prototype.onChangeImage = function (changes, opt) {
// Only listen to changes on job
console.log('changes' + changes);
if (!changes['tiffImage']) {
console.log('no change');
return;
}
else {
if (opt.tiffImage) {
this.tiffImage = opt.tiffImage;
this.extent = this.tiffImage.extent;
var imageSource = new ol.source.ImageStatic({
url: this.tiffImage.imageUrl,
imageExtent: this.extent,
projection: this.projection
});
// this.createImageLayer(opt,this.tiffImage);
this.projection = new ol.proj.Projection({
code: 'EPSG:4326',
units: 'pixels',
extent: this.extent,
});
if (this.map.getLayers()) {
this.map.removeLayer(this.imageLayer);
}
this.imageLayer = new ol.layer.Image({
source: imageSource
});
this.map.addLayer(this.imageLayer);
this.subcribeToMapEvent('postcompose').subscribe(function (event) {
});
}
// console.log('image url'+this.tiffImage.imageUrl);
// this.subcribeToMapEvent<{}>('postrender').subscribe((event: any) => {
// let layer = this.map.getLayers();
// if (layer.getLength() > 0) {
// layer.forEach((l:ol.layer.Image) => {
// this.map.removeLayer(l);
// });
// this.imageLayer.setSource(imageSource);
// } else {
// this.imageLayer = new ol.layer.Image({
// source: imageSource
// });
// }
// this.map.addLayer(this.imageLayer);
// });
}
}; // End onChange
ExtendzOpenlayerService.prototype.createImageLayer = function (options, tiffImage) {
this.preSetTool();
this.extent = tiffImage.extent;
this.projection = new ol.proj.Projection({
code: 'EPSG:4326',
units: 'pixels',
extent: this.extent,
});
this.imageLayer = new ol.layer.Image({
source: new ol.source.ImageStatic({
projection: this.projection, imageExtent: this.extent, url: tiffImage.imageUrl
})
});
this.interactions.push(this.mouseWheelZoomInteraction);
this.interactions.push(this.dragPanInteraction);
this.map = new ol.Map({
interactions: this.interactions,
target: 'openlayer',
layers: [this.imageLayer],
renderer: 'canvas',
controls: [],
view: new ol.View({
projection: this.projection,
center: ol.extent.getCenter(this.extent),
zoom: 2,
maxZoom: 8
})
});
this.subcribeToMapEvent('postcompose').subscribe(function (event) { });
// return this.map;
}; // createImageLayer()
/**
* @method setTool
* @author Rumes
* @param tool
* @param color
* @param toolTypemarc antoni gretest hits
* @description manage the tool type
*/
ExtendzOpenlayerService.prototype.setTool = function (tool, toolType, color) {
this.preSetTool();
switch (tool) {
case OpenLayerToolType.POINT:
this.drawType = OpenLayerToolType.POINT;
this.updatePointTool(toolType, color);
if (this.pointFeaturs) {
this.addExistingFeaturs(this.pointFeaturs);
}
if (this.polygonFeaturs) {
this.polygonFeaturs = [];
}
break;
case OpenLayerToolType.POLYGON:
this.drawType = OpenLayerToolType.POLYGON;
this.updatePolygonTool(toolType, color);
if (this.polygonFeaturs) {
this.addExistingFeaturs(this.polygonFeaturs);
}
if (this.pointFeaturs) {
this.pointFeaturs = [];
}
break;
}
}; // End setTool()
/**
*
* @param tool
* @param toolType
* @param points
* @param color
* @author Rumes
* @description manage existin coordinates according to Draw Type
*/
ExtendzOpenlayerService.prototype.setToolExist = function (tool, toolType, points, color) {
this.preSetTool();
switch (tool) {
case OpenLayerToolType.POINT:
this.drawType = OpenLayerToolType.POINT;
this.updatePointToolFromExist(toolType, points, color);
break;
case OpenLayerToolType.POLYGON:
this.drawType = OpenLayerToolType.POLYGON;
this.updatePolygonToolFromExist(toolType, points, color);
break;
}
};
ExtendzOpenlayerService.prototype.subcribeToMapEvent = function (eventName) {
var _this = this;
return Observable.create(function (observer) {
_this.map.once(eventName, function (arg) { _this.zone.run(function () { return observer.next(arg); }); });
});
}; // End subcribeToPolygonEvent ()
/**
* Before changing the tool clean up the old one.
*/
ExtendzOpenlayerService.prototype.preSetTool = function () {
if (this.currentDraw) {
this.map.removeInteraction(this.currentDraw);
}
if (this.selectionInteraction) {
this.map.removeInteraction(this.selectionInteraction);
}
if (this.currentFeatures) {
this.currentFeatures.clear();
}
if (this.vectorSource) {
this.vectorSource.clear();
}
if (this.returnCollection) {
this.returnCollection = [];
}
}; // End preSetTool
/**
* @method updatePointTool
* @author Rumes
* @param toolType
* @param color
* @description get the point tool type and according to them
* customize POINT interaction & assing to current Draw
*/
ExtendzOpenlayerService.prototype.updatePointTool = function (toolType, color) {
var pointTool = new PointTool();
this.pointObject = pointTool.creatNewDraw(color);
this.currentDraw = this.pointObject.draw;
this.vectorSource = this.pointObject.source;
this.vectorLayer = pointTool.vector;
this.createPoints(toolType);
this.haveFeature = true;
this.map.addInteraction(this.currentDraw);
this.map.addLayer(this.vectorLayer);
};
/**
* @method updatePoygonTool
* @author Rumes
* @param toolType
* @param color
* @description get the polygon tool type and according to them
* customize POLYGON interaction & assing to current Draw
*/
ExtendzOpenlayerService.prototype.updatePolygonTool = function (toolType, color) {
var polygonTool = new PolygonTool();
this.polygonObject = polygonTool.createNewDraw(color);
this.postSetTool(toolType);
}; // End updatePoygonTool()
ExtendzOpenlayerService.prototype.postSetTool = function (toolType) {
if (this.polygonObject) {
this.currentDraw = this.polygonObject.draw;
this.map.addInteraction(this.currentDraw);
}
this.vectorSource = new ol.source.Vector({ features: this.currentFeatures });
this.vectorLayer = new ol.layer.Vector({ source: this.vectorSource });
this.map.addLayer(this.vectorLayer);
this.createPolygon(toolType);
};
/**
* @author Rumes
* @description create polygon using draw interaction
*/
ExtendzOpenlayerService.prototype.createPolygon = function (toolType) {
var _this = this;
this.subcribeToCurrentDrawEvent('drawstart').subscribe(function (event) {
_this.shapeDrawStartTime = new Date();
_this.drawStarted = true;
});
this.subcribeToSourceEvent('addfeature').subscribe(function (event) {
event.feature.setProperties({
toolType: toolType
});
_this.shapeDrawEndTime = new Date();
var duration = _this.shapeDrawEndTime.getSeconds() - _this.shapeDrawStartTime.getSeconds();
var geom = event.feature;
var cordinates;
var latlngArray;
_this.returnCoordinate = _this.getCoordinatsFromGeometry(geom, toolType, duration);
if (_this.returnCoordinate.coordiantes.length <= 3) {
console.log('Area not selected', null, {
duration: 2000
});
return;
}
_this.onDraw.emit(_this.returnCoordinate);
var feature = new ol.Feature(geom.getGeometry());
feature.setProperties({
toolType: toolType
});
feature.setStyle(_this.polygonObject.style);
_this.polygonFeaturs.push(feature);
_this.vectorSource.addFeature(feature);
_this.haveFeature = true;
});
};
/**
* @author Rumes
* @author Randika Hapugoda
* @description create point using draw interaction
*/
ExtendzOpenlayerService.prototype.createPoints = function (toolType) {
var _this = this;
this.subcribeToCurrentDrawEvent('drawstart').subscribe(function (event) {
event.feature.setProperties({
toolType: toolType
});
var geom = event.feature.getGeometry();
_this.drawStarted = true;
}); // createPoints()
this.subcribeToCurrentDrawEvent('drawend').subscribe(function (event) {
event.feature.setProperties({
toolType: toolType
});
var geom = event.feature;
geom.setStyle(_this.pointObject.style);
_this.pointFeaturs.push(geom);
_this.returnCoordinate = _this.getCoordinatsFromGeometry(geom, toolType);
_this.returnCollection.push(_this.returnCoordinate);
_this.onDraw.emit(_this.returnCoordinate);
_this.drawStarted = false;
});
};
ExtendzOpenlayerService.prototype.finishDraw = function () {
this.currentDraw.finishDrawing();
}; // End finishDraw()
ExtendzOpenlayerService.prototype.undo = function () {
if (this.currentDraw) {
this.currentDraw.removeLastPoint();
}
}; // end undo()
/**
*
* @param toolType
* @param points
* @author Rumes
* @description manage existing points according to Point Tool Type
*
*/
ExtendzOpenlayerService.prototype.updatePointToolFromExist = function (toolType, points, color) {
var pointTool = new PointTool();
console.log(color);
this.pointObject = pointTool.creatNewDraw(color);
this.createFeatureVector(points, 'point', this.pointObject.style);
this.map.addLayer(this.vectorLayer);
};
/**
*
* @param toolType
* @param points
* @author Rumes
* @description manage existing polygon according to Polygon Tool Type
*
*/
ExtendzOpenlayerService.prototype.updatePolygonToolFromExist = function (toolType, points, color) {
var polygonTool = new PolygonTool();
console.log(color);
this.polygonObject = polygonTool.createNewDraw(color);
this.currentFeatures = this.consantrationFeatures;
this.currentDraw = this.polygonObject.draw;
this.createFeatureVector(points, 'polygon', this.polygonObject.style);
this.map.addLayer(this.vectorLayer);
};
/**
*
* @param points
* @param type
* @param style
* @author Rumes
* @description create vector using existing lat lang coordinates
*/
ExtendzOpenlayerService.prototype.createFeatureVector = function (points, type, style) {
var _this = this;
this.latLangtoCoordinate(points);
this.featurs = [];
if (this.coordinats) {
if (type == 'point') {
this.coordinats.forEach(function (element) {
_this.feature = new ol.Feature({
geometry: new ol.geom.Point(element)
});
_this.featurs.push(_this.feature);
});
}
else if (type == 'polygon') {
this.feature = new ol.Feature({
geometry: new ol.geom.Polygon([this.coordinats])
});
this.featurs.push(this.feature);
}
this.vectorSource = new ol.source.Vector({
features: this.featurs
});
this.vectorLayer = new ol.layer.Vector({
source: this.vectorSource,
style: style
});
}
else {
this.vectorLayer = null;
}
};
/**
*
* @param points
* @author Rumes
* @description Convert LatLang Array in to cordinates array
*/
ExtendzOpenlayerService.prototype.latLangtoCoordinate = function (points) {
var _this = this;
if (points.length > 0) {
points.forEach(function (element) {
_this.singleCoordinats = null;
_this.singleCoordinats = [element.lat, element.lng];
_this.coordinats.push(_this.singleCoordinats);
});
}
else {
this.coordinats = null;
}
};
ExtendzOpenlayerService.prototype.toogleSelectMode = function () {
var _this = this;
var active = this.currentDraw.getActive();
if (active) {
this.map.removeInteraction(this.currentDraw);
this.selectionInteraction = new ol.interaction.Select({});
this.subcribeToSelectEvent('select').subscribe(function (e) {
if (e.selected.length > 0) {
var featureId = e.selected[0];
_this.deleteFeature(featureId);
// this.polygonObject.source.removeFeature(this.polygonObject.source.getFeatureById());
_this.removedFeatureStyle = e.selected[0].getStyle();
e.selected[0].setStyle(null);
}
});
this.map.addInteraction(this.selectionInteraction);
}
else {
this.map.removeInteraction(this.selectionInteraction);
this.map.addInteraction(this.currentDraw);
}
}; // End toogleSelectMode()
/**
*
* @param feature
* @author Rumes
* @description Remove the passed Feature from the Vector Source
*/
ExtendzOpenlayerService.prototype.deleteFeature = function (feature) {
this.vectorSource.removeFeature(feature);
this.removedFeature = feature;
this.returnCoordinate = this.getCoordinatsFromGeometry(this.removedFeature);
this.checkInFeaturesArray(this.removedFeature);
this.onDelete.emit(this.returnCoordinate);
this.featureDeleted = true;
};
/**
* Subscribe to draw current draw event.
*
* @author Randika Hapugoda
* @param eventName
*/
ExtendzOpenlayerService.prototype.subcribeToCurrentDrawEvent = function (eventName) {
var _this = this;
return Observable.create(function (observer) {
_this.currentDraw.on(eventName, function (arg) {
_this.zone.run(function () { return observer.next(arg); });
});
});
}; // subcribeToCurrentDrawEvent()
ExtendzOpenlayerService.prototype.subcribeToSourceEvent = function (eventName) {
var _this = this;
return Observable.create(function (observer) {
_this.polygonObject.source.on(eventName, function (arg) {
_this.zone.run(function () { return observer.next(arg); });
});
});
}; // subcribeToSourceEvent ()
ExtendzOpenlayerService.prototype.subcribeToViewPortEvent = function (eventName) {
var _this = this;
return Observable.create(function (observer) {
_this.map.getViewport().addEventListener(eventName, function (evt) {
// Prevent contect menu
event.preventDefault();
_this.finishDraw();
// let originalEvent: any = event.originalEvent;
});
});
}; // subcribeToViewPortEvent ()
ExtendzOpenlayerService.prototype.subcribeToSelectEvent = function (eventName) {
var _this = this;
return Observable.create(function (observer) {
_this.selectionInteraction.on(eventName, function (arg) {
_this.zone.run(function () { return observer.next(arg); });
});
});
}; // subcribeToSelectEvent()
/**
* @author Rumes
* @description Reset last deleted feature
*/
ExtendzOpenlayerService.prototype.undoDelete = function () {
this.map.removeInteraction(this.selectionInteraction);
this.removedFeature.setStyle(this.removedFeatureStyle);
this.vectorSource.addFeature(this.removedFeature);
var geom = this.removedFeature;
this.returnCoordinate = this.getCoordinatsFromGeometry(geom);
this.onDraw.emit(this.returnCoordinate);
this.featureDeleted = false;
};
/**
*
* @param cordinates
* @returns Array of LatLng objects
* @author Rumes
* @description get array of cordinates and convert to Array of LatLng Objects
*/
ExtendzOpenlayerService.prototype.coordinatsToLatLng = function (cordinates) {
var returnLatlng = Array();
cordinates.forEach(function (element) {
returnLatlng.push({
lat: element[0],
lng: element[1]
});
});
return returnLatlng;
};
/**
*
* @param geom
* @param drawTool
* @author Rumes
* @description get the feature geomatry and return ReturnObject
*/
ExtendzOpenlayerService.prototype.getCoordinatsFromGeometry = function (removedFeature, drawTool, duration) {
var geom = removedFeature.getGeometry();
var cordinates;
var cordinate;
var latlngArray;
var drawToolIn = removedFeature.getProperties().toolType
? removedFeature.getProperties().toolType
: '';
console.log(drawToolIn);
if (geom instanceof ol.geom.Point) {
cordinate = geom.getCoordinates();
this.returnCoordinate = {
jobId: this.jobID,
coordiantes: [
{
lat: cordinate[0],
lng: cordinate[1]
}
],
drawType: 'POINT',
drawTool: drawToolIn,
duration: 1
};
}
if (geom instanceof ol.geom.Polygon) {
cordinates = geom.getCoordinates();
latlngArray = [];
latlngArray = this.coordinatsToLatLng(cordinates[0]);
this.returnCoordinate = {
jobId: this.jobID,
coordiantes: latlngArray,
drawType: 'POLYGON',
drawTool: drawToolIn,
duration: duration
};
this.returnCollection.push();
}
return this.returnCoordinate;
};
ExtendzOpenlayerService.prototype.addExistingFeaturs = function (features) {
var _this = this;
if (features) {
features.forEach(function (element) {
console.log(element.getStyle());
_this.vectorSource.addFeature(element);
});
}
};
ExtendzOpenlayerService.prototype.checkInFeaturesArray = function (feature) {
if (this.drawType == OpenLayerToolType.POINT) {
this.pointFeaturs = this.pointFeaturs.filter(function (x) { return x.getGeometry() != feature.getGeometry(); });
}
if (this.drawType == OpenLayerToolType.POLYGON) {
console.log(feature);
this.polygonFeaturs = this.polygonFeaturs.filter(function (x) { return x.getGeometry() != feature.getGeometry(); });
console.log(this.polygonFeaturs);
}
};
ExtendzOpenlayerService = tslib_1.__decorate([
Injectable(),
tslib_1.__metadata("design:paramtypes", [NgZone])
], ExtendzOpenlayerService);
return ExtendzOpenlayerService;
}());
export { ExtendzOpenlayerService };
//# sourceMappingURL=extendz-openlayer.service.js.map