Commit 909b6d0f4c83c82e6602e8b354b63a0ee7b70b6d
Committed by
GitHub
Merge pull request #1461 from MrKartoshka/master
polygon update
Showing
15 changed files
with
167 additions
and
51 deletions
... | ... | @@ -1559,6 +1559,7 @@ |
1559 | 1559 | "widget-action": { |
1560 | 1560 | "action-cell-button": "Aktionszellenschaltfläche", |
1561 | 1561 | "row-click": "Klick auf Zeile", |
1562 | + "polygon-click": "Klick auf Polygon", | |
1562 | 1563 | "marker-click": "Klick auf Marker", |
1563 | 1564 | "tooltip-tag-action": "Tooltip-Tag-Aktion" |
1564 | 1565 | } | ... | ... |
... | ... | @@ -1564,6 +1564,7 @@ |
1564 | 1564 | "widget-action": { |
1565 | 1565 | "action-cell-button": "Action cell button", |
1566 | 1566 | "row-click": "On row click", |
1567 | + "polygon-click": "On polygon click", | |
1567 | 1568 | "marker-click": "On marker click", |
1568 | 1569 | "tooltip-tag-action": "Tooltip tag action" |
1569 | 1570 | } | ... | ... |
... | ... | @@ -1559,7 +1559,8 @@ |
1559 | 1559 | "widget-action": { |
1560 | 1560 | "action-cell-button": "Botón de acción de celda", |
1561 | 1561 | "row-click": "Clic en la fila", |
1562 | - "marker-click": "Clic en el marcador", | |
1562 | + "polygon-click": "Clic en la fila", | |
1563 | + "marker-click": "Clic en el polígono", | |
1563 | 1564 | "tooltip-tag-action": "Acción de etiqueta para globo de ayuda" |
1564 | 1565 | } |
1565 | 1566 | }, | ... | ... |
... | ... | @@ -1425,6 +1425,7 @@ |
1425 | 1425 | "widget-action": { |
1426 | 1426 | "action-cell-button": "Action cell button", |
1427 | 1427 | "row-click": "On row click", |
1428 | + "polygon-click": "On polygon click", | |
1428 | 1429 | "marker-click": "On marker click", |
1429 | 1430 | "tooltip-tag-action": "Tooltip tag action" |
1430 | 1431 | } | ... | ... |
... | ... | @@ -1318,6 +1318,7 @@ |
1318 | 1318 | "widget-action": { |
1319 | 1319 | "action-cell-button": "Action cell button", |
1320 | 1320 | "row-click": "On row click", |
1321 | + "polygon-click": "On polygon click", | |
1321 | 1322 | "marker-click": "On marker click", |
1322 | 1323 | "tooltip-tag-action": "Tooltip tag action" |
1323 | 1324 | } | ... | ... |
... | ... | @@ -1558,6 +1558,7 @@ |
1558 | 1558 | "action-cell-button": "Кнопка действия ячейки", |
1559 | 1559 | "row-click": "Действий при щелчке на строку", |
1560 | 1560 | "marker-click": "Действия при щелчке на указателе", |
1561 | + "polygon-click": "Действия при щелчке на полигон", | |
1561 | 1562 | "tooltip-tag-action": "Действие при подсказке" |
1562 | 1563 | } |
1563 | 1564 | }, | ... | ... |
... | ... | @@ -1524,7 +1524,8 @@ |
1524 | 1524 | "widget-action": { |
1525 | 1525 | "action-cell-button": "Eylem hücre butonu", |
1526 | 1526 | "row-click": "Satır tıklama eylemi", |
1527 | - "marker-click": "İşaretçi tıklama eylemi", | |
1527 | + "polygon-click": "Satır tıklama eylemi", | |
1528 | + "marker-click": "Çokgen tıklama eylemi", | |
1528 | 1529 | "tooltip-tag-action": "İpucu etiket eylemi" |
1529 | 1530 | } |
1530 | 1531 | }, | ... | ... |
... | ... | @@ -315,7 +315,7 @@ export default class TbGoogleMap { |
315 | 315 | } |
316 | 316 | |
317 | 317 | |
318 | - createPolygon(latLangs, settings) { | |
318 | + createPolygon(latLangs, settings, location, onClickListener, markerArgs) { | |
319 | 319 | let polygon = new google.maps.Polygon({ |
320 | 320 | map: this.map, |
321 | 321 | paths: latLangs, |
... | ... | @@ -325,6 +325,32 @@ export default class TbGoogleMap { |
325 | 325 | fillOpacity: settings.polygonOpacity, |
326 | 326 | strokeWeight: settings.polygonStrokeWeight |
327 | 327 | }); |
328 | + | |
329 | + //initialize-tooltip | |
330 | + | |
331 | + let popup = new google.maps.InfoWindow({ | |
332 | + content: '' | |
333 | + }); | |
334 | + if (!this.tooltips) this.tooltips = []; | |
335 | + this.tooltips.push({ | |
336 | + markerArgs: markerArgs, | |
337 | + popup: popup, | |
338 | + locationSettings: settings, | |
339 | + dsIndex: location.dsIndex | |
340 | + }); | |
341 | + | |
342 | + if (onClickListener) { | |
343 | + google.maps.event.addListener(polygon, 'click', function (event) { | |
344 | + if (settings.displayTooltip) { | |
345 | + if (!polygon.anchor) { | |
346 | + polygon.anchor = new google.maps.MVCObject(); | |
347 | + } | |
348 | + polygon.anchor.set("position", event.latLng); | |
349 | + popup.open(this.map, polygon.anchor); | |
350 | + } | |
351 | + onClickListener(); | |
352 | + }); | |
353 | + } | |
328 | 354 | return polygon; |
329 | 355 | } |
330 | 356 | /* eslint-disable no-undef */ | ... | ... |
... | ... | @@ -233,7 +233,6 @@ export default class TbMapWidgetV2 { |
233 | 233 | } |
234 | 234 | |
235 | 235 | update() { |
236 | - | |
237 | 236 | var tbMap = this; |
238 | 237 | |
239 | 238 | |
... | ... | @@ -381,6 +380,17 @@ export default class TbMapWidgetV2 { |
381 | 380 | tbMap.ctx.actionsApi.handleWidgetAction($event, descriptors[0], entityId, entityName); |
382 | 381 | } |
383 | 382 | } |
383 | + function locationPolygonClick($event, location) { | |
384 | + var descriptors = tbMap.ctx.actionsApi.getActionDescriptors('polygonClick'); | |
385 | + if (descriptors.length) { | |
386 | + var datasource = tbMap.subscription.datasources[location.dsIndex]; | |
387 | + var entityId = {}; | |
388 | + entityId.id = datasource.entityId; | |
389 | + entityId.entityType = datasource.entityType; | |
390 | + var entityName = datasource.entityName; | |
391 | + tbMap.ctx.actionsApi.handleWidgetAction($event, descriptors[0], entityId, entityName); | |
392 | + } | |
393 | + } | |
384 | 394 | |
385 | 395 | function updateLocation(location, data, dataMap) { |
386 | 396 | var locationChanged = false; |
... | ... | @@ -427,21 +437,6 @@ export default class TbMapWidgetV2 { |
427 | 437 | locationChanged = true; |
428 | 438 | } |
429 | 439 | } |
430 | - | |
431 | - | |
432 | - if (location.settings.showPolygon && dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName] !== null) { | |
433 | - let polygonLatLngsRaw = angular.fromJson(dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName]); | |
434 | - let polygonLatLngs = !polygonLatLngsRaw || mapPolygonArray(polygonLatLngsRaw); | |
435 | - if (!location.polygon && polygonLatLngs.length > 0) { | |
436 | - location.polygon = tbMap.map.createPolygon(polygonLatLngs, location.settings); | |
437 | - tbMap.polygons.push(location.polygon); | |
438 | - } else if (polygonLatLngs.length > 0) { | |
439 | - let prevPolygonArr = tbMap.map.getPolygonLatLngs(location.polygon); | |
440 | - if (!prevPolygonArr || !arraysEqual(prevPolygonArr, polygonLatLngs)) { | |
441 | - tbMap.map.setPolygonLatLngs(location.polygon, polygonLatLngs); | |
442 | - } | |
443 | - } | |
444 | - } | |
445 | 440 | } |
446 | 441 | if (location.marker) { |
447 | 442 | updateLocationStyle(location, dataMap); |
... | ... | @@ -451,6 +446,25 @@ export default class TbMapWidgetV2 { |
451 | 446 | return locationChanged; |
452 | 447 | } |
453 | 448 | |
449 | + function createUpdatePolygon(location, dataMap) { | |
450 | + if (location.settings.showPolygon && dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName] !== null) { | |
451 | + let polygonLatLngsRaw = angular.fromJson(dataMap.dsDataMap[location.dsIndex][location.settings.polygonKeyName]); | |
452 | + let polygonLatLngs = !polygonLatLngsRaw || mapPolygonArray(polygonLatLngsRaw); | |
453 | + if (!location.polygon && polygonLatLngs.length > 0) { | |
454 | + location.polygon = tbMap.map.createPolygon(polygonLatLngs, location.settings, location, function (event) { | |
455 | + tbMap.callbacks.onLocationClick(location); | |
456 | + locationPolygonClick(event, location); | |
457 | + }, [location.dsIndex]); | |
458 | + tbMap.polygons.push(location.polygon); | |
459 | + } else if (polygonLatLngs.length > 0) { | |
460 | + let prevPolygonArr = tbMap.map.getPolygonLatLngs(location.polygon); | |
461 | + if (!prevPolygonArr || !arraysEqual(prevPolygonArr, polygonLatLngs)) { | |
462 | + tbMap.map.setPolygonLatLngs(location.polygon, polygonLatLngs); | |
463 | + } | |
464 | + } | |
465 | + } | |
466 | + } | |
467 | + | |
454 | 468 | function loadLocations(data, datasources) { |
455 | 469 | var bounds = tbMap.map.createBounds(); |
456 | 470 | tbMap.locations = []; |
... | ... | @@ -459,7 +473,6 @@ export default class TbMapWidgetV2 { |
459 | 473 | var currentDatasourceIndex = -1; |
460 | 474 | var latIndex = -1; |
461 | 475 | var lngIndex = -1; |
462 | - | |
463 | 476 | for (var i = 0; i < data.length; i++) { |
464 | 477 | var dataKeyData = data[i]; |
465 | 478 | var dataKey = dataKeyData.dataKey; |
... | ... | @@ -480,7 +493,6 @@ export default class TbMapWidgetV2 { |
480 | 493 | } else if (nameToCheck === tbMap.locationSettings.lngKeyName) { |
481 | 494 | lngIndex = i; |
482 | 495 | } |
483 | - | |
484 | 496 | if (latIndex > -1 && lngIndex > -1) { |
485 | 497 | var location = { |
486 | 498 | latIndex: latIndex, |
... | ... | @@ -499,6 +511,7 @@ export default class TbMapWidgetV2 { |
499 | 511 | } |
500 | 512 | tbMap.locations.push(location); |
501 | 513 | updateLocation(location, data, dataMap); |
514 | + | |
502 | 515 | if (location.polyline) { |
503 | 516 | tbMap.map.extendBounds(bounds, location.polyline); |
504 | 517 | } else if (location.marker) { |
... | ... | @@ -507,8 +520,28 @@ export default class TbMapWidgetV2 { |
507 | 520 | latIndex = -1; |
508 | 521 | lngIndex = -1; |
509 | 522 | } |
510 | - | |
511 | 523 | } |
524 | + data.forEach(function (dataEl, index) { | |
525 | + let nameToCheck; | |
526 | + if (dataEl.dataKey.locationAttrName) { | |
527 | + nameToCheck = dataEl.dataKey.locationAttrName; | |
528 | + } else { | |
529 | + nameToCheck = dataEl.dataKey.label; | |
530 | + } | |
531 | + if (nameToCheck === tbMap.locationSettings.polygonKeyName) { | |
532 | + let location = { | |
533 | + polIndex: index, | |
534 | + settings: angular.copy(tbMap.locationSettings) | |
535 | + }; | |
536 | + location.dsIndex = datasources.findIndex(function (ds) { | |
537 | + return dataEl.datasource.entityId === ds.entityId; | |
538 | + }); | |
539 | + tbMap.locations.push(location); | |
540 | + createUpdatePolygon(location, dataMap); | |
541 | + tbMap.map.extendBounds(bounds, location.polygon); | |
542 | + } | |
543 | + }); | |
544 | + | |
512 | 545 | tbMap.map.fitBounds(bounds); |
513 | 546 | } |
514 | 547 | |
... | ... | @@ -532,10 +565,13 @@ export default class TbMapWidgetV2 { |
532 | 565 | for (var p = 0; p < tbMap.locations.length; p++) { |
533 | 566 | var location = tbMap.locations[p]; |
534 | 567 | locationsChanged |= updateLocation(location, data, dataMap); |
568 | + createUpdatePolygon(location, dataMap); | |
535 | 569 | if (location.polyline) { |
536 | 570 | tbMap.map.extendBounds(bounds, location.polyline); |
537 | 571 | } else if (location.marker) { |
538 | 572 | tbMap.map.extendBoundsWithMarker(bounds, location.marker); |
573 | + } else if (location.polygon) { | |
574 | + tbMap.map.extendBounds(bounds, location.polygon); | |
539 | 575 | } |
540 | 576 | } |
541 | 577 | if (locationsChanged && tbMap.initBounds) { |
... | ... | @@ -585,23 +621,30 @@ export default class TbMapWidgetV2 { |
585 | 621 | } |
586 | 622 | } |
587 | 623 | } |
588 | - | |
589 | 624 | } |
590 | 625 | |
591 | 626 | resize() { |
592 | 627 | if (this.map && this.map.inited()) { |
593 | - this.map.invalidateSize(); | |
628 | + let map = this.map; | |
594 | 629 | if (this.locations && this.locations.length > 0) { |
595 | - var bounds = this.map.createBounds(); | |
596 | - for (var m = 0; m < this.markers.length; m++) { | |
597 | - this.map.extendBoundsWithMarker(bounds, this.markers[m]); | |
630 | + map.invalidateSize(); | |
631 | + var bounds = map.createBounds(); | |
632 | + if (this.markers && this.markers.length>0) { | |
633 | + this.markers.forEach(function (marker) { | |
634 | + map.extendBoundsWithMarker(bounds, marker); | |
635 | + }); | |
598 | 636 | } |
599 | - if (this.polylines) { | |
600 | - for (var p = 0; p < this.polylines.length; p++) { | |
601 | - this.map.extendBounds(bounds, this.polylines[p]); | |
602 | - } | |
637 | + if (this.polylines && this.polylines.length>0) { | |
638 | + this.polylines.forEach(function (polyline) { | |
639 | + map.extendBounds(bounds, polyline); | |
640 | + }) | |
641 | + } | |
642 | + if (this.polygons && this.polygons.length > 0) { | |
643 | + this.polygons.forEach(function (polygon) { | |
644 | + map.extendBounds(bounds, polygon); | |
645 | + }) | |
603 | 646 | } |
604 | - this.map.fitBounds(bounds); | |
647 | + map.fitBounds(bounds); | |
605 | 648 | } |
606 | 649 | } |
607 | 650 | } |
... | ... | @@ -638,6 +681,10 @@ export default class TbMapWidgetV2 { |
638 | 681 | name: 'widget-action.marker-click', |
639 | 682 | multiple: false |
640 | 683 | }, |
684 | + 'polygonClick': { | |
685 | + name: 'widget-action.polygon-click', | |
686 | + multiple: false | |
687 | + }, | |
641 | 688 | 'tooltipAction': { |
642 | 689 | name: 'widget-action.tooltip-tag-action', |
643 | 690 | multiple: true | ... | ... |
... | ... | @@ -190,7 +190,7 @@ export default class TbOpenStreetMap { |
190 | 190 | this.map.removeLayer(polyline); |
191 | 191 | } |
192 | 192 | |
193 | - createPolygon(latLangs, settings) { | |
193 | + createPolygon(latLangs, settings, location, onClickListener, markerArgs) { | |
194 | 194 | let polygon = L.polygon(latLangs, { |
195 | 195 | fill: true, |
196 | 196 | fillColor: settings.polygonColor, |
... | ... | @@ -199,6 +199,13 @@ export default class TbOpenStreetMap { |
199 | 199 | fillOpacity: settings.polygonOpacity, |
200 | 200 | opacity: settings.polygonStrokeOpacity |
201 | 201 | }).addTo(this.map); |
202 | + | |
203 | + if (settings.displayTooltip) { | |
204 | + this.createTooltip(polygon, location.dsIndex, settings, markerArgs); | |
205 | + } | |
206 | + if (onClickListener) { | |
207 | + polygon.on('click', onClickListener); | |
208 | + } | |
202 | 209 | return polygon; |
203 | 210 | } |
204 | 211 | |
... | ... | @@ -224,6 +231,7 @@ export default class TbOpenStreetMap { |
224 | 231 | |
225 | 232 | setPolygonLatLngs(polygon, latLngs) { |
226 | 233 | polygon.setLatLngs(latLngs); |
234 | + polygon.redraw(); | |
227 | 235 | } |
228 | 236 | |
229 | 237 | fitBounds(bounds) { |
... | ... | @@ -272,7 +280,7 @@ export default class TbOpenStreetMap { |
272 | 280 | } |
273 | 281 | |
274 | 282 | extendBounds(bounds, polyline) { |
275 | - if (polyline && polyline.getLatLngs()) { | |
283 | + if (polyline && polyline.getLatLngs() && polyline.getBounds()) { | |
276 | 284 | bounds.extend(polyline.getBounds()); |
277 | 285 | } |
278 | 286 | } | ... | ... |
... | ... | @@ -331,7 +331,7 @@ export default class TbTencentMap { |
331 | 331 | } |
332 | 332 | |
333 | 333 | /* eslint-disable no-undef */ |
334 | - createPolygon(latLangs, settings) { | |
334 | + createPolygon(latLangs, settings, location, onClickListener, markerArgs) { | |
335 | 335 | let polygon = new qq.maps.Polygon({ |
336 | 336 | map: this.map, |
337 | 337 | path: latLangs, |
... | ... | @@ -339,8 +339,31 @@ export default class TbTencentMap { |
339 | 339 | fillColor: settings.polygonColor, |
340 | 340 | strokeWeight: settings.polygonStrokeWeight |
341 | 341 | }); |
342 | + //initialize-tooltip | |
343 | + let popup = new qq.maps.InfoWindow({ | |
344 | + content: '' | |
345 | + }); | |
346 | + if (!this.tooltips) this.tooltips = []; | |
347 | + this.tooltips.push({ | |
348 | + markerArgs: markerArgs, | |
349 | + popup: popup, | |
350 | + locationSettings: settings, | |
351 | + dsIndex: location.dsIndex | |
352 | + }); | |
353 | + | |
354 | + if (onClickListener) { | |
355 | + qq.maps.event.addListener(polygon, 'click', function (event) { | |
356 | + if (settings.displayTooltip) { | |
357 | + popup.setMap(this.map); | |
358 | + popup.setPosition(event.latLng); | |
359 | + popup.open(); | |
360 | + } | |
361 | + onClickListener(); | |
362 | + }); | |
363 | + } | |
342 | 364 | return polygon; |
343 | 365 | } |
366 | + | |
344 | 367 | /* eslint-disable no-undef */ |
345 | 368 | |
346 | 369 | removePolygon (polygon) { | ... | ... |
... | ... | @@ -73,22 +73,24 @@ export function processPattern(pattern, datasources, dsIndex) { |
73 | 73 | |
74 | 74 | export function fillPattern(pattern, replaceInfo, data) { |
75 | 75 | var text = angular.copy(pattern); |
76 | - for (var v = 0; v < replaceInfo.variables.length; v++) { | |
77 | - var variableInfo = replaceInfo.variables[v]; | |
78 | - var txtVal = ''; | |
79 | - if (variableInfo.dataKeyIndex > -1 && data[variableInfo.dataKeyIndex]) { | |
80 | - var varData = data[variableInfo.dataKeyIndex].data; | |
81 | - if (varData.length > 0) { | |
82 | - var val = varData[varData.length - 1][1]; | |
83 | - if (isNumber(val)) { | |
84 | - txtVal = padValue(val, variableInfo.valDec, 0); | |
85 | - } else { | |
86 | - txtVal = val; | |
87 | - } | |
88 | - } | |
89 | - } | |
90 | - text = text.split(variableInfo.variable).join(txtVal); | |
91 | - } | |
76 | + if (replaceInfo) { | |
77 | + for (var v = 0; v < replaceInfo.variables.length; v++) { | |
78 | + var variableInfo = replaceInfo.variables[v]; | |
79 | + var txtVal = ''; | |
80 | + if (variableInfo.dataKeyIndex > -1 && data[variableInfo.dataKeyIndex]) { | |
81 | + var varData = data[variableInfo.dataKeyIndex].data; | |
82 | + if (varData.length > 0) { | |
83 | + var val = varData[varData.length - 1][1]; | |
84 | + if (isNumber(val)) { | |
85 | + txtVal = padValue(val, variableInfo.valDec, 0); | |
86 | + } else { | |
87 | + txtVal = val; | |
88 | + } | |
89 | + } | |
90 | + } | |
91 | + text = text.split(variableInfo.variable).join(txtVal); | |
92 | + } | |
93 | + } | |
92 | 94 | return text; |
93 | 95 | } |
94 | 96 | ... | ... |