Leaflet叠加不同坐标系地图的实现方法与技巧

// Leaflet默认投影设置
const map = L.map('map').setView([39.9042, 116.4074], 13);
 
// WGS84坐标系底图
const osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
});
 
// 问题：直接叠加GCJ02数据会出现偏移
const gcj02Marker = L.marker([39.9042, 116.4074]).addTo(map);
// 实际位置会有50-700米的偏移！

/**
 * WGS84转GCJ02坐标系转换
 * @param {number} lng - 经度
 * @param {number} lat - 纬度  
 * @returns {Object} 转换后的坐标
 */
function wgs84ToGcj02(lng, lat) {
    const PI = Math.PI;
    const X_PI = (PI * 3000.0) / 180.0;
    const A = 6378245.0;
    const EE = 0.00669342162296594323;
    
    function transformLat(lng, lat) {
        let ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 
                  0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
        ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
        ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;
        ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;
        return ret;
    }
    
    function transformLng(lng, lat) {
        let ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 
                  0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
        ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
        ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;
        ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;
        return ret;
    }
    
    // 判断是否在中国境外
    if (lng < 72.004 || lng > 137.8347 || lat < 0.8293 || lat > 55.8271) {
        return { lng: lng, lat: lat };
    }
    
    let dlat = transformLat(lng - 105.0, lat - 35.0);
    let dlng = transformLng(lng - 105.0, lat - 35.0);
    const radlat = lat / 180.0 * PI;
    let magic = Math.sin(radlat);
    magic = 1 - EE * magic * magic;
    const sqrtmagic = Math.sqrt(magic);
    dlat = (dlat * 180.0) / ((A * (1 - EE)) / (magic * sqrtmagic) * PI);
    dlng = (dlng * 180.0) / (A / sqrtmagic * Math.cos(radlat) * PI);
    
    return {
        lng: lng + dlng,
        lat: lat + dlat
    };
}
 
/**
 * GCJ02转WGS84
 */
function gcj02ToWgs84(lng, lat) {
    const gcj = wgs84ToGcj02(lng, lat);
    return {
        lng: lng * 2 - gcj.lng,
        lat: lat * 2 - gcj.lat
    };
}

/**
 * 支持坐标系转换的自定义图层
 */
class CoordinateTransformLayer extends L.Layer {
    constructor(urlTemplate, options = {}) {
        super();
        this._urlTemplate = urlTemplate;
        this._coordinateSystem = options.coordinateSystem || 'wgs84';
        this._opacity = options.opacity || 1;
        this._zIndex = options.zIndex || 1;
    }
    
    onAdd(map) {
        this._map = map;
        this._initContainer();
        this._update();
    }
    
    onRemove(map) {
        if (this._container) {
            map.getPanes().overlayPane.removeChild(this._container);
        }
    }
    
    _initContainer() {
        this._container = L.DomUtil.create('div', 'leaflet-coordinate-layer');
        this._container.style.position = 'absolute';
        this._container.style.opacity = this._opacity;
        this._container.style.zIndex = this._zIndex;
        
        this._map.getPanes().overlayPane.appendChild(this._container);
    }
    
    _update() {
        const bounds = this._map.getBounds();
        const zoom = this._map.getZoom();
        
        // 根据坐标系转换边界
        const transformedBounds = this._transformBounds(bounds);
        
        // 加载瓦片
        this._loadTiles(transformedBounds, zoom);
    }
    
    _transformBounds(bounds) {
        if (this._coordinateSystem === 'gcj02') {
            const sw = wgs84ToGcj02(bounds.getWest(), bounds.getSouth());
            const ne = wgs84ToGcj02(bounds.getEast(), bounds.getNorth());
            return L.latLngBounds([sw.lat, sw.lng], [ne.lat, ne.lng]);
        }
        return bounds;
    }
    
    _loadTiles(bounds, zoom) {
        // 实现瓦片加载逻辑
        const tiles = this._getTileCoords(bounds, zoom);
        
        tiles.forEach(tile => {
            const tileUrl = this._getTileUrl(tile.x, tile.y, tile.z);
            const tileImg = new Image();
            tileImg.src = tileUrl;
            tileImg.style.position = 'absolute';
            tileImg.style.left = tile.left + 'px';
            tileImg.style.top = tile.top + 'px';
            
            this._container.appendChild(tileImg);
        });
    }
    
    _getTileCoords(bounds, zoom) {
        const tiles = [];
        const tileSize = 256;
        const northWest = this._map.project(bounds.getNorthWest(), zoom);
        const southEast = this._map.project(bounds.getSouthEast(), zoom);
        
        const minX = Math.floor(northWest.x / tileSize);
        const maxX = Math.floor(southEast.x / tileSize);
        const minY = Math.floor(northWest.y / tileSize);
        const maxY = Math.floor(southEast.y / tileSize);
        
        for (let x = minX; x <= maxX; x++) {
            for (let y = minY; y <= maxY; y++) {
                const tilePos = new L.Point(x * tileSize, y * tileSize);
                const tilePosProjected = this._map.unproject(tilePos, zoom);
                
                tiles.push({
                    x: x,
                    y: y,
                    z: zoom,
                    left: x * tileSize - northWest.x,
                    top: y * tileSize - northWest.y
                });
            }
        }
        
        return tiles;
    }
    
    _getTileUrl(x, y, z) {
        return this._urlTemplate
            .replace('{x}', x)
            .replace('{y}', y)
            .replace('{z}', z);
    }
}

/**
 * 多坐标系地图叠加管理器
 */
class MultiCoordinateMapManager {
    constructor(map) {
        this._map = map;
        this._layers = new Map();
        this._coordinateTransforms = {
            'wgs84-gcj02': wgs84ToGcj02,
            'gcj02-wgs84': gcj02ToWgs84
        };
    }
    
    /**
     * 添加图层
     */
    addLayer(id, urlTemplate, options = {}) {
        const layer = new CoordinateTransformLayer(urlTemplate, options);
        this._layers.set(id, layer);
        this._map.addLayer(layer);
        
        // 使用TRAE IDE的智能提示功能，快速定位图层配置
        console.log(`图层 ${id} 已添加，坐标系：${options.coordinateSystem || 'wgs84'}`);
        
        return layer;
    }
    
    /**
     * 移除图层
     */
    removeLayer(id) {
        const layer = this._layers.get(id);
        if (layer) {
            this._map.removeLayer(layer);
            this._layers.delete(id);
        }
    }
    
    /**
     * 切换图层可见性
     */
    toggleLayer(id) {
        const layer = this._layers.get(id);
        if (layer) {
            if (this._map.hasLayer(layer)) {
                this._map.removeLayer(layer);
            } else {
                this._map.addLayer(layer);
            }
        }
    }
    
    /**
     * 坐标转换
     */
    transformCoordinate(lng, lat, fromSystem, toSystem) {
        const transformKey = `${fromSystem}-${toSystem}`;
        const transformFunc = this._coordinateTransforms[transformKey];
        
        if (transformFunc) {
            return transformFunc(lng, lat);
        }
        
        console.warn(`未找到坐标转换函数：${transformKey}`);
        return { lng, lat };
    }
    
    /**
     * 同步所有图层
     */
    syncLayers() {
        this._layers.forEach((layer, id) => {
            layer._update();
        });
    }
}
 
## 04｜TRAE IDE在地图开发中的优势
 
### 智能代码补全与实时预览
 
在使用TRAE IDE进行地图开发时，其强大的AI助手功能可以显著提升开发效率：
 
```javascript
// TRAE IDE的智能提示功能，自动补全坐标转换函数
// 输入 "wgs84ToGcj" 时，IDE会自动提示完整函数名和参数
const convertedCoord = wgs84ToGcj02(lng, lat);
 
// 实时错误检测，避免常见的坐标系混用错误
// TRAE IDE会高亮显示潜在问题：
// ⚠️ 警告：在GCJ02图层上使用了WGS84坐标
const marker = L.marker([39.9042, 116.4074]); // IDE会提示坐标系不匹配

// 在TRAE IDE中，可以同时打开多个相关文件：
// - coordinate-transforms.js (坐标转换函数)
// - map-config.json (地图配置)
// - layer-manager.js (图层管理器)
// - index.html (主页面)
 
// IDE的智能重构功能可以确保所有文件中的坐标系引用保持一致
class MapConfig {
    constructor() {
        this.baseCoordinateSystem = 'wgs84'; // 修改这里，IDE会自动更新所有引用
        this.overlaySystems = ['gcj02', 'bd09'];
    }
}

// 使用TRAE IDE的性能分析器监控地图渲染性能
const performanceMonitor = {
    startTime: performance.now(),
    
    trackTileLoading() {
        // IDE可以显示每个瓦片的加载时间和坐标转换耗时
        console.time('coordinate-transform');
        const converted = wgs84ToGcj02(lng, lat);
        console.timeEnd('coordinate-transform'); // TRAE IDE会在调试面板显示耗时
    },
    
    analyzeLayerOverlap() {
        // 分析多图层叠加时的性能瓶颈
        // TRAE IDE会高亮显示性能热点代码
    }
};

/**
 * 坐标转换缓存管理器
 * 避免重复计算相同的坐标转换
 */
class CoordinateTransformCache {
    constructor(maxSize = 10000) {
        this.cache = new Map();
        this.maxSize = maxSize;
        this.accessCount = 0;
        this.hitCount = 0;
    }
    
    getCacheKey(lng, lat, fromSystem, toSystem) {
        return `${fromSystem}-${toSystem}-${lng.toFixed(6)}-${lat.toFixed(6)}`;
    }
    
    transform(lng, lat, fromSystem, toSystem) {
        const key = this.getCacheKey(lng, lat, fromSystem, toSystem);
        this.accessCount++;
        
        if (this.cache.has(key)) {
            this.hitCount++;
            return this.cache.get(key);
        }
        
        // 执行转换
        const result = this.performTransform(lng, lat, fromSystem, toSystem);
        
        // 缓存结果
        if (this.cache.size >= this.maxSize) {
            // LRU策略：删除最久未使用的项
            const firstKey = this.cache.keys().next().value;
            this.cache.delete(firstKey);
        }
        
        this.cache.set(key, result);
        return result;
    }
    
    performTransform(lng, lat, fromSystem, toSystem) {
        // 实际的坐标转换逻辑
        const transformKey = `${fromSystem}-${toSystem}`;
        const transformFunc = this.getTransformFunction(transformKey);
        
        if (transformFunc) {
            return transformFunc(lng, lat);
        }
        
        return { lng, lat };
    }
    
    getHitRate() {
        return this.accessCount > 0 ? (this.hitCount / this.accessCount * 100).toFixed(2) + '%' : '0%';
    }
    
    clear() {
        this.cache.clear();
        this.accessCount = 0;
        this.hitCount = 0;
    }
}

/**
 * 智能瓦片加载器
 * 根据视图变化动态调整瓦片加载策略
 */
class SmartTileLoader {
    constructor(map, options = {}) {
        this.map = map;
        this.loadingTiles = new Set();
        this.loadedTiles = new Map();
        this.maxConcurrentLoads = options.maxConcurrentLoads || 6;
        this.retryAttempts = options.retryAttempts || 3;
        this.retryDelay = options.retryDelay || 1000;
        
        this.setupEventListeners();
    }
    
    setupEventListeners() {
        this.map.on('moveend', this.onMapMoveEnd, this);
        this.map.on('zoomend', this.onMapZoomEnd, this);
    }
    
    onMapMoveEnd() {
        this.updateTileLoading();
    }
    
    onMapZoomEnd() {
        // 缩放级别变化时，清除远距离瓦片缓存
        this.clearDistantTiles();
        this.updateTileLoading();
    }
    
    async loadTile(tileUrl, tileCoord) {
        const tileKey = this.getTileKey(tileCoord);
        
        if (this.loadedTiles.has(tileKey)) {
            return this.loadedTiles.get(tileKey);
        }
        
        if (this.loadingTiles.has(tileKey)) {
            return; // 正在加载中
        }
        
        if (this.loadingTiles.size >= this.maxConcurrentLoads) {
            // 等待空闲槽位
            await this.waitForAvailableSlot();
        }
        
        this.loadingTiles.add(tileKey);
        
        try {
            const image = await this.loadImageWithRetry(tileUrl);
            this.loadedTiles.set(tileKey, image);
            return image;
        } catch (error) {
            console.error(`瓦片加载失败: ${tileUrl}`, error);
        } finally {
            this.loadingTiles.delete(tileKey);
        }
    }
    
    async loadImageWithRetry(url) {
        for (let attempt = 0; attempt < this.retryAttempts; attempt++) {
            try {
                return await this.loadImage(url);
            } catch (error) {
                if (attempt === this.retryAttempts - 1) {
                    throw error;
                }
                await this.delay(this.retryDelay * (attempt + 1));
            }
        }
    }
    
    loadImage(url) {
        return new Promise((resolve, reject) => {
            const img = new Image();
            img.onload = () => resolve(img);
            img.onerror = reject;
            img.src = url;
        });
    }
    
    getTileKey(tileCoord) {
        return `${tileCoord.z}-${tileCoord.x}-${tileCoord.y}`;
    }
    
    clearDistantTiles() {
        const currentBounds = this.map.getBounds();
        const buffer = 0.5; // 保留边界外0.5度的缓冲区域
        
        for (const [key, tile] of this.loadedTiles) {
            const tileBounds = this.getTileBounds(tile);
            if (!this.boundsIntersect(tileBounds, currentBounds, buffer)) {
                this.loadedTiles.delete(key);
            }
        }
    }
    
    waitForAvailableSlot() {
        return new Promise(resolve => {
            const checkSlot = () => {
                if (this.loadingTiles.size < this.maxConcurrentLoads) {
                    resolve();
                } else {
                    setTimeout(checkSlot, 50);
                }
            };
            checkSlot();
        });
    }
    
    delay(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
    
    // 辅助方法
    getTileBounds(tile) {
        // 实现瓦片边界计算
        return {};
    }
    
    boundsIntersect(bounds1, bounds2, buffer) {
        // 实现边界相交检测
        return true;
    }
}

/**
 * 坐标系叠加常见问题处理
 */
class CoordinateSystemProblemSolver {
    
    /**
     * 解决图层偏移问题
     */
    static fixLayerOffset(layer, offsetX = 0, offsetY = 0) {
        // 应用CSS变换修正偏移
        const container = layer.getContainer();
        if (container) {
            container.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
        }
    }
    
    /**
     * 处理瓦片加载失败
     */
    static handleTileError(tile, error) {
        console.warn('瓦片加载失败:', tile.src, error);
        
        // 显示占位图或降级处理
        tile.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjU2IiBoZWlnaHQ9IjI1NiIgZmlsbD0iI2VlZSIvPjx0ZXh0IHg9IjUwJSIgeT0iNTAlIiBmb250LXNpemU9IjE0IiBmaWxsPSIjOTk5IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkeT0iLjNlbSI+5pWw5o2u5Zu+54mH5Yqg6L295aSx6LSlPC90ZXh0Pjwvc3ZnPg==';
    }
    
    /**
     * 优化大数据量渲染
     */
    static optimizeLargeDataset(map, data, options = {}) {
        const maxMarkers = options.maxMarkers || 1000;
        const clusterDistance = options.clusterDistance || 60;
        
        if (data.length > maxMarkers) {
            // 使用聚合算法
            return this.clusterData(data, clusterDistance);
        }
        
        // 直接渲染
        return data;
    }
    
    /**
     * 处理跨域问题
     */
    static handleCORS(url) {
        // 添加时间戳避免缓存
        const timestamp = new Date().getTime();
        return url + (url.includes('?') ? '&' : '?') + '_t=' + timestamp;
    }
}

// 使用TRAE IDE创建完整的地图应用
class MultiCoordinateMapApplication {
    constructor(containerId) {
        this.map = L.map(containerId).setView([39.9042, 116.4074], 10);
        this.layerManager = new MultiCoordinateMapManager(this.map);
        this.tileLoader = new SmartTileLoader(this.map);
        this.transformCache = new CoordinateTransformCache();
        
        this.initializeBaseLayers();
        this.initializeOverlays();
        this.setupControls();
        
        // TRAE IDE的调试面板会显示初始化状态
        console.log('多坐标系地图应用初始化完成');
    }
    
    initializeBaseLayers() {
        // WGS84底图
        this.layerManager.addLayer('osm', 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            coordinateSystem: 'wgs84',
            opacity: 1,
            zIndex: 1
        });
        
        // GCJ02图层（高德）
        this.layerManager.addLayer('amap', 'https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
            coordinateSystem: 'gcj02',
            opacity: 0.7,
            zIndex: 2
        });
    }
    
    initializeOverlays() {
        // 添加标记点（自动处理坐标转换）
        const beijingCoord = { lng: 116.4074, lat: 39.9042 };
        
        // WGS84标记
        const wgs84Marker = L.marker([beijingCoord.lat, beijingCoord.lng])
            .bindPopup('北京 (WGS84坐标系)')
            .addTo(this.map);
        
        // GCJ02标记（转换后）
        const gcj02Coord = this.transformCache.transform(
            beijingCoord.lng, 
            beijingCoord.lat, 
            'wgs84', 
            'gcj02'
        );
        
        const gcj02Marker = L.marker([gcj02Coord.lat, gcj02Coord.lng])
            .bindPopup('北京 (GCJ02坐标系)')
            .addTo(this.map);
        
        // 连接两个标记，显示偏移效果
        const polyline = L.polyline([
            [beijingCoord.lat, beijingCoord.lng],
            [gcj02Coord.lat, gcj02Coord.lng]
        ], {
            color: 'red',
            weight: 3,
            opacity: 0.8,
            dashArray: '10, 10'
        }).bindPopup('坐标系偏移示意').addTo(this.map);
    }
    
    setupControls() {
        // 图层切换控制
        const baseLayers = {
            'OpenStreetMap': this.layerManager._layers.get('osm'),
            '高德地图': this.layerManager._layers.get('amap')
        };
        
        L.control.layers(baseLayers).addTo(this.map);
        
        // 坐标显示控制
        const coordDisplay = L.control({ position: 'bottomright' });
        coordDisplay.onAdd = () => {
            const div = L.DomUtil.create('div', 'coordinate-display');
            div.style.background = 'white';
            div.style.padding = '5px';
            div.style.border = '1px solid #ccc';
            div.innerHTML = '移动鼠标查看坐标';
            
            this.map.on('mousemove', (e) => {
                const wgs84LatLng = e.latlng;
                const gcj02LatLng = this.transformCache.transform(
                    wgs84LatLng.lng, 
                    wgs84LatLng.lat, 
                    'wgs84', 
                    'gcj02'
                );
                
                div.innerHTML = `
                    <div>WGS84: ${wgs84LatLng.lat.toFixed(6)}, ${wgs84LatLng.lng.toFixed(6)}</div>
                    <div>GCJ02: ${gcj02LatLng.lat.toFixed(6)}, ${gcj02LatLng.lng.toFixed(6)}</div>
                `;
            });
            
            return div;
        };
        
        coordDisplay.addTo(this.map);
    }
    
    /**
     * 获取性能统计
     */
    getPerformanceStats() {
        return {
            cacheHitRate: this.transformCache.getHitRate(),
            loadedTiles: this.tileLoader.loadedTiles.size,
            loadingTiles: this.tileLoader.loadingTiles.size,
            totalLayers: this.layerManager._layers.size
        };
    }
}
 
// 初始化应用
const app = new MultiCoordinateMapApplication('map');
 
// 每5秒输出性能统计
setInterval(() => {
    const stats = app.getPerformanceStats();
    console.log('性能统计:', stats);
}, 5000);