sic-mapping-toolkit
Version:
SICMapping Toolkit es una biblioteca para Angular que permite la creación de aplicaciones de Web Mapping por medio de OpenLayers
524 lines (508 loc) • 16 kB
JavaScript
import { ɵɵdefineInjectable, Injectable, Component, Input, NgModule } from '@angular/core';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import cuid from 'cuid';
import { View, Map as Map$1 } from 'ol';
import TileLayer from 'ol/layer/Tile';
import TileWMS from 'ol/source/TileWMS';
import TileArcGISRest from 'ol/source/TileArcGISRest';
import ImageLayer from 'ol/layer/Image';
import ImageWMS from 'ol/source/ImageWMS';
var MapEventType;
(function (MapEventType) {
MapEventType["CHANGE"] = "change";
MapEventType["CHANGE_LAYERGROUP"] = "change:layerGroup";
MapEventType["CHANGE_SIZE"] = "change:size";
MapEventType["CHANGE_TARGET"] = "change:target";
MapEventType["CHANGE_VIEW"] = "change:view";
MapEventType["CLICK"] = "click";
MapEventType["DOUBLECLICK"] = "dblclick";
MapEventType["MOVEEND"] = "moveend";
MapEventType["POINTERDRAG"] = "pointerdrag";
MapEventType["POINTERMOVE"] = "pointermove";
MapEventType["POSTCOMPOSE"] = "postcompose";
MapEventType["POSTRENDER"] = "postrender";
MapEventType["PRECOMPOSE"] = "precompose";
MapEventType["PROPERTYCHANGE"] = "propertychange";
MapEventType["SINGLECLICK"] = "singleclick";
})(MapEventType || (MapEventType = {}));
const MapEvents = [
'change',
'change:layerGroup',
'change:size',
'change:target',
'change:view',
'click',
'dblclick',
'moveend',
'pointerdrag',
'pointermove',
'postcompose',
'postrender',
'precompose',
'propertychange',
'singleclick'
];
const HIGHLIGHT_ZINDEX = 1000;
const defaultOptions = {
hasHighlight: true,
hasSnap: false,
};
class SICMap {
constructor(map, options) {
this.map = map;
this.id = options.id || cuid();
this.layers = [];
this.eventHandlers = {};
MapEvents.forEach((x) => {
this.eventHandlers[x] = [];
});
this.map.on(MapEvents, (evt) => {
if (this.eventHandlers[evt.type]) {
const special = this.eventHandlers[evt.type].filter((x) => x.priority === "SPECIAL");
const high = this.eventHandlers[evt.type].filter((x) => x.priority === "HIGH");
const normal = this.eventHandlers[evt.type].filter((x) => x.priority === "NORMAL");
const low = this.eventHandlers[evt.type].filter((x) => x.priority === "LOW");
if (high.length > 0) {
[...high, ...special].forEach((x) => x.fn(evt));
}
else if (normal.length > 0) {
[...normal, ...special].forEach((x) => x.fn(evt));
}
else {
[...low, ...special].forEach((x) => x.fn(evt));
}
}
});
if (options.hasHighlight) {
this.highlightSource = new VectorSource({ wrapX: true });
const highlightLayer = new VectorLayer({
source: this.highlightSource,
zIndex: HIGHLIGHT_ZINDEX,
});
this.map.addLayer(highlightLayer);
}
}
static initMap(map, options = {}) {
return new SICMap(map, Object.assign(Object.assign({}, defaultOptions), options));
}
get Id() {
return this.id;
}
// Métodos para capas
setBaseLayer(layer) {
this.baseLayer = layer;
this.baseLayer.Layer.setZIndex(-1);
this.map.addLayer(layer.Layer);
return this.baseLayer.Id;
}
clearBaseLayer() {
if (!!this.baseLayer) {
this.map.removeLayer(this.baseLayer.Layer);
this.baseLayer = null;
}
}
addLayer(layer) {
this.layers.push(layer);
this.map.addLayer(layer.Layer);
return layer.Id;
}
removeLayer(id) {
const layer = this.layers.find((l) => l.Id === id);
if (!!layer) {
this.map.removeLayer(layer.Layer);
}
this.layers = this.layers.filter((l) => l.Id !== id);
}
// Métodos para popup en el mapa (ol overlays)
addOverlay(popupOverlay) {
this.map.addOverlay(popupOverlay);
}
removeOverlay(popupOverlay) {
this.map.removeOverlay(popupOverlay);
}
// Manejo de Eventos
addEventHandler(eventType, handler, priority = "NORMAL") {
if (!this.eventHandlers[eventType]) {
this.eventHandlers[eventType] = [];
}
const key = eventType + "." + cuid();
const eventHandler = {
key,
priority,
fn: handler,
};
this.eventHandlers[eventType].push(eventHandler);
return key;
}
removeEventHandler(id) {
const evtType = id.split(".")[0];
const idx = this.eventHandlers[evtType].reduce((a, b, i) => (b.key === id ? i : a), -1);
if (idx === -1) {
return;
}
this.eventHandlers[evtType] = [
...this.eventHandlers[evtType].slice(0, idx),
...this.eventHandlers[evtType].slice(idx + 1),
];
}
// Métodos para agregar interacciones
addInteraction(interaction) {
this.map.addInteraction(interaction);
}
removeInteraction(interaction) {
this.map.removeInteraction(interaction);
}
// Métodos para agregar MapControls
addControl(control) {
this.map.addControl(control);
}
removeControl(control) {
this.map.removeControl(control);
}
// Métodos de dibujo
drawFeatures(features, style) {
if (!!this.highlightSource) {
features.forEach((f) => {
f.setStyle(style);
this.highlightSource.addFeature(f);
});
}
else {
throw new Error("No highlight source available");
}
}
clearFeatures(featureIdPrefix) {
if (!this.highlightSource) {
throw new Error("No highlight source available");
}
if (featureIdPrefix) {
this.highlightSource
.getFeatures()
.filter((f) => f.getId().toString().startsWith(featureIdPrefix))
.forEach((f) => this.highlightSource.removeFeature(f));
}
else {
this.highlightSource.clear();
}
}
// Métodos de la vista
getViewExtent() {
return this.map.getView().calculateExtent(this.map.getSize());
}
getViewResolution() {
return this.map.getView().getResolution();
}
moveTo(extent, animated = true) {
this.map.getView().fit(extent, {
duration: animated ? 500 : 0,
});
}
getZoom() {
return this.map.getView().getZoom();
}
setZoom(zoom, animated = true) {
if (animated) {
this.map.getView().animate({ zoom, duration: 500 });
}
else {
this.map.getView().setZoom(zoom);
}
}
getCenter() {
return this.map.getView().getCenter();
}
setCenter(center, animated = true) {
if (animated) {
this.map.getView().animate({ center, duration: 500 });
}
else {
this.map.getView().setCenter(center);
}
}
detectSizeChange() {
this.map.updateSize();
}
}
class MapService {
constructor() {
this.mapas = new Map();
}
createMap(target, center = [0, 0], projection = 'EPSG:4326', id) {
const view = new View({
center: center,
zoom: 15,
projection: projection
});
const map = new Map$1({
target: target,
view: view,
layers: []
});
const mapa = SICMap.initMap(map, { id });
this.mapas.set(mapa.Id, mapa);
if (!this.default) {
this.default = mapa.Id;
}
return mapa;
}
setDefaultMapa(id) {
this.default = this.mapas.has(id) ? id : this.default;
}
getMapById(id) {
return this.getMapa(id);
}
setBaseLayer(glayer, mapaId) {
const mapa = this.getMapa(mapaId);
return mapa.setBaseLayer(glayer);
}
clearBaseLayer(mapaId) {
const mapa = this.getMapa(mapaId);
mapa.clearBaseLayer();
}
addLayer(glayer, mapaId) {
const mapa = this.getMapa(mapaId);
return mapa.addLayer(glayer);
}
removeLayer(idLayer, mapaId) {
const mapa = this.getMapa(mapaId);
mapa.removeLayer(idLayer);
}
addEventHandler(type, handler, priority, mapaId) {
const mapa = this.getMapa(mapaId);
return mapa.addEventHandler(type, handler, priority);
}
removeEventHandler(handlerId, mapaId) {
const mapa = this.getMapa(mapaId);
mapa.removeEventHandler(handlerId);
}
addOverlay(overlay, mapaId) {
const mapa = this.getMapa(mapaId);
mapa.addOverlay(overlay);
}
removeOverlay(overlay, mapaId) {
const mapa = this.getMapa(mapaId);
mapa.removeOverlay(overlay);
}
addInteraction(interaction, mapaId) {
const mapa = this.getMapa(mapaId);
mapa.addInteraction(interaction);
}
removeInteraction(interaction, mapaId) {
const mapa = this.getMapa(mapaId);
mapa.removeInteraction(interaction);
}
addControl(control, mapaId) {
const mapa = this.getMapa(mapaId);
mapa.addControl(control);
}
removeControl(control, mapaId) {
const mapa = this.getMapa(mapaId);
mapa.removeControl(control);
}
drawFeature(feature, style, mapaId) {
const mapa = this.getMapa(mapaId);
mapa.drawFeatures([feature], style);
}
clearDrawings(featureIdPrefix, mapaId) {
const mapa = this.getMapa(mapaId);
mapa.clearFeatures(featureIdPrefix);
}
// Utilidades
getMapa(mapaId) {
if (!mapaId) {
mapaId = this.default;
}
if (!this.mapas.has(mapaId)) {
throw new Error('No existe SICMap con el id proporcionado');
}
const mapa = this.mapas.get(mapaId);
if (!mapa) {
throw new Error('No se pudo recuperar el SICMap');
}
return mapa;
}
}
MapService.ɵprov = ɵɵdefineInjectable({ factory: function MapService_Factory() { return new MapService(); }, token: MapService, providedIn: "root" });
MapService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
MapService.ctorParameters = () => [];
class MapViewerComponent {
constructor(mapService) {
this.mapService = mapService;
this.mapId = `MapContainer.${cuid()}`;
this.center = [-103.34331, 20.673386];
this.projection = 'EPSG:4326';
this.zoom = 10;
}
ngAfterViewInit() {
this.map = this.mapService.createMap(this.mapId, this.center, this.projection, this.mapId);
this.map.setZoom(this.zoom);
}
ngOnInit() {
}
ngOnChanges(changes) {
if (changes.mapId.isFirstChange()) {
}
}
getMapId() {
return this.mapId;
}
}
MapViewerComponent.decorators = [
{ type: Component, args: [{
selector: 'sic-map-viewer',
template: "<div [id]=\"mapId\" class=\"map-container\"></div>\n",
styles: [":host{bottom:0;left:0;position:absolute;right:0;top:0}.map-container{height:100%;width:100%}"]
},] }
];
MapViewerComponent.ctorParameters = () => [
{ type: MapService }
];
MapViewerComponent.propDecorators = {
mapId: [{ type: Input, args: ['mapId',] }],
center: [{ type: Input }],
projection: [{ type: Input }],
zoom: [{ type: Input }]
};
class SicMappingToolkitModule {
}
SicMappingToolkitModule.decorators = [
{ type: NgModule, args: [{
declarations: [MapViewerComponent],
imports: [],
exports: [MapViewerComponent]
},] }
];
class FeatureFactory {
}
class SICLayer {
constructor(title, layer, legend) {
this.title = title;
this.layer = layer;
this.legend = legend;
}
get Id() { return this.id; }
get Title() { return this.title; }
get Layer() { return this.layer; }
get Legend() { return this.legend; }
setId(id) {
this.id = id;
}
setVisibility(on) {
this.layer.setVisible(on);
}
;
isVisible() {
return this.layer.getVisible();
}
;
toggleVisibility() {
const newVisibility = !this.isVisible();
this.setVisibility(newVisibility);
return newVisibility;
}
;
setOpacity(opacity) {
if (opacity < 0 || opacity > 1) {
throw new Error('Opacity must be a number between 0 and 1');
}
this.layer.setOpacity(opacity);
}
;
getOpacity() {
return this.layer.getOpacity();
}
;
}
class SICVectorLayer extends SICLayer {
}
class SICWmsLayer extends SICLayer {
}
class SICArcgisLayer extends SICLayer {
}
var LayerType;
(function (LayerType) {
LayerType[LayerType["WMS_LAYER"] = 0] = "WMS_LAYER";
LayerType[LayerType["VECTOR_LAYER"] = 1] = "VECTOR_LAYER";
LayerType[LayerType["ARGIS_REST_LAYER"] = 2] = "ARGIS_REST_LAYER";
})(LayerType || (LayerType = {}));
var WmsType;
(function (WmsType) {
WmsType[WmsType["IMAGE"] = 0] = "IMAGE";
WmsType[WmsType["TILE"] = 1] = "TILE";
})(WmsType || (WmsType = {}));
class LayerFactory {
static createLayer(type, title, options) {
if (type === LayerType.VECTOR_LAYER) {
return LayerFactory.createVectorLayer(title);
}
else if (type === LayerType.WMS_LAYER) {
return LayerFactory.createWmsLayer(title, options.wmsType, options.serverType, options.serverUrl, options.serviceName, options.legend);
}
else if (type === LayerType.ARGIS_REST_LAYER) {
return LayerFactory.createArgisLayer(title, options.serverUrl, options.legend, options.attribution);
}
else {
throw new Error('LayerType no soportado');
}
}
static createVectorLayer(title) {
const source = new VectorSource({ wrapX: true });
const layer = new VectorLayer({
source
});
return new SICVectorLayer(title, layer);
}
static createWmsLayer(title, wmsType, serverType, serverUrl, serviceName, legend, attribution) {
let SourceFunction;
let LayerFunction;
if (wmsType === WmsType.IMAGE) {
SourceFunction = ImageWMS;
LayerFunction = ImageLayer;
}
else if (wmsType === WmsType.TILE) {
SourceFunction = TileWMS;
LayerFunction = TileLayer;
}
else {
throw new Error('WmsType no soportado');
}
const source = new SourceFunction({
url: serverUrl,
serverType: serverType,
attributions: attribution,
params: {
'LAYERS': serviceName,
'tiled': serverType === 'geoserver' && wmsType === WmsType.TILE
}
});
const layer = new LayerFunction({
source: source
});
return new SICWmsLayer(title, layer, legend);
}
static createArgisLayer(title, serverUrl, legend, attribution) {
const source = new TileArcGISRest({
url: serverUrl,
attributions: attribution
});
const layer = new TileLayer({
source: source
});
return new SICArcgisLayer(title, layer, legend);
}
}
class StyleFactory {
}
/*
* Public API Surface of sic-mapping-toolkit
*/
/**
* Generated bundle index. Do not edit.
*/
export { FeatureFactory, LayerFactory, LayerType, MapEventType, MapService, MapViewerComponent, SICLayer, SICMap, SicMappingToolkitModule, StyleFactory, WmsType };
//# sourceMappingURL=sic-mapping-toolkit.js.map