support baidu map

2026-05-15 15:37:33 +08:00 · 2023-06-17 17:48:39 +08:00
parent 3bae6e749a
commit 782e3a85f9
12 changed files with 312 additions and 77 deletions
@@ -0,0 +1,116 @@
+import { asyncLoadAssets } from "@/lib/misc.js";
+import services from "@/lib/services.js";
+import logger from '@/lib/logger.js';
+
+const baiduMapHolder = {
+    BMap: null,
+    BMAP_NAVIGATION_CONTROL_ZOOM: window.BMAP_NAVIGATION_CONTROL_ZOOM || 3,
+    BMAP_ANCHOR_TOP_LEFT: window.BMAP_ANCHOR_TOP_LEFT || 0,
+    COORDINATES_WGS84: window.COORDINATES_WGS84 || 1,
+    COORDINATES_BD09: window.COORDINATES_BD09 || 5
+};
+
+export function loadBaiduMapAssets() {
+    if (baiduMapHolder.BMap) {
+        return;
+    }
+
+    if (!window.onBMapCallback) {
+        window.onBMapCallback = () => {
+            baiduMapHolder.BMap = window.BMap;
+        };
+    }
+
+    return asyncLoadAssets('js', services.generateBaiduMapJavascriptUrl('onBMapCallback'));
+}
+
+export function createBaiduMapHolder() {
+    return {
+        mapProvider: 'baidumap',
+        dependencyLoaded: !!baiduMapHolder.BMap,
+        inited: false,
+        defaultZoomLevel: 15,
+        minZoomLevel: 1,
+        baiduMapInstance: null,
+        baiduMapConverter: null,
+        baiduMapNavigationControl: null,
+        baiduMapCenterMarker: null
+    };
+}
+
+export function createBaiduMapInstance(mapHolder, mapContainer) {
+    if (!baiduMapHolder.BMap) {
+        return null;
+    }
+
+    const BMap = baiduMapHolder.BMap;
+    const baiduMapInstance = new BMap.Map(mapContainer, {
+        maxZoom: 19
+    });
+    baiduMapInstance.enableScrollWheelZoom();
+
+    const baiduMapNavigationControl = new BMap.NavigationControl({
+        type: baiduMapHolder.BMAP_NAVIGATION_CONTROL_ZOOM,
+        anchor: baiduMapHolder.BMAP_ANCHOR_TOP_LEFT
+    });
+    baiduMapInstance.addControl(baiduMapNavigationControl);
+
+    mapHolder.baiduMapInstance = baiduMapInstance;
+    mapHolder.baiduMapConverter = new BMap.Convertor();
+    mapHolder.inited = true;
+}
+
+export function setBaiduMapCenterTo(mapHolder, center, zoomLevel) {
+    if (!baiduMapHolder.BMap || !mapHolder.baiduMapInstance) {
+        return;
+    }
+
+    const BMap = baiduMapHolder.BMap;
+    const centerPoint = new BMap.Point(center.longitude, center.latitude);
+
+    if (mapHolder.baiduMapConverter) {
+        mapHolder.baiduMapConverter.translate([ centerPoint ], baiduMapHolder.COORDINATES_WGS84, baiduMapHolder.COORDINATES_BD09, data => {
+            if (data.status !== 0) {
+                logger.warn('baidu map geo position convert failed');
+            }
+
+            const actualPoint = (data.status === 0 ? data.points[0] : centerPoint);
+            mapHolder.baiduMapInstance.centerAndZoom(actualPoint, zoomLevel);
+        });
+    } else {
+        mapHolder.baiduMapInstance.centerAndZoom(centerPoint, zoomLevel);
+    }
+}
+
+export function setBaiduMapCenterMaker(mapHolder, position) {
+    if (!baiduMapHolder.BMap || !mapHolder.baiduMapInstance) {
+        return;
+    }
+
+    const BMap = baiduMapHolder.BMap;
+    const markerPoint = new BMap.Point(position.longitude, position.latitude);
+
+    mapHolder.baiduMapConverter.translate([ markerPoint ], baiduMapHolder.COORDINATES_WGS84, baiduMapHolder.COORDINATES_BD09, data => {
+        if (data.status !== 0) {
+            logger.warn('baidu map geo position convert failed');
+        }
+
+        const actualPoint = (data.status === 0 ? data.points[0] : markerPoint);
+
+        if (!mapHolder.baiduMapCenterMarker) {
+            mapHolder.baiduMapCenterMarker = new BMap.Marker(actualPoint);
+            mapHolder.baiduMapInstance.addOverlay(mapHolder.baiduMapCenterMarker);
+        } else {
+            mapHolder.baiduMapCenterMarker.setPosition(actualPoint);
+        }
+    });
+}
+
+export function removeBaiduMapCenterMaker(mapHolder) {
+    if (!mapHolder.baiduMapInstance || !mapHolder.baiduMapCenterMarker) {
+        return;
+    }
+
+    mapHolder.baiduMapInstance.removeOverlay(mapHolder.baiduMapCenterMarker);
+    mapHolder.baiduMapCenterMarker = null;
+}
@@ -0,0 +1,85 @@
+import settings from "@/lib/settings.js";
+
+import {
+    loadLeafletMapAssets,
+    createLeafletMapHolder,
+    createLeafletMapInstance,
+    setLeafletMapCenterTo,
+    setLeafletMapCenterMaker,
+    removeLeafletMapCenterMaker
+} from './openstreetmap.js';
+
+import {
+    loadBaiduMapAssets,
+    createBaiduMapHolder,
+    createBaiduMapInstance,
+    setBaiduMapCenterTo,
+    setBaiduMapCenterMaker,
+    removeBaiduMapCenterMaker
+} from './baidumap.js';
+
+export function loadMapAssets() {
+    if (settings.getMapProvider() === 'openstreetmap') {
+        return loadLeafletMapAssets();
+    } else if (settings.getMapProvider() === 'baidumap') {
+        return loadBaiduMapAssets();
+    }
+}
+
+export function createMapHolder() {
+    if (settings.getMapProvider() === 'openstreetmap') {
+        return createLeafletMapHolder();
+    } else if (settings.getMapProvider() === 'baidumap') {
+        return createBaiduMapHolder();
+    } else {
+        return null;
+    }
+}
+
+export function initMapInstance(mapHolder, mapContainer, options) {
+    if (!mapHolder) {
+        return;
+    }
+
+    if (mapHolder.mapProvider === 'openstreetmap') {
+        createLeafletMapInstance(mapHolder, mapContainer, options);
+    } else if (mapHolder.mapProvider === 'baidumap') {
+        createBaiduMapInstance(mapHolder, mapContainer, options);
+    }
+}
+
+export function setMapCenterTo(mapHolder, center, zoomLevel) {
+    if (!mapHolder) {
+        return;
+    }
+
+    if (mapHolder.mapProvider === 'openstreetmap') {
+        setLeafletMapCenterTo(mapHolder, center, zoomLevel);
+    } else if (mapHolder.mapProvider === 'baidumap') {
+        setBaiduMapCenterTo(mapHolder, center, zoomLevel);
+    }
+}
+
+export function setMapCenterMarker(mapHolder, position) {
+    if (!mapHolder) {
+        return;
+    }
+
+    if (mapHolder.mapProvider === 'openstreetmap') {
+        setLeafletMapCenterMaker(mapHolder, position);
+    } else if (mapHolder.mapProvider === 'baidumap') {
+        setBaiduMapCenterMaker(mapHolder, position);
+    }
+}
+
+export function removeMapCenterMarker(mapHolder) {
+    if (!mapHolder) {
+        return;
+    }
+
+    if (mapHolder.mapProvider === 'openstreetmap') {
+        removeLeafletMapCenterMaker(mapHolder);
+    } else if (mapHolder.mapProvider === 'baidumap') {
+        removeBaiduMapCenterMaker(mapHolder);
+    }
+}
@@ -0,0 +1,107 @@
+import services from "@/lib/services.js";
+
+const leafletHolder = {
+    leaflet: null
+};
+
+export function loadLeafletMapAssets() {
+    return Promise.all([
+        import('leaflet/dist/leaflet.css'),
+        import('leaflet/dist/leaflet-src.esm.js').then(leaflet => leafletHolder.leaflet = leaflet)
+    ]);
+}
+
+export function createLeafletMapHolder() {
+    return {
+        mapProvider: 'openstreetmap',
+        dependencyLoaded: !!leafletHolder.leaflet,
+        inited: false,
+        defaultZoomLevel: 14,
+        minZoomLevel: 1,
+        leafletInstance: null,
+        leafletTileLayer: null,
+        leafletZoomControl: null,
+        leafletAttribution: null,
+        leafletCenterMarker: null
+    };
+}
+
+export function createLeafletMapInstance(mapHolder, mapContainer, options) {
+    if (!leafletHolder.leaflet) {
+        return null;
+    }
+
+    const leaflet = leafletHolder.leaflet;
+    const leafletInstance = leaflet.map(mapContainer, {
+        attributionControl: false,
+        zoomControl: false
+    });
+
+    const mapTileImageUrl = services.generateOpenStreetMapTileImageUrl();
+
+    const tileLayer = leaflet.tileLayer(mapTileImageUrl.url, {
+        subdomains: mapTileImageUrl.subDomains,
+        maxZoom: 19
+    });
+    tileLayer.addTo(leafletInstance);
+
+    const zoomControl = leaflet.control.zoom({
+        zoomInTitle: options.text.zoomIn,
+        zoomOutTitle: options.text.zoomOut
+    });
+    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);
+
+    mapHolder.leafletInstance = leafletInstance;
+    mapHolder.leafletTileLayer = tileLayer;
+    mapHolder.leafletZoomControl = zoomControl;
+    mapHolder.leafletAttribution = attribution;
+    mapHolder.inited = true;
+}
+
+export function setLeafletMapCenterTo(mapHolder, center, zoomLevel) {
+    if (!mapHolder.leafletInstance) {
+        return;
+    }
+
+    mapHolder.leafletInstance.setView([ center.latitude, center.longitude ], zoomLevel);
+}
+
+export function setLeafletMapCenterMaker(mapHolder, position) {
+    if (!leafletHolder.leaflet || !mapHolder.leafletInstance) {
+        return;
+    }
+
+    const leaflet = leafletHolder.leaflet;
+
+    if (!mapHolder.leafletCenterMarker) {
+        const markerIcon = leaflet.icon({
+            iconUrl: 'img/map-marker-icon.png',
+            iconRetinaUrl: 'img/map-marker-icon-2x.png',
+            iconSize: [25, 32],
+            iconAnchor: [12, 32],
+            shadowUrl: 'img/map-marker-shadow.png',
+            shadowSize: [41, 32]
+        });
+        mapHolder.leafletCenterMarker = leaflet.marker([ position.latitude, position.longitude ], {
+            icon: markerIcon
+        });
+        mapHolder.leafletCenterMarker.addTo(mapHolder.leafletInstance);
+    } else {
+        mapHolder.leafletCenterMarker.setLatLng([ position.latitude, position.longitude ]);
+    }
+}
+
+export function removeLeafletMapCenterMaker(mapHolder) {
+    if (!mapHolder.leafletInstance || !mapHolder.leafletCenterMarker) {
+        return;
+    }
+
+    mapHolder.leafletCenterMarker.remove();
+    mapHolder.leafletCenterMarker = null;
+}