高德离线地图服务器搭建

下载瓦片

下载工具

仓库地址：https://gitee.com/CrimsonHu/java_map_download

百度网盘：https://pan.baidu.com/s/1CA7sdH6zL4OjJxVydKwrWQ 密码：mdve

操作指南

压缩包解压后如下：

双击 run.bat启动地图下载器
点击【瓦片预览】，设置【选择路径】（即下载路径），设置图片类型为PNG，选择瓦片类型为： /{z}/{x}/{y}.{image}类型

这一步，主要设置瓦片的下载路径以及瓦片格式。
在快速选择区域，选择需要下载的地图区域，点击确定定位到所选地图区域，并选择【高德地图】-> 【普通图-带标注】类型

这一步，主要是选择所需要的瓦片区域以及地图类型
点击【下载地图】，弹出【下载设置】提示框，

a. 选择需要下载的层级，一般0-18级

b. 设置命名风格，一般为 /{z}/{x}/{y}.{image}

c. 点击【下载】，即开始下载

瓦片下载成功：

部署离线瓦片服务

离线瓦片部署，可以使用任意静态资源服务器，也可以随前端项目一同打包部署。这里以Nginx作为静态瓦片服务器。Nginx的下载安装这里不再赘述。

打开Nginx配置文件nginx.conf，添加如下红框中的配置：
启动nginx即可。

前端使用示例

`leaflet`示例

这里使用Leaflet.ChineseTmsProviders对地图坐标进行纠偏。

示例代码：

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
        }

        html,
        body,
        #map {
            height: 100%;
        }
    </style>

    <!-- 引入leafletapi -->
    <link rel="stylesheet" href="./lib/leaflet.css" />
    <script src="./lib/leaflet.js"></script>
    
    <!-- 引入互联网地图插件 -->
    <script src="./lib/plugins/leaflet.ChineseTmsProviders.js"></script>

    <!-- 
        互联网地图纠偏插件
        需配合 leaflet.ChineseTmsProviders.js 插件使用
        无需js代码，引用后自动纠偏
        纠偏后的坐标为WGS84
    -->
    <script type="text/javascript" src='../dist/leaflet.mapCorrection.min.js'></script>

</head>

<body>
    <div id='map'></div>
</body>

<script type="text/javascript">

    var map = L.map('map', {
            center: [34.6196539, 112.4477046],
            zoom: 12
        });

    //添加底图
    L.tileLayer.chinaProvider('GaoDe.Normal.Map').addTo(map);

    //设置参照物
    L.marker([34.6196539, 112.4477046]).addTo(map).bindPopup('<p>洛阳市人民政府所在位置</p>').openPopup();
    
    
    map.on('click', e=>{
    L.popup().setLatLng(e.latlng).setContent(e.latlng.toString()).openOn(map)
})

</script>

</html>

注意

使用坐标纠偏插件时，需要修改插件中关于高德瓦片的加载地址(leaflet.ChineseTmsProviders.js):
这里纠偏后，使用的坐标为WGS84

`arcgis`示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS JS API + 高德地图</title>
  <link href="https://js.arcgis.com/4.27/esri/themes/light/main.css" rel="stylesheet">
  <script src="https://js.arcgis.com/4.27/"></script>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="viewDiv"></div>
 <div id="coordinateInfo"></div>
  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/BaseTileLayer",
      "esri/geometry/SpatialReference"
    ], function(Map, MapView, BaseTileLayer, SpatialReference) {
      // 高德地图矢量瓦片服务
      const gaodeLayer = new BaseTileLayer({
        urlTemplate: "http://localhost/tiles/{z}/{x}/{y}.png",
        tileInfo: {
          spatialReference: new SpatialReference({ wkid: 3857 }),
          rows: 256,
          cols: 256,
          origin: {
            x: -20037508.342787,
            y: 20037508.342787
          },
          lods: getLODs()
        },
        // generate the tile url for a given level, row and column
        getTileUrl: function(level, row, col) {
          return this.urlTemplate.replace("{z}", level).replace("{x}",
            col).replace("{y}", row);
        },
        maxZoom: 18,
        minZoom: 5,
        copyright: "© 高德地图"
      });

      // 创建地图并添加图层
      const map = new Map({
        layers: [gaodeLayer]
      });

      // 创建地图视图
      const view = new MapView({
        container: "viewDiv",
        map: map,
       // center: [116.3972, 39.9075], // 北京 
        center: [112.4477046, 34.6196539], //  洛阳市 [34.6196539, 112.4477046] 
       // center: [113.479473,34.766025], // 西流湖
        zoom: 12,
        constraints: {
            lods: getLODs(),
            maxZoom: 21,
            minZoom: 5
        }

      });
// 监听地图点击事件
      view.on("click", function(event) {
        // 获取点击位置（Web Mercator 坐标系）
        const mapPoint = event.mapPoint;
        
        // 转换为 WGS84 经纬度（EPSG:4326）
        let wgs84Point;
        if (mapPoint.spatialReference.wkid !== 4326) {
          wgs84Point = mapPoint //webMercatorUtils.webMercatorToGeographic(mapPoint);
        } else {
          wgs84Point = mapPoint;
        }
        
        // 格式化坐标（保留6位小数）
        const lng = wgs84Point.longitude.toFixed(6);
        const lat = wgs84Point.latitude.toFixed(6);
        
        // 在弹窗中显示坐标
        view.popup.open({
          title: "点击位置坐标",
          content: "<p><b>经度:</b> "+lng +"</p>            <p><b>纬度:</b> "+lat +"</p>            <p><b>缩放级别:</b> "+view.zoom.toFixed(1)+"</p>",
          location: mapPoint
        });
        
        // 在底部信息栏显示坐标
        document.getElementById("coordinateInfo").innerHTML = "经度: ${lng}, 纬度: ${lat}";
      });
    
      // 定义缩放级别
      function getLODs() {
        const lods = [];
        for (let i = 0; i <= 18; i++) {
          lods.push({
            level: i,
            resolution: 156543.033928041 / Math.pow(2, i),
            scale: 591657527.591555 / Math.pow(2, i)
          });
        }
        return lods;
      }
    });
  </script>
</body>
</html>

posted @ 2025-08-15 14:13 小张同学哈阅读(1343) 评论(0) 收藏举报

刷新页面返回顶部

高德离线地图服务器搭建

下载瓦片

下载工具

操作指南

部署离线瓦片服务

前端使用示例

leaflet示例

arcgis示例

公告

`leaflet`示例

`arcgis`示例