JSAPITHREE-自定义瓦片服务加载

本章将介绍如何使用 GeoServer 发布 GeoTIFF 栅格瓦片服务，并通过 Baidu JSAPI THREE（MapVThree）加载并展示这些瓦片服务。我们将从服务发布、跨域配置，到前端接入一步一步详解。

🧱 一、瓦片服务发布（基于 GeoServer）

1. 环境准备

安装 GeoServer

请根据你的 Java 版本选择合适的 GeoServer 版本：

如果你使用 Java 8 ，推荐使用 GeoServer 2.18.0
从 2.19.0 起 GeoServer 不再支持 Java 8，Java 11+ 可选 2.26.0+

安装教程参考：

👉 GeoServer 安装教程

启动 GeoServer

GeoServer 安装目录下的 bin 文件夹中包含两个脚本：

startup.bat：启动 GeoServer（双击即可运行）
shutdown.bat：关闭服务

启动成功后访问：

bash 复制代码

http://localhost:8080/geoserver

2. 准备 GeoTIFF 数据

推荐使用公开的 GeoTIFF 数据源：

平台	内容
NASA Earthdata	MODIS/Landsat 遥感数据
Natural Earth	简化世界地图、自然地理数据
OpenTopography	高精度全球/区域 DEM 数据

本示例使用的是 Natural Earth 提供的全球栅格图：

👉 10m Natural Earth II Raster

3. 在 GeoServer 中发布 GeoTIFF

第一步：创建工作区

管理后台 → 「工作区」 →「添加新的工作区」
名称：myws
命名空间 URI：http://example.com/myws

第二步：添加 GeoTIFF 数据存储

左侧菜单 →「数据存储」→「添加新的存储」
选择类型：GeoTIFF
配置：
- 工作区：myws
- 数据源名称：mytiff
- 文件路径：
  javascript 复制代码
```
file:C:/GeoData/my.tif
```
点击「保存」

第三步：发布图层

保存数据存储后，点击「发布」
图层名称将自动生成（如：geotiff_coverage）
设置边界和坐标系（建议使用 EPSG:4326 或 EPSG:3857）
点击「保存」

此时图层已成功发布，可在「图层预览」中查看。

4. 获取 XYZ 瓦片服务地址

GeoServer 默认会通过 GeoWebCache 提供瓦片服务，我们可以直接访问以下链接：

ruby 复制代码

http://localhost:8080/geoserver/gwc/service/tms/1.0.0/myws:geotiff_coverage@EPSG:900913@png/{z}/{x}/{y}.png

注：EPSG:900913 等价于 EPSG:3857（Web Mercator）

测试示例：

ruby 复制代码

http://localhost:8080/geoserver/gwc/service/tms/1.0.0/myws:geotiff_coverage@EPSG:900913@png/1/1/1.png

5. 跨域访问设置（CORS）

浏览器默认会阻止不同端口或域名之间的请求，因此我们需要手动开启跨域：

修改 `web.xml`（路径）：

bash 复制代码

<GeoServer安装目录>/webapps/geoserver/WEB-INF/web.xml

添加以下配置：

xml 复制代码

<filter>
  <filter-name>cross-origin</filter-name>
  <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
  <init-param>
    <param-name>allowedOrigins</param-name>
    <param-value>*</param-value>
  </init-param>
  <init-param>
    <param-name>allowedMethods</param-name>
    <param-value>GET,POST,PUT,DELETE,HEAD,OPTIONS</param-value>
  </init-param>
  <init-param>
    <param-name>allowedHeaders</param-name>
    <param-value>*</param-value>
  </init-param>
</filter>

<filter-mapping>
  <filter-name>cross-origin</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

然后 重启 GeoServer，CORS 设置即可生效。

瓦片服务加载展示（mapvthree）

官方文档：

👉 JSAPI THREE - 加载瓦片底图教程

1. 自定义 TileProvider

笔者注意到JSAPI THREE文档中关于底图加载上有XYZ加载支持，但是并没有找到相关的API，所以这里基于ImageryTileProvider自己实现了一个TileProvider，主要是参考BingImageryTileProvider的加载逻辑(编译混淆后的代码，阅读起来废了一些功夫)，改写了一下,主要是重写getTileURL方法

js 复制代码

class MyTileProvider extends mapvthree.ImageryTileProvider {

  // 这两个目前不知道有什么用，但是不配置会报错和报警，提示没有配置,报错信息如上
  _supportAllProjections = true;
  _useWebMeractorProjectionAndGrid = true;
  // 瓦片最大级别
  _defaultMaxLevel = 18;

  getTileURL(z, x, y) {
    return `http://localhost:8080/geoserver/gwc/service/tms/1.0.0/myws:geotiff_coverage@EPSG:900913@png/${z}/${x}/${y}.png`
  }
}

2. 添加图层到引擎中

csharp 复制代码

js
const myTiff = engine.add(new mapvthree.MapView({
  imageryProvider: new MyTileProvider()
}));

搞定，现在就能看到效果了