code refactor

src/consts/map.js

@@ -0,0 +1,11 @@
+const leafletTileSources = {
+    'openstreetmap': {
+        tileUrlFormat: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+        tileUrlSubDomains: 'abc',
+        attribution : '&copy; <a href="http://www.openstreetmap.org/copyright" class="external" target="_blank">OpenStreetMap</a>'
+    }
+}
+
+export default {
+    leafletTileSources: leafletTileSources
+}

src/lib/map/index.js

@@ -1,4 +1,5 @@
-import settings from "@/lib/settings.js";
+import mapConstants from '@/consts/map.js';
+import settings from '@/lib/settings.js';
 
 import {
     loadLeafletMapAssets,
@@ -7,7 +8,7 @@ import {
     setLeafletMapCenterTo,
     setLeafletMapCenterMaker,
     removeLeafletMapCenterMaker
-} from './openstreetmap.js';
+} from './leaflet.js';
 
 import {
     loadGoogleMapAssets,
@@ -37,7 +38,7 @@ import {
 } from './amap.js';
 
 export function loadMapAssets(language) {
-    if (settings.getMapProvider() === 'openstreetmap') {
+    if (mapConstants.leafletTileSources[settings.getMapProvider()]) {
         return loadLeafletMapAssets(language);
     } else if (settings.getMapProvider() === 'googlemap') {
         return loadGoogleMapAssets(language);
@@ -49,14 +50,14 @@ export function loadMapAssets(language) {
 }
 
 export function createMapHolder() {
-    if (settings.getMapProvider() === 'openstreetmap') {
-        return createLeafletMapHolder();
+    if (mapConstants.leafletTileSources[settings.getMapProvider()]) {
+        return createLeafletMapHolder(settings.getMapProvider());
     } else if (settings.getMapProvider() === 'googlemap') {
-        return createGoogleMapHolder();
+        return createGoogleMapHolder(settings.getMapProvider());
     } else if (settings.getMapProvider() === 'baidumap') {
-        return createBaiduMapHolder();
+        return createBaiduMapHolder(settings.getMapProvider());
     } else if (settings.getMapProvider() === 'amap') {
-        return createAmapHolder();
+        return createAmapHolder(settings.getMapProvider());
     } else {
         return null;
     }
@@ -67,7 +68,7 @@ export function initMapInstance(mapHolder, mapContainer, options) {
         return;
     }
 
-    if (mapHolder.mapProvider === 'openstreetmap') {
+    if (mapConstants.leafletTileSources[settings.getMapProvider()]) {
         createLeafletMapInstance(mapHolder, mapContainer, options);
     } else if (mapHolder.mapProvider === 'googlemap') {
         createGoogleMapInstance(mapHolder, mapContainer, options);
@@ -83,7 +84,7 @@ export function setMapCenterTo(mapHolder, center, zoomLevel) {
         return;
     }
 
-    if (mapHolder.mapProvider === 'openstreetmap') {
+    if (mapConstants.leafletTileSources[settings.getMapProvider()]) {
         setLeafletMapCenterTo(mapHolder, center, zoomLevel);
     } else if (mapHolder.mapProvider === 'googlemap') {
         setGoogleMapCenterTo(mapHolder, center, zoomLevel);
@@ -99,7 +100,7 @@ export function setMapCenterMarker(mapHolder, position) {
         return;
     }
 
-    if (mapHolder.mapProvider === 'openstreetmap') {
+    if (mapConstants.leafletTileSources[settings.getMapProvider()]) {
         setLeafletMapCenterMaker(mapHolder, position);
     } else if (mapHolder.mapProvider === 'googlemap') {
         setGoogleMapCenterMaker(mapHolder, position);
@@ -115,7 +116,7 @@ export function removeMapCenterMarker(mapHolder) {
         return;
     }
 
-    if (mapHolder.mapProvider === 'openstreetmap') {
+    if (mapConstants.leafletTileSources[settings.getMapProvider()]) {
         removeLeafletMapCenterMaker(mapHolder);
     } else if (mapHolder.mapProvider === 'googlemap') {
         removeGoogleMapCenterMaker(mapHolder);

src/lib/map/leaflet.js

@@ -1,4 +1,6 @@
-import services from "@/lib/services.js";
+import mapConstants from '@/consts/map.js';
+import settings from '@/lib/settings.js';
+import services from '@/lib/services.js';
 
 const leafletHolder = {
     leaflet: null
@@ -11,9 +13,9 @@ export function loadLeafletMapAssets() {
     ]);
 }
 
-export function createLeafletMapHolder() {
+export function createLeafletMapHolder(mapProvider) {
     return {
-        mapProvider: 'openstreetmap',
+        mapProvider: mapProvider,
         dependencyLoaded: !!leafletHolder.leaflet,
         inited: false,
         defaultZoomLevel: 14,
@@ -38,11 +40,18 @@ export function createLeafletMapInstance(mapHolder, mapContainer, options) {
         attributionControl: false,
         zoomControl: false
     });
+    let mapTileSource = mapConstants.leafletTileSources[mapHolder.mapProvider];
 
-    const mapTileImageUrl = services.generateOpenStreetMapTileImageUrl();
+    if (settings.isMapDataFetchProxyEnabled()) {
+        const mapProxyTileImageUrl = services.generateMapProxyTileImageUrl(mapHolder.mapProvider);
+        mapTileSource = Object.assign({}, mapTileSource, {
+            tileUrlFormat: mapProxyTileImageUrl,
+            tileUrlSubDomains: ''
+        });
+    }
 
-    const tileLayer = leaflet.tileLayer(mapTileImageUrl.url, {
-        subdomains: mapTileImageUrl.subDomains,
+    const tileLayer = leaflet.tileLayer(mapTileSource.tileUrlFormat, {
+        subdomains: mapTileSource.tileUrlSubDomains,
         maxZoom: 19
     });
     tileLayer.addTo(leafletInstance);
@@ -53,16 +62,18 @@ export function createLeafletMapInstance(mapHolder, mapContainer, options) {
     });
     zoomControl.addTo(leafletInstance);
 
-    const attribution = leaflet.control.attribution({
-        prefix: false
-    });
-    attribution.addAttribution('&copy; <a href="http://www.openstreetmap.org/copyright" class="external" target="_blank">OpenStreetMap</a>');
-    attribution.addTo(leafletInstance);
+    if (mapTileSource.attribution) {
+        const attribution = leaflet.control.attribution({
+            prefix: false
+        });
+        attribution.addAttribution(mapTileSource.attribution);
+        attribution.addTo(leafletInstance);
+        mapHolder.leafletAttribution = attribution;
+    }
 
     mapHolder.leafletInstance = leafletInstance;
     mapHolder.leafletTileLayer = tileLayer;
     mapHolder.leafletZoomControl = zoomControl;
-    mapHolder.leafletAttribution = attribution;
     mapHolder.inited = true;
 }
 

src/lib/services.js

@@ -396,20 +396,9 @@ export default {
             ignoreError: !!ignoreError
         });
     },
-    generateOpenStreetMapTileImageUrl: () => {
-        if (settings.isMapDataFetchProxyEnabled()) {
-            const token = userState.getToken();
-
-            return {
-                url: api.baseProxyUrlPath + '/openstreetmap/tile/{z}/{x}/{y}.png?token=' + token,
-                subDomains: ''
-            };
-        } else {
-            return {
-                url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
-                subDomains: 'abc'
-            };
-        }
+    generateMapProxyTileImageUrl: (mapProvider) => {
+        const token = userState.getToken();
+        return `${api.baseProxyUrlPath}/map/tile/{z}/{x}/{y}.png?provider=${mapProvider}&token=${token}`;
     },
     generateGoogleMapJavascriptUrl: (language, callbackFnName) => {
         if (language) {