Commit 3335d027 authored by Pedro Eduardo Trujillo's avatar Pedro Eduardo Trujillo
Browse files

Refactoriza uso de d3 en capas de mapa

parent 33bb874c

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

+5 −30
Original line number Diff line number Diff line
@@ -3,9 +3,9 @@ define([ 
	, 'dojo/_base/declare'

	, 'dojo/_base/lang'

	, 'dojo/aspect'

	, 'dojo/Deferred'

	, 'leaflet'

	, 'src/component/filter/Filter'

	, 'src/component/map/layer/_D3MapProjection'

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

	, 'src/util/Credentials'

], function(
@@ -13,9 +13,9 @@ define([ 
	, declare

	, lang

	, aspect

	, Deferred

	, L

	, Filter

	, _D3MapProjection

	, MapLayer

	, Credentials

) {
@@ -34,7 +34,7 @@ define([ 
		confidences: [1, 2, 3, 4]

	};



	return declare(MapLayer, {

	return declare([MapLayer, _D3MapProjection], {

		//	summary:

		//		Implementación de capa de rejilla.
@@ -95,17 +95,12 @@ define([ 


		addData: function(geoJsonData, moduleContext) {



			this.svg = d3.select(this._mapInstance.getPanes().overlayPane)

				.append("svg:svg");

			this.svg = this._getSvgElement();



			this._globalG = this.svg.append("svg:g")

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



			const transform = d3.geoTransform({

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

			});



			this.path = d3.geoPath(transform);

			this.path = this._getGeoPath();



			var featureG = this._globalG.selectAll("path")

				.data(geoJsonData.features)
@@ -129,26 +124,6 @@ define([ 
			this._redrawByZoom(geoJsonData, feature, text);

		},



		_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

			});



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

		},



		_getTextContent: function(d) {

			// Retorna el texto que se va a mostrar en la cuadrícula

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

+8 −35
Original line number Diff line number Diff line 
define([

	'd3'

	, 'dojo/_base/declare'

	'dojo/_base/declare'

	, 'dojo/_base/lang'

	, 'dojo/aspect'

	, 'dojo/Deferred'
@@ -9,11 +8,11 @@ define([ 
	, 'dojo/on'

	, 'dojo/promise/all'

	, 'src/component/map/layer/_D3Expansion'

	, 'src/component/map/layer/_D3MapProjection'

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

	, 'src/component/map/layer/TrackingLine'

], function(

	d3

	, declare

	declare

	, lang

	, aspect

	, Deferred
@@ -22,6 +21,7 @@ define([ 
	, on

	, all

	, _D3Expansion

	, _D3MapProjection

	, MapLayer

	, TrackingLine

) {
@@ -62,7 +62,7 @@ define([ 
		}

	};



	return declare([MapLayer, _D3Expansion], {

	return declare([MapLayer, _D3Expansion, _D3MapProjection], {

		//	summary:

		//		Implementación de capa para datos de tipo tracking.

		//	description:
@@ -79,8 +79,6 @@ define([ 


		constructor: function() {



			this._expandD3(d3);



			aspect.before(this, '_mixEventsAndActions', lang.hitch(this, this._mixTrackingLayerEventsAndActions));

			aspect.after(this, '_defineSubscriptions', lang.hitch(this, this._defineTrackingLayerSubscriptions));

		},
@@ -130,31 +128,7 @@ define([ 


		_initialize: function() {



			const transform = d3.geoTransform({

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

			});



			this._pathGenerator = d3.geoPath(transform);

		},



		_pointTransform: function(self, x, y) {

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



			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

			});



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

			this._pathGenerator = this._getGeoPath();

		},



		_getLatLng: function(lat, lng) {
@@ -174,9 +148,8 @@ define([ 


		_createElements: function() {



			this._svg = d3.select(this._mapInstance.getPanes().overlayPane)

				.append('svg:svg')

					.attr('class', this.svgClass);

			this._svg = this._getSvgElement();

			this._svg.attr('class', this.svgClass);



			this._createEventListeners();

		},

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

+7 −7
Original line number Diff line number Diff line 
define([

	'dojo/_base/declare'

	, 'dojo/_base/lang'

	'd3'

	, 'dojo/_base/declare'

], function(

	declare

	, lang

	d3

	, declare

){

	return declare(null, {

		//	summary:
@@ -12,12 +12,12 @@ define([ 
		//		Desde la capa en que se importe esta extensión, se debe llamar al método '_expandD3' pasándole la

		//		instancia de D3 que queremos ampliar.



		_expandD3: function(d3) {

		constructor: function() {



			this._expandD3SelectionMethods(d3);

			this._expandD3SelectionMethods();

		},



		_expandD3SelectionMethods: function(d3) {

		_expandD3SelectionMethods: function() {



			d3.selection.prototype.moveToFront = this._d3SelectionMoveToFront;

			d3.selection.prototype.moveUp = this._d3SelectionMoveUp;

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

0 → 100644
+51 −0
Original line number Diff line number Diff line 
define([

	'd3'

	, 'dojo/_base/declare'

	, 'dojo/_base/lang'

	, 'dojo/Deferred'

], function(

	d3

	, declare

	, lang

	, Deferred

) {



	return declare(null, {

		// summary:

		//   Lógica de transformación de gráficos vectoriales para su proyección geográfica, en base al componente

		//   de mapa.



		_getSvgElement: function() {



			return d3.select(this._mapInstance.getPanes().overlayPane).append('svg:svg');

		},



		_getGeoPath: function() {



			const transform = d3.geoTransform({

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

			});



			return d3.geoPath(transform);

		},



		_pointTransform: function(self, x, y) {



			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

			});



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

		}

	});

});