简柏林 / thingskit · Commits

Commit 6a54e2ff1eb69c7333038bd2b66dda64505bc3e9

Authored by DudnikMaksym
Committed by Igor Kulikov
1 parent 03631c83

New fixed center func for maps (#1910) 

* maps widget bundle changes (trip_animation configs)

* UI
Added fixed map center settings for (openstreet, google, tencent) maps

* UI
open street center minor fix

* fix

* UI
fixed commit

* UI
fixed commit

* Delete leaflet-geometryutil.js

* Delete Leaflet.MultiOptionsPolyline.js
Inline Side-by-side
Showing 4 changed files with 82 additions and 51 deletions
... ... @@ -19,7 +19,7 @@ var gmGlobals = {
19 19 }
20 20
21 21 export default class TbGoogleMap {
22   - constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, disableScrollZooming, minZoomLevel, gmApiKey, gmDefaultMapType) {
  22 + constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, disableScrollZooming, minZoomLevel, gmApiKey, gmDefaultMapType, defaultCenterPosition) {
23 23
24 24 var tbMap = this;
25 25 this.utils = utils;
... ... @@ -28,6 +28,7 @@ export default class TbGoogleMap {
28 28 this.minZoomLevel = minZoomLevel;
29 29 this.tooltips = [];
30 30 this.defaultMapType = gmDefaultMapType;
  31 + this.defaultCenterPosition = defaultCenterPosition;
31 32
32 33 function clearGlobalId() {
33 34 if (gmGlobals.loadingGmId && gmGlobals.loadingGmId === tbMap.mapId) {
... ... @@ -42,13 +43,12 @@ export default class TbGoogleMap {
42 43 }
43 44
44 45 function initGoogleMap() {
45   -
46 46 tbMap.map = new google.maps.Map($containerElement[0], { // eslint-disable-line no-undef
47 47 scrollwheel: !disableScrollZooming,
48 48 mapTypeId: getGoogleMapTypeId(tbMap.defaultMapType),
49   - zoom: tbMap.defaultZoomLevel || 8
  49 + zoom: tbMap.defaultZoomLevel || 8,
  50 + center: new google.maps.LatLng(tbMap.defaultCenterPosition[0], tbMap.defaultCenterPosition[1]) // eslint-disable-line no-undef
50 51 });
51   -
52 52 if (initCallback) {
53 53 initCallback();
54 54 }
... ...
... ... @@ -53,6 +53,12 @@ export default class TbMapWidgetV2 {
53 53 }
54 54 }
55 55
  56 + if (angular.isUndefined(settings.defaultCenterPosition)) {
  57 + settings.defaultCenterPosition = [0,0];
  58 + } else if (angular.isString(settings.defaultCenterPosition)) {
  59 + settings.defaultCenterPosition = settings.defaultCenterPosition.split(',').map(x => +x);
  60 + }
  61 +
56 62 this.dontFitMapBounds = settings.fitMapBounds === false;
57 63
58 64 if (!useDynamicLocations) {
... ... @@ -78,9 +84,9 @@ export default class TbMapWidgetV2 {
78 84 tbMap.tooltipActionsMap[descriptor.name] = descriptor;
79 85 });
80 86
81   - let openStreetMapProvider = {};
  87 + let openStreetMapProvider = {};
82 88 if (mapProvider === 'google-map') {
83   - this.map = new TbGoogleMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, settings.disableScrollZooming, minZoomLevel, settings.gmApiKey, settings.gmDefaultMapType);
  89 + this.map = new TbGoogleMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, settings.disableScrollZooming, minZoomLevel, settings.gmApiKey, settings.gmDefaultMapType, settings.defaultCenterPosition);
84 90 } else if (mapProvider === 'openstreet-map') {
85 91 if (settings.useCustomProvider && settings.customProviderTileUrl) {
86 92 openStreetMapProvider.name = settings.customProviderTileUrl;
... ... @@ -88,19 +94,20 @@ export default class TbMapWidgetV2 {
88 94 } else {
89 95 openStreetMapProvider.name = settings.mapProvider;
90 96 }
91   - this.map = new TbOpenStreetMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, settings.disableScrollZooming, minZoomLevel, openStreetMapProvider);
  97 + this.map = new TbOpenStreetMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, settings.disableScrollZooming, minZoomLevel, openStreetMapProvider, null,settings.defaultCenterPosition);
92 98 } else if (mapProvider === 'here') {
93 99 openStreetMapProvider.name = settings.mapProvider;
94   - this.map = new TbOpenStreetMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, settings.disableScrollZooming, minZoomLevel, openStreetMapProvider, settings.credentials);
  100 + this.map = new TbOpenStreetMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, settings.disableScrollZooming, minZoomLevel, openStreetMapProvider, settings.credentials, settings.defaultCenterPosition);
95 101 } else if (mapProvider === 'image-map') {
96 102 this.map = new TbImageMap(this.ctx, $element, this.utils, initCallback,
97 103 settings.mapImageUrl,
98 104 settings.disableScrollZooming,
99 105 settings.posFunction,
100 106 settings.imageEntityAlias,
101   - settings.imageUrlAttribute);
  107 + settings.imageUrlAttribute,
  108 + settings.useDefaultCenterPosition ? settings.defaultCenterPosition: null);
102 109 } else if (mapProvider === 'tencent-map') {
103   - this.map = new TbTencentMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, settings.disableScrollZooming, minZoomLevel, settings.tmApiKey, settings.tmDefaultMapType);
  110 + this.map = new TbTencentMap($element, this.utils, initCallback, this.defaultZoomLevel, this.dontFitMapBounds, settings.disableScrollZooming, minZoomLevel, settings.tmApiKey, settings.tmDefaultMapType, settings.defaultCenterPosition);
104 111 }
105 112
106 113
... ... @@ -156,7 +163,8 @@ export default class TbMapWidgetV2 {
156 163
157 164 this.locationSettings.showLabel = this.ctx.settings.showLabel !== false;
158 165 this.locationSettings.displayTooltip = this.ctx.settings.showTooltip !== false;
159   - this.locationSettings.displayTooltipAction = this.ctx.settings.showTooltipAction && this.ctx.settings.showTooltipAction.length ? this.ctx.settings.showTooltipAction : "click";
  166 + this.locationSettings.useDefaultCenterPosition = this.ctx.settings.useDefaultCenterPosition === true;
  167 + this.locationSettings.displayTooltipAction = this.ctx.settings.showTooltipAction && this.ctx.settings.showTooltipAction.length ? this.ctx.settings.showTooltipAction : "click";
160 168 this.locationSettings.autocloseTooltip = this.ctx.settings.autocloseTooltip !== false;
161 169 this.locationSettings.showPolygon = this.ctx.settings.showPolygon === true;
162 170 this.locationSettings.labelColor = this.ctx.widgetConfig.color || '#000000';
... ... @@ -455,8 +463,8 @@ export default class TbMapWidgetV2 {
455 463 }
456 464
457 465 function createUpdatePolygon(location, dataMap) {
458   - if (location.settings.showPolygon && dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName] !== null) {
459   - let polygonLatLngsRaw = angular.fromJson(dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName]);
  466 + if (location.settings.showPolygon && dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName] !== null) {
  467 + let polygonLatLngsRaw = angular.fromJson(dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName]);
460 468 let polygonLatLngs = !polygonLatLngsRaw || mapPolygonArray(polygonLatLngsRaw);
461 469 if (!location.polygon && polygonLatLngs.length > 0) {
462 470 location.polygon = tbMap.map.createPolygon(polygonLatLngs, location.settings, location, function (event) {
... ... @@ -476,7 +484,7 @@ export default class TbMapWidgetV2 {
476 484 }
477 485
478 486 function loadLocations(data, datasources) {
479   - var bounds = tbMap.map.createBounds();
  487 + var bounds = tbMap.locationSettings.useDefaultCenterPosition ? tbMap.map.createBounds().extend(tbMap.map.map.getCenter()) : tbMap.map.createBounds();
480 488 tbMap.locations = [];
481 489 var dataMap = toLabelValueMap(data, datasources);
482 490 var currentDatasource = null;
... ... @@ -521,12 +529,13 @@ export default class TbMapWidgetV2 {
521 529 }
522 530 tbMap.locations.push(location);
523 531 updateLocation(location, data, dataMap);
524   -
525   - if (location.polyline) {
526   - tbMap.map.extendBounds(bounds, location.polyline);
527   - } else if (location.marker) {
528   - tbMap.map.extendBoundsWithMarker(bounds, location.marker);
529   - }
  532 + if (!tbMap.locationSettings.useDefaultCenterPosition) {
  533 + if (location.polyline) {
  534 + tbMap.map.extendBounds(bounds, location.polyline);
  535 + } else if (location.marker) {
  536 + tbMap.map.extendBoundsWithMarker(bounds, location.marker);
  537 + }
  538 + }
530 539 latIndex = -1;
531 540 lngIndex = -1;
532 541 }
... ... @@ -548,7 +557,9 @@ export default class TbMapWidgetV2 {
548 557 });
549 558 tbMap.locations.push(location);
550 559 createUpdatePolygon(location, dataMap);
551   - tbMap.map.extendBounds(bounds, location.polygon);
  560 + if (!tbMap.locationSettings.useDefaultCenterPosition) {
  561 + tbMap.map.extendBounds(bounds, location.polygon);
  562 + }
552 563 }
553 564 });
554 565
... ... @@ -576,19 +587,21 @@ export default class TbMapWidgetV2 {
576 587
577 588 function updateLocations(data, datasources) {
578 589 var locationsChanged = false;
579   - var bounds = tbMap.map.createBounds();
  590 + var bounds = tbMap.locationSettings.useDefaultCenterPosition ? tbMap.map.createBounds().extend(tbMap.map.map.getCenter()) : tbMap.map.createBounds();
580 591 var dataMap = toLabelValueMap(data, datasources);
581 592 for (var p = 0; p < tbMap.locations.length; p++) {
582 593 var location = tbMap.locations[p];
583 594 locationsChanged |= updateLocation(location, data, dataMap);
584   - createUpdatePolygon(location, dataMap);
585   - if (location.polyline) {
586   - tbMap.map.extendBounds(bounds, location.polyline);
587   - } else if (location.marker) {
588   - tbMap.map.extendBoundsWithMarker(bounds, location.marker);
589   - } else if (location.polygon) {
590   - tbMap.map.extendBounds(bounds, location.polygon);
591   - }
  595 + createUpdatePolygon(location, dataMap);
  596 + if (!tbMap.locationSettings.useDefaultCenterPosition) {
  597 + if (location.polyline) {
  598 + tbMap.map.extendBounds(bounds, location.polyline);
  599 + } else if (location.marker) {
  600 + tbMap.map.extendBoundsWithMarker(bounds, location.marker);
  601 + } else if (location.polygon) {
  602 + tbMap.map.extendBounds(bounds, location.polygon);
  603 + }
  604 + }
592 605 }
593 606 if (locationsChanged && tbMap.initBounds) {
594 607 let dataReceived = datasources.every(
... ... @@ -626,7 +639,8 @@ export default class TbMapWidgetV2 {
626 639 if (this.subscription.data) {
627 640 if (!this.locations) {
628 641 loadLocations(this.subscription.data, this.subscription.datasources);
629   - } else {
  642 +
  643 + } else {
630 644 updateLocations(this.subscription.data, this.subscription.datasources);
631 645 }
632 646 var tooltips = this.map.getTooltips();
... ... @@ -644,22 +658,24 @@ export default class TbMapWidgetV2 {
644 658 let map = this.map;
645 659 if (this.locations && this.locations.length > 0) {
646 660 map.invalidateSize();
647   - var bounds = map.createBounds();
648   - if (this.markers && this.markers.length>0) {
649   - this.markers.forEach(function (marker) {
650   - map.extendBoundsWithMarker(bounds, marker);
651   - });
652   - }
653   - if (this.polylines && this.polylines.length>0) {
654   - this.polylines.forEach(function (polyline) {
655   - map.extendBounds(bounds, polyline);
656   - })
657   - }
658   - if (this.polygons && this.polygons.length > 0) {
659   - this.polygons.forEach(function (polygon) {
660   - map.extendBounds(bounds, polygon);
661   - })
662   - }
  661 + var bounds = this.locationSettings.useDefaultCenterPosition ? map.createBounds().extend(map.map.getCenter()) : map.createBounds();
  662 + if (!this.locationSettings.useDefaultCenterPosition) {
  663 + if (this.markers && this.markers.length > 0) {
  664 + this.markers.forEach(function (marker) {
  665 + map.extendBoundsWithMarker(bounds, marker);
  666 + });
  667 + }
  668 + if (this.polylines && this.polylines.length > 0) {
  669 + this.polylines.forEach(function (polyline) {
  670 + map.extendBounds(bounds, polyline);
  671 + })
  672 + }
  673 + if (this.polygons && this.polygons.length > 0) {
  674 + this.polygons.forEach(function (polygon) {
  675 + map.extendBounds(bounds, polygon);
  676 + })
  677 + }
  678 + }
663 679 map.fitBounds(bounds);
664 680 }
665 681 }
... ... @@ -962,6 +978,16 @@ const commonMapSettingsSchema =
962 978 "title": "Default map zoom level (1 - 20)",
963 979 "type": "number"
964 980 },
  981 + "useDefaultCenterPosition": {
  982 + "title": "Use default map center position",
  983 + "type": "boolean",
  984 + "default": false
  985 + },
  986 + "defaultCenterPosition": {
  987 + "title": "Default map center position (0,0)",
  988 + "type": "string",
  989 + "default" : "0,0"
  990 + },
965 991 "fitMapBounds": {
966 992 "title": "Fit map bounds to cover all markers",
967 993 "type": "boolean",
... ... @@ -1116,6 +1142,8 @@ const commonMapSettingsSchema =
1116 1142 },
1117 1143 "form": [
1118 1144 "defaultZoomLevel",
  1145 + "useDefaultCenterPosition",
  1146 + "defaultCenterPosition",
1119 1147 "fitMapBounds",
1120 1148 "disableScrollZooming",
1121 1149 "latKeyName",
... ...
... ... @@ -19,7 +19,7 @@ import 'leaflet-providers';
19 19
20 20 export default class TbOpenStreetMap {
21 21
22   - constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, disableScrollZooming, minZoomLevel, mapProvider, credentials) {
  22 + constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, disableScrollZooming, minZoomLevel, mapProvider, credentials, defaultCenterPosition) {
23 23
24 24 this.utils = utils;
25 25 this.defaultZoomLevel = defaultZoomLevel;
... ... @@ -38,7 +38,8 @@ export default class TbOpenStreetMap {
38 38 credentials.app_code = credentials.app_code || "p6NPiITB3Vv0GMUFnkLOOg";
39 39 }
40 40
41   - this.map = L.map($containerElement[0]).setView([0, 0], this.defaultZoomLevel || 8);
  41 + defaultCenterPosition = defaultCenterPosition || [0,0];
  42 + this.map = L.map($containerElement[0]).setView(defaultCenterPosition, this.defaultZoomLevel || 8);
42 43
43 44 if (disableScrollZooming) {
44 45 this.map.scrollWheelZoom.disable();
... ...
... ... @@ -19,7 +19,7 @@ var tmGlobals = {
19 19 }
20 20
21 21 export default class TbTencentMap {
22   - constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, disableScrollZooming, minZoomLevel, tmApiKey, tmDefaultMapType) {
  22 + constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, disableScrollZooming, minZoomLevel, tmApiKey, tmDefaultMapType, defaultCenterPosition) {
23 23 var tbMap = this;
24 24 this.utils = utils;
25 25 this.defaultZoomLevel = defaultZoomLevel;
... ... @@ -27,6 +27,7 @@ export default class TbTencentMap {
27 27 this.minZoomLevel = minZoomLevel;
28 28 this.tooltips = [];
29 29 this.defaultMapType = tmDefaultMapType;
  30 + this.defaultCenterPosition =defaultCenterPosition;
30 31
31 32 function clearGlobalId() {
32 33 if (tmGlobals.loadingTmId && tmGlobals.loadingTmId === tbMap.mapId) {
... ... @@ -44,7 +45,8 @@ export default class TbTencentMap {
44 45 tbMap.map = new qq.maps.Map($containerElement[0], { // eslint-disable-line no-undef
45 46 scrollwheel: !disableScrollZooming,
46 47 mapTypeId: getTencentMapTypeId(tbMap.defaultMapType),
47   - zoom: tbMap.defaultZoomLevel || 8
  48 + zoom: tbMap.defaultZoomLevel || 8,
  49 + center: new qq.maps.LatLng(tbMap.defaultCenterPosition[0],tbMap.defaultCenterPosition[1]) // eslint-disable-line no-undef
48 50 });
49 51
50 52 if (initCallback) {
... ...