Added polygon functional for OpenStreet, Tencent and Google Latest Value Maps

This commit is contained in:
Maksym Dudnik 2019-01-30 11:21:07 +02:00
parent 61fd0867e2
commit 43b0ac6b5b
5 changed files with 1820 additions and 1547 deletions

View File

@ -314,6 +314,48 @@ export default class TbGoogleMap {
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 */
fitBounds(bounds) {
if (this.dontFitMapBounds && this.defaultZoomLevel) {

View File

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

File diff suppressed because it is too large Load Diff

View File

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

View File

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