无人机高清地图数据加载到百度高德地图问题无人机高清地图数据加载到百度高德地图问题最近项目中客户要求地图要加载他们自己购

无人机高清地图数据加载到百度高德地图问题

最近项目中客户要求地图要加载他们自己购买的无人机高清地图数据，给我一张上百兆的高清地图图片，我深入研究了一下，发现不论高德还是百度的对于这块的支持都是采用瓦片数据流自定义图层实现的。

首先我们需把大文件图片转换为瓦片数据，具体可以采用MapCutter工具实现，如下图所示：

具体使用教程可以上网查询，基本步骤就是： 1、上传图片，点击下一步 2、拖拽图片，把图片放到地图上准确位置 3、缩放图片大小和尺寸，与卫星底图尽量重合 4、点击切图即可

如果有多张图片，可合并切片。

切图完成后，会在图片当前目录生成1份切图文件

把文件拖拽到web服务目录下,即可预览效果

注意事项： 1、地图级别范围，建议选择15-21 2、地图类型根据自己使用的地图选择 3、地图key填写对应申请的地图应用

导出文件里的html代码可直接预览切图效果，可直接用于项目中，

具体代码如下：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style>
        body, html, #map {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=需申请百度应用key"></script>
    <title>MapTile</title>
</head>
<body>
    <div id="map"></div>
</body>
</html>
<script type="text/javascript">
    var showRect = true;
    var nameFormat = "{x}_{y}";
    var ext = ".png";

    // 百度地图
    var map = new BMap.Map('map', { mapType: BMAP_HYBRID_MAP, minZoom: 10, maxZoom: 21 });
    map.centerAndZoom(new BMap.Point(108.052929252631, 29.9402328298263), 16);
    map.enableScrollWheelZoom();
    map.enableDoubleClickZoom();
    map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT }));
    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.MapTypeControl({
        mapTypes: [
            BMAP_NORMAL_MAP,
            BMAP_SATELLITE_MAP,
            BMAP_HYBRID_MAP
        ]
    }));

    // 增加瓦片图层
    var tileLayer = new BMap.TileLayer();
    tileLayer.getTilesUrl = function(tileCoord, zoom) {
        var name = nameFormat
            .replace("{x}", tileCoord.x)
            .replace("{y}", tileCoord.y)
            .replace("{z}", zoom)
            ;
        return 'tiles/' + zoom + '/' + name + ext;
    }
    map.addTileLayer(tileLayer);

    // 增加矩形图层
    if (showRect) {
        var path1 = [
            new BMap.Point(108.035681786845, 29.9570858631789),
            new BMap.Point(108.070176718417, 29.9570858631789),
            new BMap.Point(108.070176718417, 29.9233797964738),
            new BMap.Point(108.035681786845, 29.9233797964738),
            new BMap.Point(108.035681786845, 29.9570858631789)
        ];
        var polyline = new BMap.Polyline(path1, { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 });
        map.addOverlay(polyline);
    }
</script>