tsai
/
thingsboard
mirror of https://github.com/thingsboard/thingsboard.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge branch 'MrKartoshka-map_update_polygons'

pull/1446/head
Igor Kulikov 8 years ago
parent
d50db7a3dd 136526cd80
commit
0d91554655
5 changed files with 1931 additions and 1657 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 42
      ui/src/app/widget/lib/google-map.js
  2. 15
      ui/src/app/widget/lib/image-map.js
  3. 2251
      ui/src/app/widget/lib/map-widget2.js
  4. 494
      ui/src/app/widget/lib/openstreet-map.js
  5. 786
      ui/src/app/widget/lib/tencent-map.js

42
ui/src/app/widget/lib/google-map.js
View File

@ -314,6 +314,48 @@ export default class TbGoogleMap {
polyline.setMap(null); polyline.setMap(null);
} }
createPolygon(latLangs, settings) {
let polygon = new google.maps.Polygon({
map: this.map,
paths: latLangs,
strokeColor: settings.polygonStrokeColor,
strokeOpacity: settings.polygonStrokeColor,
fillColor: settings.polygonColor,
fillOpacity: settings.polygonOpacity,
strokeWeight: settings.polygonStrokeWeight
});
return polygon;
}
/* eslint-disable no-undef */
removePolygon (polygon) {
polygon.setMap(null);
}
/* eslint-disable no-undef,no-unused-vars */
updatePolygonColor (polygon, settings, color) {
let options = {
paths: polygon.getPaths(),
map: this.map,
strokeColor: color,
fillColor: color,
strokeWeight: settings.polygonStrokeWeight
}
}
/* eslint-disable no-undef ,no-unused-vars*/
getPolygonLatLngs(polygon) {
return polygon.getPaths().getArray();
}
setPolygonLatLngs(polygon, latLngs) {
polygon.setPaths(latLngs);
}
/* eslint-disable no-undef */ /* eslint-disable no-undef */
fitBounds(bounds) { fitBounds(bounds) {
if (this.dontFitMapBounds && this.defaultZoomLevel) { if (this.dontFitMapBounds && this.defaultZoomLevel) {

15
ui/src/app/widget/lib/image-map.js
View File

@ -369,6 +369,21 @@ export default class TbImageMap {
removePolyline(/*polyline*/) { removePolyline(/*polyline*/) {
} }
createPolygon(/*latLangs, settings*/) {
}
removePolygon(/*latLangs, settings*/) {
}
updatePolygonColor(/*latLangs, settings*/) {
}
getPolygonLatLngs(/*latLangs, settings*/) {
}
setPolygonLatLngs(/*latLangs, settings*/) {
}
fitBounds() { fitBounds() {
} }

2251
ui/src/app/widget/lib/map-widget2.js
View File

File diff suppressed because it is too large

494
ui/src/app/widget/lib/openstreet-map.js
View File

@ -19,234 +19,270 @@ import 'leaflet-providers';
export default class TbOpenStreetMap { export default class TbOpenStreetMap {
constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, minZoomLevel, mapProvider) { constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, minZoomLevel, mapProvider) {
this.utils = utils; this.utils = utils;
this.defaultZoomLevel = defaultZoomLevel; this.defaultZoomLevel = defaultZoomLevel;
this.dontFitMapBounds = dontFitMapBounds; this.dontFitMapBounds = dontFitMapBounds;
this.minZoomLevel = minZoomLevel; this.minZoomLevel = minZoomLevel;
this.tooltips = []; this.tooltips = [];
if (!mapProvider) { if (!mapProvider) {
mapProvider = "OpenStreetMap.Mapnik"; mapProvider = "OpenStreetMap.Mapnik";
} }
this.map = L.map($containerElement[0]).setView([0, 0], this.defaultZoomLevel || 8); this.map = L.map($containerElement[0]).setView([0, 0], this.defaultZoomLevel || 8);
var tileLayer = L.tileLayer.provider(mapProvider); var tileLayer = L.tileLayer.provider(mapProvider);
tileLayer.addTo(this.map); tileLayer.addTo(this.map);
if (initCallback) { if (initCallback) {
setTimeout(initCallback, 0); //eslint-disable-line setTimeout(initCallback, 0); //eslint-disable-line
} }
} }
inited() { inited() {
return angular.isDefined(this.map); return angular.isDefined(this.map);
} }
updateMarkerLabel(marker, settings) { updateMarkerLabel(marker, settings) {
marker.unbindTooltip(); marker.unbindTooltip();
marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>', marker.bindTooltip('<div style="color: ' + settings.labelColor + ';"><b>' + settings.labelText + '</b></div>',
{ className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset }); {className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset});
} }
updateMarkerColor(marker, color) { updateMarkerColor(marker, color) {
this.createDefaultMarkerIcon(marker, color, (iconInfo) => { this.createDefaultMarkerIcon(marker, color, (iconInfo) => {
marker.setIcon(iconInfo.icon); marker.setIcon(iconInfo.icon);
}); });
} }
updateMarkerIcon(marker, settings) { updateMarkerIcon(marker, settings) {
this.createMarkerIcon(marker, settings, (iconInfo) => { this.createMarkerIcon(marker, settings, (iconInfo) => {
marker.setIcon(iconInfo.icon); marker.setIcon(iconInfo.icon);
if (settings.showLabel) { if (settings.showLabel) {
marker.unbindTooltip(); marker.unbindTooltip();
marker.tooltipOffset = [0, -iconInfo.size[1] + 10]; marker.tooltipOffset = [0, -iconInfo.size[1] + 10];
marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>', marker.bindTooltip('<div style="color: ' + settings.labelColor + ';"><b>' + settings.labelText + '</b></div>',
{ className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset }); {className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset});
} }
}); });
} }
createMarkerIcon(marker, settings, onMarkerIconReady) { createMarkerIcon(marker, settings, onMarkerIconReady) {
var currentImage = settings.currentImage; var currentImage = settings.currentImage;
var opMap = this; var opMap = this;
if (currentImage && currentImage.url) { if (currentImage && currentImage.url) {
this.utils.loadImageAspect(currentImage.url).then( this.utils.loadImageAspect(currentImage.url).then(
(aspect) => { (aspect) => {
if (aspect) { if (aspect) {
var width; var width;
var height; var height;
if (aspect > 1) { if (aspect > 1) {
width = currentImage.size; width = currentImage.size;
height = currentImage.size / aspect; height = currentImage.size / aspect;
} else { } else {
width = currentImage.size * aspect; width = currentImage.size * aspect;
height = currentImage.size; height = currentImage.size;
} }
var icon = L.icon({ var icon = L.icon({
iconUrl: currentImage.url, iconUrl: currentImage.url,
iconSize: [width, height], iconSize: [width, height],
iconAnchor: [width/2, height], iconAnchor: [width / 2, height],
popupAnchor: [0, -height] popupAnchor: [0, -height]
}); });
var iconInfo = { var iconInfo = {
size: [width, height], size: [width, height],
icon: icon icon: icon
}; };
onMarkerIconReady(iconInfo); onMarkerIconReady(iconInfo);
} else { } else {
opMap.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady); opMap.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
} }
} }
); );
} else { } else {
this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady); this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
} }
} }
createDefaultMarkerIcon(marker, color, onMarkerIconReady) { createDefaultMarkerIcon(marker, color, onMarkerIconReady) {
var pinColor = color.substr(1); var pinColor = color.substr(1);
var icon = L.icon({ var icon = L.icon({
iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + pinColor, iconUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|' + pinColor,
iconSize: [21, 34], iconSize: [21, 34],
iconAnchor: [10, 34], iconAnchor: [10, 34],
popupAnchor: [0, -34], popupAnchor: [0, -34],
shadowUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_shadow', shadowUrl: 'https://chart.apis.google.com/chart?chst=d_map_pin_shadow',
shadowSize: [40, 37], shadowSize: [40, 37],
shadowAnchor: [12, 35] shadowAnchor: [12, 35]
}); });
var iconInfo = { var iconInfo = {
size: [21, 34], size: [21, 34],
icon: icon icon: icon
}; };
onMarkerIconReady(iconInfo); onMarkerIconReady(iconInfo);
} }
createMarker(location, dsIndex, settings, onClickListener, markerArgs) { createMarker(location, dsIndex, settings, onClickListener, markerArgs) {
var marker = L.marker(location, {}); var marker = L.marker(location, {});
var opMap = this; var opMap = this;
this.createMarkerIcon(marker, settings, (iconInfo) => { this.createMarkerIcon(marker, settings, (iconInfo) => {
marker.setIcon(iconInfo.icon); marker.setIcon(iconInfo.icon);
if (settings.showLabel) { if (settings.showLabel) {
marker.tooltipOffset = [0, -iconInfo.size[1] + 10]; marker.tooltipOffset = [0, -iconInfo.size[1] + 10];
marker.bindTooltip('<div style="color: '+ settings.labelColor +';"><b>'+settings.labelText+'</b></div>', marker.bindTooltip('<div style="color: ' + settings.labelColor + ';"><b>' + settings.labelText + '</b></div>',
{ className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset }); {className: 'tb-marker-label', permanent: true, direction: 'top', offset: marker.tooltipOffset});
} }
marker.addTo(opMap.map); marker.addTo(opMap.map);
}); });
if (settings.displayTooltip) { if (settings.displayTooltip) {
this.createTooltip(marker, dsIndex, settings, markerArgs); this.createTooltip(marker, dsIndex, settings, markerArgs);
} }
if (onClickListener) { if (onClickListener) {
marker.on('click', onClickListener); marker.on('click', onClickListener);
} }
return marker; return marker;
} }
removeMarker(marker) { removeMarker(marker) {
this.map.removeLayer(marker); this.map.removeLayer(marker);
} }
createTooltip(marker, dsIndex, settings, markerArgs) { createTooltip(marker, dsIndex, settings, markerArgs) {
var popup = L.popup(); var popup = L.popup();
popup.setContent(''); popup.setContent('');
marker.bindPopup(popup, {autoClose: settings.autocloseTooltip, closeOnClick: false}); marker.bindPopup(popup, {autoClose: settings.autocloseTooltip, closeOnClick: false});
this.tooltips.push( { this.tooltips.push({
markerArgs: markerArgs, markerArgs: markerArgs,
popup: popup, popup: popup,
locationSettings: settings, locationSettings: settings,
dsIndex: dsIndex dsIndex: dsIndex
}); });
} }
updatePolylineColor(polyline, settings, color) { updatePolylineColor(polyline, settings, color) {
var style = { var style = {
color: color, color: color,
opacity: settings.strokeOpacity, opacity: settings.strokeOpacity,
weight: settings.strokeWeight weight: settings.strokeWeight
}; };
polyline.setStyle(style); polyline.setStyle(style);
} }
createPolyline(locations, settings) { createPolyline(locations, settings) {
var polyline = L.polyline(locations, var polyline = L.polyline(locations,
{ {
color: settings.color, color: settings.color,
opacity: settings.strokeOpacity, opacity: settings.strokeOpacity,
weight: settings.strokeWeight weight: settings.strokeWeight
} }
).addTo(this.map); ).addTo(this.map);
return polyline; return polyline;
} }
removePolyline(polyline) { removePolyline(polyline) {
this.map.removeLayer(polyline); this.map.removeLayer(polyline);
} }
fitBounds(bounds) { createPolygon(latLangs, settings) {
if (bounds.isValid()) { let polygon = L.polygon(latLangs, {
if (this.dontFitMapBounds && this.defaultZoomLevel) { fill: true,
this.map.setZoom(this.defaultZoomLevel, {animate: false}); fillColor: settings.polygonColor,
this.map.panTo(bounds.getCenter(), {animate: false}); color: settings.polygonStrokeColor,
} else { weight: settings.polygonStrokeWeight,
var tbMap = this; fillOpacity: settings.polygonOpacity,
this.map.once('zoomend', function() { opacity: settings.polygonStrokeOpacity
if (!tbMap.defaultZoomLevel && tbMap.map.getZoom() > tbMap.minZoomLevel) { }).addTo(this.map);
tbMap.map.setZoom(tbMap.minZoomLevel, {animate: false}); return polygon;
} }
});
this.map.fitBounds(bounds, {padding: [50, 50], animate: false}); removePolygon(polygon) {
} this.map.removeLayer(polygon);
} }
}
updatePolygonColor(polygon, settings, color) {
createLatLng(lat, lng) { let style = {
return L.latLng(lat, lng); fill: true,
} fillColor: color,
color: color,
extendBoundsWithMarker(bounds, marker) { weight: settings.polygonStrokeWeight,
bounds.extend(marker.getLatLng()); fillOpacity: settings.polygonOpacity,
} opacity: settings.polygonStrokeOpacity
};
getMarkerPosition(marker) { polygon.setStyle(style);
return marker.getLatLng(); }
}
getPolygonLatLngs(polygon) {
setMarkerPosition(marker, latLng) { return polygon.getLatLngs();
marker.setLatLng(latLng); }
}
setPolygonLatLngs(polygon, latLngs) {
getPolylineLatLngs(polyline) { polygon.setLatLngs(latLngs);
return polyline.getLatLngs(); }
}
fitBounds(bounds) {
setPolylineLatLngs(polyline, latLngs) { if (bounds.isValid()) {
polyline.setLatLngs(latLngs); if (this.dontFitMapBounds && this.defaultZoomLevel) {
} this.map.setZoom(this.defaultZoomLevel, {animate: false});
this.map.panTo(bounds.getCenter(), {animate: false});
createBounds() { } else {
return L.latLngBounds(); var tbMap = this;
} this.map.once('zoomend', function () {
if (!tbMap.defaultZoomLevel && tbMap.map.getZoom() > tbMap.minZoomLevel) {
extendBounds(bounds, polyline) { tbMap.map.setZoom(tbMap.minZoomLevel, {animate: false});
if (polyline && polyline.getLatLngs()) { }
bounds.extend(polyline.getBounds()); });
} this.map.fitBounds(bounds, {padding: [50, 50], animate: false});
} }
}
invalidateSize() { }
this.map.invalidateSize(true);
} createLatLng(lat, lng) {
return L.latLng(lat, lng);
getTooltips() { }
return this.tooltips;
} extendBoundsWithMarker(bounds, marker) {
bounds.extend(marker.getLatLng());
}
getMarkerPosition(marker) {
return marker.getLatLng();
}
setMarkerPosition(marker, latLng) {
marker.setLatLng(latLng);
}
getPolylineLatLngs(polyline) {
return polyline.getLatLngs();
}
setPolylineLatLngs(polyline, latLngs) {
polyline.setLatLngs(latLngs);
}
createBounds() {
return L.latLngBounds();
}
extendBounds(bounds, polyline) {
if (polyline && polyline.getLatLngs()) {
bounds.extend(polyline.getBounds());
}
}
invalidateSize() {
this.map.invalidateSize(true);
}
getTooltips() {
return this.tooltips;
}
} }

786
ui/src/app/widget/lib/tencent-map.js
View File

@ -14,377 +14,425 @@
* limitations under the License. * limitations under the License.
*/ */
var tmGlobals = { var tmGlobals = {
loadingTmId: null, loadingTmId: null,
tmApiKeys: {} tmApiKeys: {}
} }
export default class TbTencentMap { export default class TbTencentMap {
constructor($containerElement,utils, initCallback, defaultZoomLevel, dontFitMapBounds, minZoomLevel, tmApiKey, tmDefaultMapType) { constructor($containerElement, utils, initCallback, defaultZoomLevel, dontFitMapBounds, minZoomLevel, tmApiKey, tmDefaultMapType) {
var tbMap = this; var tbMap = this;
this.utils = utils; this.utils = utils;
this.defaultZoomLevel = defaultZoomLevel; this.defaultZoomLevel = defaultZoomLevel;
this.dontFitMapBounds = dontFitMapBounds; this.dontFitMapBounds = dontFitMapBounds;
this.minZoomLevel = minZoomLevel; this.minZoomLevel = minZoomLevel;
this.tooltips = []; this.tooltips = [];
this.defaultMapType = tmDefaultMapType; this.defaultMapType = tmDefaultMapType;
function clearGlobalId() { function clearGlobalId() {
if (tmGlobals.loadingTmId && tmGlobals.loadingTmId === tbMap.mapId) { if (tmGlobals.loadingTmId && tmGlobals.loadingTmId === tbMap.mapId) {
tmGlobals.loadingTmId = null; tmGlobals.loadingTmId = null;
} }
} }
function displayError(message) { function displayError(message) {
$containerElement.html( // eslint-disable-line angular/angularelement $containerElement.html( // eslint-disable-line angular/angularelement
"<div class='error'>"+ message + "</div>" "<div class='error'>" + message + "</div>"
); );
} }
function initTencentMap() { function initTencentMap() {
tbMap.map = new qq.maps.Map($containerElement[0], { // eslint-disable-line no-undef tbMap.map = new qq.maps.Map($containerElement[0], { // eslint-disable-line no-undef
scrollwheel: true, scrollwheel: true,
mapTypeId: getTencentMapTypeId(tbMap.defaultMapType), mapTypeId: getTencentMapTypeId(tbMap.defaultMapType),
zoom: tbMap.defaultZoomLevel || 8 zoom: tbMap.defaultZoomLevel || 8
}); });
if (initCallback) { if (initCallback) {
initCallback(); initCallback();
} }
} }
/* eslint-disable no-undef */ /* eslint-disable no-undef */
function getTencentMapTypeId(mapType) { function getTencentMapTypeId(mapType) {
var mapTypeId =qq.maps.MapTypeId.ROADMAP; var mapTypeId = qq.maps.MapTypeId.ROADMAP;
if (mapType) { if (mapType) {
if (mapType === 'hybrid') { if (mapType === 'hybrid') {
mapTypeId = qq.maps.MapTypeId.HYBRID; mapTypeId = qq.maps.MapTypeId.HYBRID;
} else if (mapType === 'satellite') { } else if (mapType === 'satellite') {
mapTypeId = qq.maps.MapTypeId.SATELLITE; mapTypeId = qq.maps.MapTypeId.SATELLITE;
} else if (mapType === 'terrain') { } else if (mapType === 'terrain') {
mapTypeId = qq.maps.MapTypeId.ROADMAP; mapTypeId = qq.maps.MapTypeId.ROADMAP;
} }
} }
return mapTypeId; return mapTypeId;
} }
/* eslint-enable no-undef */ /* eslint-enable no-undef */
this.mapId = '' + Math.random().toString(36).substr(2, 9); this.mapId = '' + Math.random().toString(36).substr(2, 9);
this.apiKey = tmApiKey || '84d6d83e0e51e481e50454ccbe8986b'; this.apiKey = tmApiKey || '84d6d83e0e51e481e50454ccbe8986b';
window.tm_authFailure = function() { // eslint-disable-line no-undef, angular/window-service window.tm_authFailure = function () { // eslint-disable-line no-undef, angular/window-service
if (tmGlobals.loadingTmId && tmGlobals.loadingTmId === tbMap.mapId) { if (tmGlobals.loadingTmId && tmGlobals.loadingTmId === tbMap.mapId) {
tmGlobals.loadingTmId = null; tmGlobals.loadingTmId = null;
tmGlobals.tmApiKeys[tbMap.apiKey].error = 'Unable to authentificate for tencent Map API.</br>Please check your API key.'; tmGlobals.tmApiKeys[tbMap.apiKey].error = 'Unable to authentificate for tencent Map API.</br>Please check your API key.';
displayError(tmGlobals.tmApiKeys[tbMap.apiKey].error); displayError(tmGlobals.tmApiKeys[tbMap.apiKey].error);
} }
}; };
this.initMapFunctionName = 'initTencentMap_' + this.mapId; this.initMapFunctionName = 'initTencentMap_' + this.mapId;
window[this.initMapFunctionName] = function() { // eslint-disable-line no-undef, angular/window-service window[this.initMapFunctionName] = function () { // eslint-disable-line no-undef, angular/window-service
tmGlobals.tmApiKeys[tbMap.apiKey].loaded = true; tmGlobals.tmApiKeys[tbMap.apiKey].loaded = true;
initTencentMap(); initTencentMap();
for (var p = 0; p < tmGlobals.tmApiKeys[tbMap.apiKey].pendingInits.length; p++) { for (var p = 0; p < tmGlobals.tmApiKeys[tbMap.apiKey].pendingInits.length; p++) {
var pendingInit = tmGlobals.tmApiKeys[tbMap.apiKey].pendingInits[p]; var pendingInit = tmGlobals.tmApiKeys[tbMap.apiKey].pendingInits[p];
pendingInit(); pendingInit();
} }
tmGlobals.tmApiKeys[tbMap.apiKey].pendingInits = []; tmGlobals.tmApiKeys[tbMap.apiKey].pendingInits = [];
}; };
if (this.apiKey && this.apiKey.length > 0) { if (this.apiKey && this.apiKey.length > 0) {
if (tmGlobals.tmApiKeys[this.apiKey]) { if (tmGlobals.tmApiKeys[this.apiKey]) {
if (tmGlobals.tmApiKeys[this.apiKey].error) { if (tmGlobals.tmApiKeys[this.apiKey].error) {
displayError(tmGlobals.tmApiKeys[this.apiKey].error); displayError(tmGlobals.tmApiKeys[this.apiKey].error);
} else if (tmGlobals.tmApiKeys[this.apiKey].loaded) { } else if (tmGlobals.tmApiKeys[this.apiKey].loaded) {
initTencentMap(); initTencentMap();
} else { } else {
tmGlobals.tmApiKeys[this.apiKey].pendingInits.push(initTencentMap); tmGlobals.tmApiKeys[this.apiKey].pendingInits.push(initTencentMap);
} }
} else { } else {
tmGlobals.tmApiKeys[this.apiKey] = { tmGlobals.tmApiKeys[this.apiKey] = {
loaded: false, loaded: false,
pendingInits: [] pendingInits: []
}; };
var tencentMapScriptRes = 'https://map.qq.com/api/js?v=2.exp&key='+this.apiKey+'&callback='+this.initMapFunctionName; var tencentMapScriptRes = 'https://map.qq.com/api/js?v=2.exp&key=' + this.apiKey + '&callback=' + this.initMapFunctionName;
tmGlobals.loadingTmId = this.mapId; tmGlobals.loadingTmId = this.mapId;
lazyLoad.load({ type: 'js', path: tencentMapScriptRes }).then( // eslint-disable-line no-undef lazyLoad.load({type: 'js', path: tencentMapScriptRes}).then( // eslint-disable-line no-undef
function success() { function success() {
setTimeout(clearGlobalId, 2000); // eslint-disable-line no-undef, angular/timeout-service setTimeout(clearGlobalId, 2000); // eslint-disable-line no-undef, angular/timeout-service
}, },
function fail(e) { function fail(e) {
clearGlobalId(); clearGlobalId();
tmGlobals.tmApiKeys[tbMap.apiKey].error = 'tencent map api load failed!</br>'+e; tmGlobals.tmApiKeys[tbMap.apiKey].error = 'tencent map api load failed!</br>' + e;
displayError(tmGlobals.tmApiKeys[tbMap.apiKey].error); displayError(tmGlobals.tmApiKeys[tbMap.apiKey].error);
} }
); );
} }
} else { } else {
displayError('No tencent Map Api Key provided!'); displayError('No tencent Map Api Key provided!');
} }
} }
inited() { inited() {
return angular.isDefined(this.map); return angular.isDefined(this.map);
} }
createMarkerLabelStyle(settings) { createMarkerLabelStyle(settings) {
return { return {
width: "200px", width: "200px",
textAlign: "center", textAlign: "center",
color: settings.labelColor, color: settings.labelColor,
background: "none", background: "none",
border: "none", border: "none",
fontSize: "12px", fontSize: "12px",
fontFamily: "\"Helvetica Neue\", Arial, Helvetica, sans-serif", fontFamily: "\"Helvetica Neue\", Arial, Helvetica, sans-serif",
fontWeight: "bold" fontWeight: "bold"
}; };
} }
/* eslint-disable no-undef,no-unused-vars*/ /* eslint-disable no-undef,no-unused-vars*/
updateMarkerLabel(marker, settings) { updateMarkerLabel(marker, settings) {
if (marker.label) { if (marker.label) {
marker.label.setContent(settings.labelText); marker.label.setContent(settings.labelText);
marker.label.setStyle(this.createMarkerLabelStyle(settings)); marker.label.setStyle(this.createMarkerLabelStyle(settings));
} }
} }
/* eslint-enable no-undef,no-unused-vars */
/* eslint-enable no-undef,no-unused-vars */
/* eslint-disable no-undef,no-unused-vars */
updateMarkerColor(marker, color) { /* eslint-disable no-undef,no-unused-vars */
this.createDefaultMarkerIcon(marker, color, (iconInfo) => { updateMarkerColor(marker, color) {
marker.setIcon(iconInfo.icon); this.createDefaultMarkerIcon(marker, color, (iconInfo) => {
}); marker.setIcon(iconInfo.icon);
} });
/* eslint-enable no-undef,,no-unused-vars */ }
/* eslint-disable no-undef */ /* eslint-enable no-undef,,no-unused-vars */
updateMarkerIcon(marker, settings) {
this.createMarkerIcon(marker, settings, (iconInfo) => { /* eslint-disable no-undef */
marker.setIcon(iconInfo.icon); updateMarkerIcon(marker, settings) {
if (marker.label) { this.createMarkerIcon(marker, settings, (iconInfo) => {
marker.label.setOffset(new qq.maps.Size(-100, -iconInfo.size[1]-20)); marker.setIcon(iconInfo.icon);
} if (marker.label) {
}); marker.label.setOffset(new qq.maps.Size(-100, -iconInfo.size[1] - 20));
} }
/* eslint-disable no-undef */ });
}
/* eslint-disable no-undef */
createMarkerIcon(marker, settings, onMarkerIconReady) { /* eslint-disable no-undef */
var currentImage = settings.currentImage;
var tMap = this; /* eslint-disable no-undef */
if (currentImage && currentImage.url) { createMarkerIcon(marker, settings, onMarkerIconReady) {
this.utils.loadImageAspect(currentImage.url).then( var currentImage = settings.currentImage;
(aspect) => { var tMap = this;
if (aspect) { if (currentImage && currentImage.url) {
var width; this.utils.loadImageAspect(currentImage.url).then(
var height; (aspect) => {
if (aspect > 1) { if (aspect) {
width = currentImage.size; var width;
height = currentImage.size / aspect; var height;
} else { if (aspect > 1) {
width = currentImage.size * aspect; width = currentImage.size;
height = currentImage.size; height = currentImage.size / aspect;
} } else {
var icon = new qq.maps.MarkerImage(currentImage.url, width = currentImage.size * aspect;
new qq.maps.Size(width, height), height = currentImage.size;
new qq.maps.Point(0,0), }
new qq.maps.Point(width/2, height), var icon = new qq.maps.MarkerImage(currentImage.url,
new qq.maps.Size(width, height)); new qq.maps.Size(width, height),
var iconInfo = { new qq.maps.Point(0, 0),
size: [width, height], new qq.maps.Point(width / 2, height),
icon: icon new qq.maps.Size(width, height));
}; var iconInfo = {
onMarkerIconReady(iconInfo); size: [width, height],
} else { icon: icon
tMap.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady); };
} onMarkerIconReady(iconInfo);
} } else {
); tMap.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
} else { }
this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady); }
} );
} } else {
/* eslint-enable no-undef */ this.createDefaultMarkerIcon(marker, settings.color, onMarkerIconReady);
}
/* eslint-disable no-undef */ }
createDefaultMarkerIcon(marker, color, onMarkerIconReady) {
var pinColor = color.substr(1); /* eslint-enable no-undef */
var icon = new qq.maps.MarkerImage("https://chart.apis.google.com/chart?chst=d_map_pin_letter_withshadow&chld=%E2%80%A2|" + pinColor,
new qq.maps.Size(40, 37), /* eslint-disable no-undef */
new qq.maps.Point(0,0), createDefaultMarkerIcon(marker, color, onMarkerIconReady) {
new qq.maps.Point(10, 37)); var pinColor = color.substr(1);
var iconInfo = { var icon = new qq.maps.MarkerImage("https://chart.apis.google.com/chart?chst=d_map_pin_letter_withshadow&chld=%E2%80%A2|" + pinColor,
size: [40, 37], new qq.maps.Size(40, 37),
icon: icon new qq.maps.Point(0, 0),
}; new qq.maps.Point(10, 37));
onMarkerIconReady(iconInfo); var iconInfo = {
} size: [40, 37],
/* eslint-enable no-undef */ icon: icon
};
/* eslint-disable no-undef */ onMarkerIconReady(iconInfo);
createMarker(location, dsIndex, settings, onClickListener, markerArgs) { }
var marker = new qq.maps.Marker({
position: location /* eslint-enable no-undef */
});
var tMap = this; /* eslint-disable no-undef */
this.createMarkerIcon(marker, settings, (iconInfo) => { createMarker(location, dsIndex, settings, onClickListener, markerArgs) {
marker.setIcon(iconInfo.icon); var marker = new qq.maps.Marker({
marker.setMap(tMap.map); position: location
if (settings.showLabel) { });
marker.label = new qq.maps.Label({ var tMap = this;
clickable: false, this.createMarkerIcon(marker, settings, (iconInfo) => {
content: settings.labelText, marker.setIcon(iconInfo.icon);
offset: new qq.maps.Size(-100, -iconInfo.size[1]-20), marker.setMap(tMap.map);
style: tMap.createMarkerLabelStyle(settings), if (settings.showLabel) {
visible: true, marker.label = new qq.maps.Label({
position: location, clickable: false,
map: tMap.map, content: settings.labelText,
zIndex: 1000 offset: new qq.maps.Size(-100, -iconInfo.size[1] - 20),
}); style: tMap.createMarkerLabelStyle(settings),
} visible: true,
}); position: location,
map: tMap.map,
if (settings.displayTooltip) { zIndex: 1000
this.createTooltip(marker, dsIndex, settings, markerArgs); });
} }
});
if (onClickListener) {
qq.maps.event.addListener(marker, 'click', onClickListener); if (settings.displayTooltip) {
} this.createTooltip(marker, dsIndex, settings, markerArgs);
}
return marker;
} if (onClickListener) {
qq.maps.event.addListener(marker, 'click', onClickListener);
/* eslint-disable no-undef */ }
removeMarker(marker) {
marker.setMap(null); return marker;
if (marker.label) { }
marker.label.setMap(null);
} /* eslint-disable no-undef */
} removeMarker(marker) {
marker.setMap(null);
/* eslint-enable no-undef */ if (marker.label) {
marker.label.setMap(null);
/* eslint-disable no-undef */ }
createTooltip(marker, dsIndex, settings, markerArgs) { }
var popup = new qq.maps.InfoWindow({
map :this.map /* eslint-enable no-undef */
});
var map = this; /* eslint-disable no-undef */
qq.maps.event.addListener(marker, 'click', function() { createTooltip(marker, dsIndex, settings, markerArgs) {
if (settings.autocloseTooltip) { var popup = new qq.maps.InfoWindow({
map.tooltips.forEach((tooltip) => { map: this.map
tooltip.popup.close(); });
}); var map = this;
} qq.maps.event.addListener(marker, 'click', function () {
popup.open(); if (settings.autocloseTooltip) {
popup.setPosition(marker); map.tooltips.forEach((tooltip) => {
}); tooltip.popup.close();
this.tooltips.push( { });
markerArgs: markerArgs, }
popup: popup, popup.open();
locationSettings: settings, popup.setPosition(marker);
dsIndex: dsIndex });
}); this.tooltips.push({
} markerArgs: markerArgs,
/* eslint-enable no-undef */ popup: popup,
locationSettings: settings,
/* eslint-disable no-undef */ dsIndex: dsIndex
updatePolylineColor(polyline, settings, color) { });
var options = { }
path: polyline.getPath(),
strokeColor: color, /* eslint-enable no-undef */
strokeOpacity: settings.strokeOpacity,
strokeWeight: settings.strokeWeight, /* eslint-disable no-undef */
map: this.map updatePolylineColor(polyline, settings, color) {
}; var options = {
polyline.setOptions(options); path: polyline.getPath(),
} strokeColor: color,
/* eslint-enable no-undef */ strokeOpacity: settings.strokeOpacity,
strokeWeight: settings.strokeWeight,
/* eslint-disable no-undef */ map: this.map
createPolyline(locations, settings) { };
var polyline = new qq.maps.Polyline({ polyline.setOptions(options);
path: locations, }
strokeColor: settings.color,
strokeOpacity: settings.strokeOpacity, /* eslint-enable no-undef */
strokeWeight: settings.strokeWeight,
map: this.map /* eslint-disable no-undef */
}); createPolyline(locations, settings) {
var polyline = new qq.maps.Polyline({
return polyline; path: locations,
} strokeColor: settings.color,
/* eslint-enable no-undef */ strokeOpacity: settings.strokeOpacity,
strokeWeight: settings.strokeWeight,
removePolyline(polyline) { map: this.map
polyline.setMap(null); });
}
return polyline;
/* eslint-disable no-undef ,no-unused-vars*/ }
fitBounds(bounds) {
if (this.dontFitMapBounds && this.defaultZoomLevel) { /* eslint-enable no-undef */
this.map.setZoom(this.defaultZoomLevel);
this.map.setCenter(bounds.getCenter()); removePolyline(polyline) {
} else { polyline.setMap(null);
var tbMap = this; }
qq.maps.event.addListenerOnce(this.map, 'bounds_changed', function() { // eslint-disable-line no-undef
if (!tbMap.defaultZoomLevel && tbMap.map.getZoom() > tbMap.minZoomLevel) { /* eslint-disable no-undef */
tbMap.map.setZoom(tbMap.minZoomLevel); createPolygon(latLangs, settings) {
} let polygon = new qq.maps.Polygon({
}); map: this.map,
this.map.fitBounds(bounds); path: latLangs,
} strokeColor: settings.polygonStrokeColor,
} fillColor: settings.polygonColor,
/* eslint-enable no-undef,no-unused-vars */ strokeWeight: settings.polygonStrokeWeight
});
createLatLng(lat, lng) { return polygon;
return new qq.maps.LatLng(lat, lng); // eslint-disable-line no-undef }
} /* eslint-disable no-undef */
extendBoundsWithMarker(bounds, marker) { removePolygon (polygon) {
bounds.extend(marker.getPosition()); polygon.setMap(null);
} }
getMarkerPosition(marker) { /* eslint-disable no-undef,no-unused-vars */
return marker.getPosition(); updatePolygonColor (polygon, settings, color) {
} let options = {
path: polygon.getPath(),
setMarkerPosition(marker, latLng) { map: this.map,
marker.setPosition(latLng); strokeColor: color,
if (marker.label) { fillColor: color,
marker.label.setPosition(latLng); strokeWeight: settings.polygonStrokeWeight
} }
}
}
getPolylineLatLngs(polyline) { /* eslint-disable no-undef ,no-unused-vars*/
return polyline.getPath().getArray();
}
getPolygonLatLngs(polygon) {
setPolylineLatLngs(polyline, latLngs) { return polygon.getPath().getArray();
polyline.setPath(latLngs); }
}
setPolygonLatLngs(polygon, latLngs) {
createBounds() { polygon.setPath(latLngs);
return new qq.maps.LatLngBounds(); // eslint-disable-line no-undef }
}
/* eslint-disable no-undef ,no-unused-vars*/
extendBounds(bounds, polyline) { fitBounds(bounds) {
if (polyline && polyline.getPath()) { if (this.dontFitMapBounds && this.defaultZoomLevel) {
var locations = polyline.getPath(); this.map.setZoom(this.defaultZoomLevel);
for (var i = 0; i < locations.getLength(); i++) { this.map.setCenter(bounds.getCenter());
bounds.extend(locations.getAt(i)); } else {
} var tbMap = this;
} qq.maps.event.addListenerOnce(this.map, 'bounds_changed', function () { // eslint-disable-line no-undef
} if (!tbMap.defaultZoomLevel && tbMap.map.getZoom() > tbMap.minZoomLevel) {
tbMap.map.setZoom(tbMap.minZoomLevel);
invalidateSize() { }
qq.maps.event.trigger(this.map, "resize"); // eslint-disable-line no-undef });
} this.map.fitBounds(bounds);
}
getTooltips() { }
return this.tooltips;
} /* eslint-enable no-undef,no-unused-vars */
createLatLng(lat, lng) {
return new qq.maps.LatLng(lat, lng); // eslint-disable-line no-undef
}
extendBoundsWithMarker(bounds, marker) {
bounds.extend(marker.getPosition());
}
getMarkerPosition(marker) {
return marker.getPosition();
}
setMarkerPosition(marker, latLng) {
marker.setPosition(latLng);
if (marker.label) {
marker.label.setPosition(latLng);
}
}
getPolylineLatLngs(polyline) {
return polyline.getPath().getArray();
}
setPolylineLatLngs(polyline, latLngs) {
polyline.setPath(latLngs);
}
createBounds() {
return new qq.maps.LatLngBounds(); // eslint-disable-line no-undef
}
extendBounds(bounds, polyline) {
if (polyline && polyline.getPath()) {
var locations = polyline.getPath();
for (var i = 0; i < locations.getLength(); i++) {
bounds.extend(locations.getAt(i));
}
}
}
invalidateSize() {
qq.maps.event.trigger(this.map, "resize"); // eslint-disable-line no-undef
}
getTooltips() {
return this.tooltips;
}
} }

Write Preview
Loading…
Cancel
Save