map provider supports TianDiTu

src/consts/map.js

@@ -71,6 +71,29 @@ const leafletTileSources = {
         defaultZoomLevel: 14,
         website: 'https://tomtom.com',
         attribution : '<a href="https://tomtom.com" class="external" target="_blank">&copy;  1992 - 2023 TomTom.</a>'
+    },
+    'tianditu': {
+        tileUrlFormat: 'https://t{s}.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}',
+        tileUrlSubDomains: '01234567',
+        tileUrlExtraParams: [
+            {
+                paramName: 'tk',
+                paramValueType: 'tianditu_key'
+            }
+        ],
+        annotationUrlFormat: 'https://t{s}.tianditu.gov.cn/cva_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}',
+        annotationUrlSubDomains: '01234567',
+        annotationUrlExtraParams: [
+            {
+                paramName: 'tk',
+                paramValueType: 'tianditu_key'
+            }
+        ],
+        minZoom: 1,
+        maxZoom: 18,
+        defaultZoomLevel: 14,
+        website: 'https://www.tianditu.gov.cn',
+        attribution : '<a href="https://www.tianditu.gov.cn" class="external" target="_blank">天地图</a>'
     }
 }
 

src/lib/map/leaflet.js

@@ -5,7 +5,8 @@ import {
     getCustomMapMinZoomLevel,
     getCustomMapMaxZoomLevel,
     getCustomMapDefaultZoomLevel,
-    getTomTomMapAPIKey
+    getTomTomMapAPIKey,
+    getTianDiTuMapAPIKey
 } from '@/lib/server_settings.js';
 import services from '@/lib/services.js';
 
@@ -35,6 +36,7 @@ export function createLeafletMapHolder(mapProvider) {
         minZoomLevel: mapProvider !== 'custom' ? mapTileSource.minZoom : getCustomMapMinZoomLevel(),
         leafletInstance: null,
         leafletTileLayer: null,
+        leafletAnnotationLayer: null,
         leafletZoomControl: null,
         leafletAttribution: null,
         leafletCenterMarker: null
@@ -65,21 +67,7 @@ export function createLeafletMapInstance(mapHolder, mapContainer, options) {
         mapTileSource.tileUrlFormat = services.generateMapProxyTileImageUrl(mapHolder.mapProvider, options.language);
         mapTileSource.tileUrlSubDomains = '';
     } else if (mapTileSource.tileUrlExtraParams) {
-        const params = [];
-
-        for (let i = 0; i < mapTileSource.tileUrlExtraParams.length; i++) {
-            const param = mapTileSource.tileUrlExtraParams[i];
-
-            if (param.paramValueType === 'tomtom_key') {
-                params.push(param.paramName + '=' + getTomTomMapAPIKey());
-            } else if (param.paramValueType === 'language' && options.language) {
-                params.push(param.paramName + '=' + options.language);
-            }
-        }
-
-        if (params.length) {
-            mapTileSource.tileUrlFormat = mapTileSource.tileUrlFormat + '?' + params.join('&');
-        }
+        mapTileSource.tileUrlFormat = getFinalUrlFormat(mapTileSource.tileUrlFormat, mapTileSource.tileUrlExtraParams, options);
     }
 
     const tileLayer = leaflet.tileLayer(mapTileSource.tileUrlFormat, {
@@ -89,6 +77,24 @@ export function createLeafletMapInstance(mapHolder, mapContainer, options) {
     });
     tileLayer.addTo(leafletInstance);
 
+    if (mapTileSource.annotationUrlFormat) {
+        if (isMapDataFetchProxyEnabled()) {
+            mapTileSource.annotationUrlFormat = services.generateMapProxyAnnotationImageUrl(mapHolder.mapProvider, options.language);
+            mapTileSource.annotationUrlSubDomains = '';
+        } else if (mapTileSource.annotationUrlExtraParams) {
+            mapTileSource.annotationUrlFormat = getFinalUrlFormat(mapTileSource.annotationUrlFormat, mapTileSource.annotationUrlExtraParams, options);
+        }
+
+        const annotationLayer = leaflet.tileLayer(mapTileSource.annotationUrlFormat, {
+            subdomains: mapTileSource.annotationUrlSubDomains,
+            maxZoom: mapTileSource.maxZoom,
+            minZoom: mapTileSource.minZoom
+        });
+        annotationLayer.addTo(leafletInstance);
+
+        mapHolder.leafletAnnotationLayer = annotationLayer;
+    }
+
     const zoomControl = leaflet.control.zoom({
         zoomInTitle: options.text.zoomIn,
         zoomOutTitle: options.text.zoomOut
@@ -161,3 +167,29 @@ function createCustomMapSource() {
         defaultZoomLevel: getCustomMapDefaultZoomLevel()
     };
 }
+
+function getFinalUrlFormat(urlFormat, urlExtraParams, options) {
+    const params = [];
+
+    for (let i = 0; i < urlExtraParams.length; i++) {
+        const param = urlExtraParams[i];
+
+        if (param.paramValueType === 'tomtom_key') {
+            params.push(param.paramName + '=' + getTomTomMapAPIKey());
+        } else if (param.paramValueType === 'tianditu_key') {
+            params.push(param.paramName + '=' + getTianDiTuMapAPIKey());
+        } else if (param.paramValueType === 'language' && options.language) {
+            params.push(param.paramName + '=' + options.language);
+        }
+    }
+
+    if (params.length) {
+        if (urlFormat.indexOf('?') >= 0) {
+            urlFormat = urlFormat + '&' + params.join('&');
+        } else {
+            urlFormat = urlFormat + '?' + params.join('&');
+        }
+    }
+
+    return urlFormat;
+}

src/lib/server_settings.js

@@ -76,6 +76,10 @@ export function getTomTomMapAPIKey() {
     return getServerDecodedSetting('tmak');
 }
 
+export function getTianDiTuMapAPIKey() {
+    return getServerDecodedSetting('tdak');
+}
+
 export function getGoogleMapAPIKey() {
     return getServerDecodedSetting('gmak');
 }

src/lib/services.js

@@ -525,6 +525,16 @@ export default {
 
         return url;
     },
+    generateMapProxyAnnotationImageUrl: (mapProvider, language) => {
+        const token = userState.getToken();
+        let url = `${apiConstants.baseProxyUrlPath}/map/annotation/{z}/{x}/{y}.png?provider=${mapProvider}&token=${token}`;
+
+        if (language) {
+            url = url + `&language=${language}`;
+        }
+
+        return url;
+    },
     generateGoogleMapJavascriptUrl: (language, callbackFnName) => {
         let url = `${apiConstants.googleMapJavascriptUrl}?key=${getGoogleMapAPIKey()}&libraries=core,marker&callback=${callbackFnName}`;
 

src/locales/en.js

@@ -580,6 +580,7 @@ export default {
         'cyclosm': 'CyclOSM',
         'cartodb': 'CARTO',
         'tomtom': 'TomTom',
+        'tianditu': 'TianDiTu',
         'googlemap': 'Google Map',
         'baidumap': 'Baidu Map',
         'amap': 'Amap',

src/locales/zh_Hans.js

@@ -580,6 +580,7 @@ export default {
         'cyclosm': 'CyclOSM',
         'cartodb': 'CARTO',
         'tomtom': 'TomTom',
+        'tianditu': '天地图',
         'googlemap': 'Google 地图',
         'baidumap': '百度地图',
         'amap': '高德地图',