Commit 33bb874c authored by Pedro Eduardo Trujillo's avatar Pedro Eduardo Trujillo
Browse files

Adapta capas de mapa, replantea usos de instancia 

Cambia la manera en que se usaba la instancia del mapa desde las capas,
que entre otras cosas, causaba ciclos infinitos con el nuevo mezclado de
atributos en profundidad. En lugar de pasar como parámetro una instancia
de mapa hacia otros componentes, se usa el canal del mapa para
comunicarse con su instancia a través de mediator.

Implementa en el mapa un canal de petición de punto de capa
correspondiente a unas coordenadas, en lugar de usar métodos de leaflet
directamente desde varias partes de los componentes de capa.

Refactoriza aplicación de configuración por defecto en varias partes del
componente de mapa y capa de mapa.

Corrige problemas detectados en visor de tracking.
parent 008bf7e1

client-app/src/component/map/LeafletImpl.js

+35 −15
Original line number Diff line number Diff line
@@ -7,11 +7,11 @@ define([ 
	, 'leaflet'

	, 'put-selector'

	, 'src/redmicConfig'

	, "./_LeafletImplItfc"

	, './_LeafletWidgetsManagement'

	, "./_ListenContainers"

	, "./_OverlayLayersManagement"

	, "./Map"

	, "src/component/map/_LeafletImplItfc"

	, 'src/component/map/_LeafletWidgetsManagement'

	, "src/component/map/_ListenContainers"

	, "src/component/map/_OverlayLayersManagement"

	, "src/component/map/Map"

], function(

	declare

	, lang
@@ -28,24 +28,24 @@ define([ 
	, MapModule

) {



	const defaultConfig = {

		queryableClass: 'leaflet-queryable',

		omitContainerSizeCheck: false,

		_mapNodeValidSizeInterval: 100,

		_infoForAddedLayers: {}

	};



	return declare([MapModule, _LeafletImplItfc, _LeafletWidgetsManagement, _ListenContainers, _OverlayLayersManagement], {

		//	summary:

		//		Implementación de mapa Leaflet.

		//	description:

		//		Proporciona la fachada para trabajar con Leaflet.



		postMixInProperties: function() {



		constructor: function(args) {



			this.config = {

				queryableClass: "leaflet-queryable",

				omitContainerSizeCheck: false,



				_mapNodeValidSizeInterval: 100,

				_infoForAddedLayers: {}

			};

			this._mergeOwnAttributes(defaultConfig);



			lang.mixin(this, this.config, args);

			this.inherited(arguments);

		},



		_initialize: function() {
@@ -369,6 +369,26 @@ define([ 
			if (nodeType && nodeType.toLowerCase() === 'img') {

				this._onOverlayLayerRemovedFromPane(node);

			}

		},



		getLatLng: function(lat, lng) {



			if (!lat || !lng) {

				return;

			}



			return new L.latLng(lat, lng);

		},



		getLayerPoint: function(lat, lng) {



			if (!lat || !lng || !this.map) {

				return;

			};



			const latLng = this.getLatLng(lat, lng);



			return this.map.latLngToLayerPoint(latLng);

		}

	});

});

client-app/src/component/map/Map.js

+109 −90
Original line number Diff line number Diff line 
define([

	"dojo/_base/declare"

	, "dojo/_base/lang"

	'dojo/_base/declare'

	, 'dojo/_base/lang'

	, 'src/component/base/_Module'

	, 'src/component/base/_Show'

	, 'src/component/map/_StaticLayersManagement'

	, 'src/component/map/_MapItfc'

	, 'uuid'

	, "src/component/base/_Module"

	, "src/component/base/_Show"

	, './_StaticLayersManagement'

	, "./_MapItfc"

], function(

	declare

	, lang

	, uuid

	, _Module

	, _Show

	, _StaticLayersManagement

	, _MapItfc

	, uuid

) {



	return declare([_Module, _MapItfc, _Show, _StaticLayersManagement], {

		//	summary:

		//		Módulo de cliente para visualización de mapas.

		//	description:

		//		Permite trabajar con un mapa para representar datos geográficos, en forma de capas superpuestas.





		constructor: function(args) {



			this.config = {

	const defaultConfig = {

		ownChannel: 'map',

		events: {

					LAYER_ADD: "layerAdd",

					LAYER_REMOVE: "layerRemove",

					LAYER_REMOVE_FAIL: "layerRemoveFail",

					BASE_LAYER_CHANGE: "baseLayerChange",

					BASE_LAYER_CHANGE_FAIL: "baseLayerChangeFail",

					PAN: "pan",

					MOVE_START: "moveStart",

					ZOOM_END: "zoomEnd",

					CLICK: "click",

					BBOX_CHANGE: "bBoxChange",

					POPUP_OPEN: "popupOpen",

					POPUP_CLOSE: "popupClose",

					ZOOM_START: "zoomStart",

					GOT_ZOOM: "gotZoom",

					LAYER_ADDED_FORWARDED: "layerAddedForwarded",

					LAYER_REMOVED_FORWARDED: "layerRemovedForwarded",

					LAYER_INFO_FORWARDED: "layerInfoForwarded",

					LAYER_QUERYING_FORWARDED: "layerQueryingForwarded",

					LAYER_ADDED_TO_PANE: "layerAddedToPane",

					LAYER_REMOVED_FROM_PANE: "layerRemovedFromPane"

			LAYER_ADD: 'layerAdd',

			LAYER_REMOVE: 'layerRemove',

			LAYER_REMOVE_FAIL: 'layerRemoveFail',

			BASE_LAYER_CHANGE: 'baseLayerChange',

			BASE_LAYER_CHANGE_FAIL: 'baseLayerChangeFail',

			PAN: 'pan',

			MOVE_START: 'moveStart',

			ZOOM_END: 'zoomEnd',

			CLICK: 'click',

			BBOX_CHANGE: 'bBoxChange',

			POPUP_OPEN: 'popupOpen',

			POPUP_CLOSE: 'popupClose',

			ZOOM_START: 'zoomStart',

			GOT_ZOOM: 'gotZoom',

			LAYER_ADDED_FORWARDED: 'layerAddedForwarded',

			LAYER_REMOVED_FORWARDED: 'layerRemovedForwarded',

			LAYER_INFO_FORWARDED: 'layerInfoForwarded',

			LAYER_QUERYING_FORWARDED: 'layerQueryingForwarded',

			LAYER_ADDED_TO_PANE: 'layerAddedToPane',

			LAYER_REMOVED_FROM_PANE: 'layerRemovedFromPane',

			GOT_LAYER_POINT: 'gotLayerPoint'

		},



		actions: {

					ADD_LAYER: "addLayer",

					REMOVE_LAYER: "removeLayer",

					CHANGE_BASE_LAYER: "changeBaseLayer",

					SET_CENTER: "setCenter",

					SET_ZOOM: "setZoom",

					GOT_ZOOM: "gotZoom",

					GET_ZOOM: "getZoom",

					SET_CENTER_AND_ZOOM: "setCenterAndZoom",

					FIT_BOUNDS: "fitBounds",

					LAYER_ADDED: "layerAdded",

					LAYER_REMOVED: "layerRemoved",

					BASE_LAYER_CHANGED: "baseLayerChanged",

					MOVE_START: "moveStart",

					CENTER_SET: "centerSet",

					ZOOM_SET: "zoomSet",

					BBOX_CHANGED: "bBoxChanged",

			ADD_LAYER: 'addLayer',

			REMOVE_LAYER: 'removeLayer',

			CHANGE_BASE_LAYER: 'changeBaseLayer',

			SET_CENTER: 'setCenter',

			SET_ZOOM: 'setZoom',

			GOT_ZOOM: 'gotZoom',

			GET_ZOOM: 'getZoom',

			SET_CENTER_AND_ZOOM: 'setCenterAndZoom',

			FIT_BOUNDS: 'fitBounds',

			LAYER_ADDED: 'layerAdded',

			LAYER_REMOVED: 'layerRemoved',

			BASE_LAYER_CHANGED: 'baseLayerChanged',

			MOVE_START: 'moveStart',

			CENTER_SET: 'centerSet',

			ZOOM_SET: 'zoomSet',

			BBOX_CHANGED: 'bBoxChanged',

			POPUP_OPENED: 'popupOpened',

					POPUP_CLOSED: "popupClosed",

					MAP_CLICKED: "mapClicked",

					CLOSE_POPUP: "closePopup",

					ADD_BUTTON: "addButton",

					LAYER_LOADING: "layerLoading",

					LAYER_LOADED: "layerLoaded",

					REORDER_LAYERS: "reorderLayers",

					ZOOM_START: "zoomStart",

					LAYER_INFO: "layerInfo",

					LAYER_INFO_FORWARDED: "layerInfoForwarded",

					LAYER_QUERYING: "layerQuerying",

					LAYER_QUERYING_FORWARDED: "layerQueryingForwarded",

					LAYER_ADDED_FORWARDED: "layerAddedForwarded",

					LAYER_ADDED_CONFIRMED: "layerAddedConfirmed",

					LAYER_REMOVED_FORWARDED: "layerRemovedForwarded",

					LAYER_REMOVED_CONFIRMED: "layerRemovedConfirmed",

					SET_QUERYABLE_CURSOR: "setQueryableCursor",

					MAP_SHOWN: "mapShown",

					MAP_HIDDEN: "mapHidden",

					CLEAR: 'clear'

				},



				ownChannel: "map",

			POPUP_CLOSED: 'popupClosed',

			MAP_CLICKED: 'mapClicked',

			CLOSE_POPUP: 'closePopup',

			ADD_BUTTON: 'addButton',

			LAYER_LOADING: 'layerLoading',

			LAYER_LOADED: 'layerLoaded',

			REORDER_LAYERS: 'reorderLayers',

			ZOOM_START: 'zoomStart',

			LAYER_INFO: 'layerInfo',

			LAYER_INFO_FORWARDED: 'layerInfoForwarded',

			LAYER_QUERYING: 'layerQuerying',

			LAYER_QUERYING_FORWARDED: 'layerQueryingForwarded',

			LAYER_ADDED_FORWARDED: 'layerAddedForwarded',

			LAYER_ADDED_CONFIRMED: 'layerAddedConfirmed',

			LAYER_REMOVED_FORWARDED: 'layerRemovedForwarded',

			LAYER_REMOVED_CONFIRMED: 'layerRemovedConfirmed',

			SET_QUERYABLE_CURSOR: 'setQueryableCursor',

			MAP_SHOWN: 'mapShown',

			MAP_HIDDEN: 'mapHidden',

			CLEAR: 'clear',

			GET_LAYER_POINT: 'getLayerPoint',

			GOT_LAYER_POINT: 'gotLayerPoint'

		},



		defaultCenter: [28.3, -16.0],

		defaultZoom: 7,
@@ -106,7 +98,17 @@ define([ 
		_lastAtlasLayerOrder: 0

	};



			lang.mixin(this, this.config, args);

	return declare([_Module, _MapItfc, _Show, _StaticLayersManagement], {

		//	summary:

		//		Módulo de cliente para visualización de mapas.

		//	description:

		//		Permite trabajar con un mapa para representar datos geográficos, en forma de capas superpuestas.



		postMixInProperties: function() {



			this._mergeOwnAttributes(defaultConfig);



			this.inherited(arguments);

		},



		_defineSubscriptions: function() {
@@ -168,6 +170,9 @@ define([ 
			},{

				channel : this.getChannel('CLEAR'),

				callback: '_subClear'

			},{

				channel : this.getChannel('GET_LAYER_POINT'),

				callback: '_subGetLayerPoint'

			});

		},
@@ -239,6 +244,9 @@ define([ 
			},{

				event: 'ME_OR_ANCESTOR_HIDDEN',

				channel: this.getChannel('MAP_HIDDEN')

			},{

				event: 'GOT_LAYER_POINT',

				channel: this.getChannel('GOT_LAYER_POINT')

			});

		},
@@ -871,6 +879,17 @@ define([ 
				success: true,

				instance: this._getMapInstance()

			};

		},



		_subGetLayerPoint: function(req) {



			if (!req?.lat || !req?.lng || !this.map) {

				return;

			}



			const layerPoint = this.getLayerPoint(req.lat, req.lng);



			this._emitEvt('GOT_LAYER_POINT', { layerPoint } );

		}

	});

});

client-app/src/component/map/_MapItfc.js

+2 −1
Original line number Diff line number Diff line
@@ -34,7 +34,8 @@ define([ 
				"addButton": {},

				"_addQueryableCursor": {},

				"_removeQueryableCursor": {},

				"_prepareInfoForLayerAddedEvent": {}

				"_prepareInfoForLayerAddedEvent": {},

				"getLayerPoint": {}

			});

		}

	});

client-app/src/component/map/layer/GridLayerImpl.js

+51 −33
Original line number Diff line number Diff line 
define([

	'd3'

	, "dojo/_base/declare"

	, "dojo/_base/lang"

	, "dojo/aspect"

	, 'dojo/_base/declare'

	, 'dojo/_base/lang'

	, 'dojo/aspect'

	, 'dojo/Deferred'

	, 'leaflet'

	, "src/util/Credentials"

	, "src/component/filter/Filter"

	, "./MapLayer"

	, 'src/component/filter/Filter'

	, 'src/component/map/layer/MapLayer'

	, 'src/util/Credentials'

], function(

	d3

	, declare

	, lang

	, aspect

	, Deferred

	, L

	, Credentials

	, Filter

	, MapLayer

	, Credentials

) {

	return declare(MapLayer, {

		//	summary:

		//		Implementación de capa de rejilla.



		constructor: function(args) {

	const defaultConfig = {

		ownChannel: 'gridLayer',



			this.config = {

		scale:{

					"grid5000": {zoom:8, factor:200},

					"grid1000": {zoom:11, factor:50},

					"grid500": {zoom:12, factor:25},

					"grid100": {zoom:14, factor:5}

			grid5000: {zoom:8, factor:200},

			grid1000: {zoom:11, factor:50},

			grid500: {zoom:12, factor:25},

			grid100: {zoom:14, factor:5}

		},

				currentGridLayer: "grid5000",

		currentGridLayer: 'grid5000',

		currentMode: 0,

				confidences: [1, 2, 3, 4],



				ownChannel: "gridLayer"

		confidences: [1, 2, 3, 4]

	};



			lang.mixin(this, this.config, args);

	return declare(MapLayer, {

		//	summary:

		//		Implementación de capa de rejilla.



		constructor: function() {



			aspect.before(this, "_initialize", lang.hitch(this, this._initializeGridLayerImpl));

			aspect.before(this, "_afterSetConfigurations", lang.hitch(this, this._setGridLayerConfigurations));

		},



		postMixInProperties: function() {



			this._mergeOwnAttributes(defaultConfig);



			this.inherited(arguments);

		},



		_setGridLayerConfigurations: function() {



			this.filterConfig = this._merge([{
@@ -93,11 +101,8 @@ define([ 
			this._globalG = this.svg.append("svg:g")

				.attr("class", "leaflet-zoom-hide");



			var transform = d3.geoTransform({

				point: lang.partial(function(self, x, y) {



					self._projectPoint(x, y, this.stream);

				}, this)

			const transform = d3.geoTransform({

				point: lang.partial(this._pointTransform, this)

			});



			this.path = d3.geoPath(transform);
@@ -124,11 +129,24 @@ define([ 
			this._redrawByZoom(geoJsonData, feature, text);

		},



		_projectPoint: function(x, y, stream) {

			// Use Leaflet to implement a D3 geometric transformation.

		_pointTransform: function(self, x, y) {

			// TODO unificar con mismo método presente en TrackingLayerImpl



			if (!self.mapChannel) {

				return;

			}



			const layerPointDfd = new Deferred();



			self._once(self._buildChannel(self.mapChannel, 'GOT_LAYER_POINT'),

				(res) => layerPointDfd.resolve(res?.layerPoint));



			self._publish(self._buildChannel(self.mapChannel, 'GET_LAYER_POINT'), {

				lat: y,

				lng: x

			});



			var point = this._mapInstance.latLngToLayerPoint(new L.LatLng(y, x));

			stream.point(point.x, point.y);

			layerPointDfd.then((layerPoint) => layerPoint && this.stream.point(layerPoint.x, layerPoint.y));

		},



		_getTextContent: function(d) {

client-app/src/component/map/layer/MapLayer.js

+58 −54
Original line number Diff line number Diff line 
define([

	"dojo/_base/declare"

	, "dojo/_base/lang"

	, "src/component/base/_Module"

	, "src/component/base/_Store"

	, "./_MapLayerItfc"

	'dojo/_base/declare'

	, 'src/component/base/_Module'

	, 'src/component/base/_Store'

	, 'src/component/map/layer/_MapLayerItfc'

], function(

	declare

	, lang

	, _Module

	, _Store

	, _MapLayerItfc

) {

	return declare([_Module, _MapLayerItfc, _Store], {

		//	summary:

		//		Módulo de capa para un mapa.

		//	description:

		//		Permite trabajar con una capa de mapa sobre el módulo Map.



		constructor: function(args) {



			this.config = {

	const defaultConfig = {

		target: null,

				idProperty: "id",

		idProperty: 'id',

		bounds: null,

		_mapInstance: null,

		_errorData: 0,

		ownChannel: 'mapLayer',

		events: {

					ADD_LAYER: "addLayer",

					LAYER_ADDED: "layerAdded",

					REMOVE_LAYER: "removeLayer",

					LAYER_REMOVED: "layerRemoved",

					CLICK: "click",

					PRE_CLICK: "preClick",

					MOUSE_OVER: "mouseOver",

					FIT_BOUNDS: "fitBounds",

					SET_CENTER: "setCenter",

					LAYER_LOADING: "layerLoading",

					LAYER_LOADED: "layerLoaded",

					LAYER_LEGEND: "layerLegend",

			ADD_LAYER: 'addLayer',

			LAYER_ADDED: 'layerAdded',

			REMOVE_LAYER: 'removeLayer',

			LAYER_REMOVED: 'layerRemoved',

			CLICK: 'click',

			PRE_CLICK: 'preClick',

			MOUSE_OVER: 'mouseOver',

			FIT_BOUNDS: 'fitBounds',

			SET_CENTER: 'setCenter',

			LAYER_LOADING: 'layerLoading',

			LAYER_LOADED: 'layerLoaded',

			LAYER_LEGEND: 'layerLegend',

			POPUP_LOADED: 'popupLoaded'

		},

		actions: {

					CLEAR: "clear",

					ADD_LAYER: "addLayer",

					REMOVE_LAYER: "removeLayer",

					ADD_DATA: "addData",

					POPUP_CLOSED: "popupClosed",

			CLEAR: 'clear',

			ADD_LAYER: 'addLayer',

			REMOVE_LAYER: 'removeLayer',

			ADD_DATA: 'addData',

			POPUP_CLOSED: 'popupClosed',

			POPUP_LOADED: 'popupLoaded',

					MAP_CLICKED: "mapClicked",

					LAYER_LOADING: "layerLoading",

					LAYER_LOADED: "layerLoaded",

					LAYER_LEGEND: "layerLegend",

					LAYER_ADDED: "layerAdded",

					LAYER_ADDED_FORWARDED: "layerAddedForwarded",

					LAYER_REMOVED: "layerRemoved",

					LAYER_REMOVED_FORWARDED: "layerRemovedForwarded",

					DELETE_INSTANCE: "deleteInstance",

					ANIMATE_MARKER: "animateMarker",

					FIT_BOUNDS: "fitBounds",

					SET_CENTER: "setCenter",

					MAP_SHOWN: "mapShown",

					MAP_HIDDEN: "mapHidden"

			MAP_CLICKED: 'mapClicked',

			LAYER_LOADING: 'layerLoading',

			LAYER_LOADED: 'layerLoaded',

			LAYER_LEGEND: 'layerLegend',

			LAYER_ADDED: 'layerAdded',

			LAYER_ADDED_FORWARDED: 'layerAddedForwarded',

			LAYER_REMOVED: 'layerRemoved',

			LAYER_REMOVED_FORWARDED: 'layerRemovedForwarded',

			DELETE_INSTANCE: 'deleteInstance',

			ANIMATE_MARKER: 'animateMarker',

			FIT_BOUNDS: 'fitBounds',

			SET_CENTER: 'setCenter',

			MAP_SHOWN: 'mapShown',

			MAP_HIDDEN: 'mapHidden',

			GET_LAYER_POINT: 'getLayerPoint',

			GOT_LAYER_POINT: 'gotLayerPoint'

		}

	};



			lang.mixin(this, this.config, args);

	return declare([_Module, _MapLayerItfc, _Store], {

		//	summary:

		//		Módulo de capa para un mapa.

		//	description:

		//		Permite trabajar con una capa de mapa sobre el módulo Map.



		postMixInProperties: function() {



			this._mergeOwnAttributes(defaultConfig);



			this.inherited(arguments);

		},



		_defineSubscriptions: function() {