【WebGIS实例】(17)下载瓦片底图并实现离线加载——以天地图为例

前言

在有些项目中,会有部署到无法访问互联网的内网环境中,这时候就会有离线部署应用和地图服务等需求了。

本博客是本着交流学习的目的,分享一个离线瓦片地图的获取方案,以天地图为案例,实现步骤

  1. 安装 QGIS,在 QGIS 中加载天地图
  2. 下载天地图
  3. 通过 Nginx 发布地图的静态资源
  4. 通过地图框架加载资源

实现

1. 加载

在QGIS中新建XYZ瓦片地图:

在这里插入图片描述

  • 影像::https://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=您的密钥

  • 影像注记:https://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=您的密钥

2. 下载

在 QGIS 中,可以通过右键顶部工具栏打开面板,打开工具箱面板后在搜索框内搜索 XYZ,打开生成XYZ瓦片(目录) 功能

在这里插入图片描述

  1. 选择一个需要下载的范围:可以手动框选,也可以选择图层。比如说想要只下载广东省区域的天地图,则可以通过导入广东省的行政区划边界图层,范围直接选定该行政区划图层即可。
  2. 缩放级别:最小缩放级别一般是1,最大是18这取决于你加载的地图服务。实际下载时,因为数据量会很大,建议分批次下载,比如先下 1 到 12,然后下 12 到 17,最后下载 17 到18
  3. 其他选项默认即可,最后修改一下输出的目录路径。

于是,我们就得到了一堆分好了层级的天地图瓦片地图图片。

3. 发布

下载 nginx ,修改一下配置文件 nginx.conf

在这里插入图片描述

  server {
    listen 81;
    server_name localhost;

    location / {
      root  D:/Downloads/tdt/;
      autoindex on; # 打开目录浏览功能
      autoindex_exact_size off;
      autoindex_localtime on; 

      add_header Access-Control-Allow-Origin *;
      add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
      add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

      if ($request_method = 'OPTIONS') {  
        return 204;  
      }
    }
  }

  • 上面的 D:/Downloads/tdt/ 为离线地图图片存放路径的父级文件夹。

然后启动 nginx 服务,就可以通过 http://localhost:81/访问到地图图片了:

在这里插入图片描述

4. 加载服务

在 QGIS 下载完成同时,会生成一个通过 Leaflet 加载的 HTML 示例文件。

这里,我们通过 Mapbox GL JS 来加载:

代码实现

addLayer({
  type: "raster",
  id: "离线底图",
  source: {
    type: "raster",
    tiles: [
      "http://localhost:81/{z}/{x}/{y}.png", // 替换为你的本地服务器地址
    ],
    tileSize: 256, // 分辨率
  },
});

注:如果这一步出现了跨域的问题,你就可以在项目配置文件里加入一下代理。

最后

同样的,借助这个方案可以下载其他的 XYZ 瓦片服务。

Mapbox是一款强大的地图工具,支持通过矢量瓦片、GeoJSON等多种数据形式构建丰富的地理信息系统应用。下面简要介绍如何在Mapbox中实现瓦片底图和GeoJSON底图之间的互相切换。 ### 瓦片底图与GeoJSON底图切换 #### 基本步骤: 1. **初始化 Map** 需要在HTML页面引入`mapbox-gl.js`库创建一个基本的地图实例。 ```javascript const map = new mapboxgl.Map({ container: 'map', // HTML元素ID style: 'mapbox://styles/mapbox/streets-v11', center: [lng, lat], // 初始中心点坐标 zoom: 9 // 初始缩放级别 }); ``` 2. **加载 GeoJSON 数据作为覆盖层** 可以使用 `addSource()` 和 `addLayer()` 方法将GeoJSON数据添加到现有地图上,设置样式规则。 ```javascript map.addSource('geojson-source-id', { type: 'geojson', data: '/path/to/your.geojson' }); map.addLayer({ id: 'geojson-layer-id', type: 'fill', source: 'geojson-source-id', paint: { 'fill-color': '#088', 'fill-opacity': 0.8 } }); ``` 3. **动态切换底图风格** 使用 `setStyle()` 方法可以改变当前显示的瓦片底图风格(如街道视图或卫星影像)。如从默认街景切至暗黑主题: ```javascript function switchToDarkMode() { map.setStyle('mapbox://styles/mapbox/dark-v10'); } function switchToSatelliteView() { map.setStyle('mapbox://styles/mapbox/satellite-streets-v11'); } ``` 4. **移除或隐藏特定覆盖物** 当需要完全恢复只有瓦片底图的状态时,可以删除之前加入的所有自定义源及其关联层次结构: ```javascript if (map.getLayer('geojson-layer-id')) { map.removeLayer('geojson-layer-id'); } if (map.getSource('geojson-source-id')) { map.removeSource('geojson-source-id'); } ``` 5. **结合按钮操作完成交互功能** 最终把上述逻辑封装成事件处理器绑定给用户界面控件即可让其一键操控地图展示效果。 ```html <button onclick="switchToDarkMode()">切换到黑暗模式</button> <button onclick="switchToSatelliteView()">切换到卫星图像</button> ``` --- 以上就是关于如何利用Mapbox API制作具备简单互动性的WebGIS系统的概括说明啦!
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值