社区首页 >专栏 >cesium使用tif切片的几种方法

cesium使用tif切片的几种方法

原创

治电小白菜

发布于 2024-12-27 03:16:35

8630

文章被收录于专栏：技术综合技术综合

最近在学习cesium的使用，所以调研了几种使用的方法

方法汇总

对tif进行切片，通过静态服务器（nginx）提供服务
直接对整张tif进行解析渲染
使用geoserver基于tif提供wms服务

方法一：对tif进行切片，通过静态服务器（nginx）提供服务

1. GDAL工具介绍

GDAL是一个用于栅格和矢量地理空间数据格式的转换库。我们主要使用其中的一个工具gdal2tiles，这是一个生成包含TMS瓦片、KML文件和简单网页查看器的目录的工具。

2. GDAL工具安装

进入网址根据不同系统查看

这里以macos为例，直接使用brew安装

brew install gdal

3. 进行切片

例如有一个hf.tif，我们使用gdal2tiles对他进行切片

gdal2tiles --zoom=0-10 --xyz  hf.tif output

--zoom=0-10 设置放大层级为0-10
--xyz 生成XYZ瓦片（OSM滑动地图标准）而不是TMS。在默认模式（TMS）下，y=0的瓦片是最南端的瓦片，而在XYZ模式下（OGC WMTS也使用该模式），y=0的瓦片是最北端的瓦片。
output 生成的切片文件存放到output文件夹

4. 提供服务

生成后的切片，通过nginx提供服务就行了

server {
    listen 8889;
    server_name  localhost;
    location /map {
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT';
        add_header 'Access-Control-Allow-Headers' '*';
        alias html/tiles;
        if ($request_method = 'OPTIONS') {
            return 200;
        }
    }
}

5. cesium中使用

const tmsLayer = viewer.scene.imageryLayers.addImageryProvider(
    new Cesium.UrlTemplateImageryProvider({
        url: 'http://localhost:8889/map/{z}/{x}/{y}.png',
        credit: layer.name
    })
)

方法二：直接对整张tif进行解析渲染

1. TIFFImageryProvider介绍

用来在Cesium中加载GeoTIFF/COG（Cloud optimized GeoTIFF）的插件。是一个GitHub上的开源插件，前往仓库查看。插件核心基于geotiff.js，从各种不同的(Geo) TIFF 文件类型读取(地理空间)元数据和原始数组数据。

2. 使用方法

具体可以查看插件的文档

安装依赖

#npm
npm install --save tiff-imagery-provider

#yarn
yarn add tiff-imagery-provider

#pnpm
pnpm add tiff-imagery-provider

下面示例是渲染一个tif，并使用单波段伪彩色对其进行上色。如果遇到坐标不兼容问题，可以使用proj4将tif坐标系转换成EPSG:4326。

const providertif = await TIFFImageryProvider.fromUrl('/hf.tif', {
    renderOptions: {
        single: {
        "colors": [
            [1, "rgb(154, 206, 127)"],
            [2, "rgb(163, 214, 245)"],
            [3, "rgb(255, 251, 177)"],
            [4, "rgb(193, 114, 97)"],
            [5, "rgb(220, 100, 120)"],
            [6, "rgb(49, 173, 105)"]
        ],
        type: "discrete",
        useRealValue: true // use real value in colors stops
        }
    },
    projFunc: (code) => {
        // 坐标系转换事例
        if (code === 32649) {
        proj4.defs("EPSG:32649", "+proj=utm +zone=49 +datum=WGS84 +units=m +no_defs +type=crs");
        return {
            project: proj4("EPSG:4326", "EPSG:32649").forward,
            unproject: proj4("EPSG:4326", "EPSG:32649").inverse
        }
        }
    }
})
// 由于库的类型定义冲突，所以暂时忽略https://github.com/hongfaqiu/TIFFImageryProvider/issues/42
// @ts-ignore
const tifLayer = viewer.scene.imageryLayers.addImageryProvider(providertif)

方法三：使用geoserver基于tif提供wms服务

1. geoserver介绍

GeoServer是一款用来采用Java编写的，允许用户分享与编辑地理空间数据的开源软件。

2. 安装

这里使用podman进行安装（docker同理）

podman run -it -p8080:8080 \
  --mount type=bind,src=~/geoserver,target=/opt/geoserver_data \
  docker.osgeo.org/geoserver:2.25.4

配置路径/opt/geoserver_data映射到~/geoserver，方便后续将tif放入系统中。

镜像启动后访问链接 http://localhost:8080/geoserver

默认用户名/密码：admin / geoserver

3. geoserver跨域问题处理

由于geoserver的服务需要浏览器调用使用，所以需要解决跨域问题

1）进入镜像终端

podman exec -it 镜像id /bin/bash

2）安装vim

chmod 777 /tmp && apt-get update && apt install vim -y

3）编辑tomcat配置文件

vim /usr/local/tomcat/webapps/geoserver/WEB-INF/web.xml

直接到文件中粘贴

<filter>
    <filter-name>cross-origin</filter-name>
    <filter-class>org.eclipse.jetty.servlets.CrossOriginFilter</filter-class>
    <init-param>
    <param-name>chainPreflight</param-name>
    <param-value>false</param-value>
    </init-param>
    <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>

4）下载指定jetty版本

a. 访问对应geoserver版本的pom文件，查看jetty版本，我这里是2.25.4

https://github.com/geoserver/geoserver/blob/2.25.4/src/pom.xml

b. 下载指定jetty的jar包

https://mvnrepository.com/artifact/org.eclipse.jetty/jetty-servlets/9.4.55.v20240627

https://mvnrepository.com/artifact/org.eclipse.jetty/jetty-util/9.4.55.v20240627

右键获取链接，到镜像中wget下载即可

cd /usr/local/tomcat/webapps/geoserver/WEB-INF/lib
wget https://repo1.maven.org/maven2/org/eclipse/jetty/jetty-servlets/9.4.55.v20240627/jetty-servlets-9.4.55.v20240627.jar
wget https://repo1.maven.org/maven2/org/eclipse/jetty/jetty-util/9.4.55.v20240627/jetty-util-9.4.55.v20240627.jar

5）重启镜像

podman restart 7f8b0dedd3d3

4. 使用geoserver基于tif提供wms服务

1）添加新的工作空间

例如起名test，url可以暂时随便写

2）添加新的存储仓库

数据源选择GeoTIFF - Tagged Image File Format with Geographic information

工作空间选择刚刚创建的test，数据源名称填写例如hftest，将hf.tif放置到刚刚镜像映射的目录~/geoserver下，例如我创建了个tif文件夹存放，这样连接参数浏览文件时就可以查看到。

点击保存后，进行发布

进入到编辑图层页面，可以先直接点击保存即可

3）图层预览

可以在图层预览页面看到刚刚发布的图层

可以点击常用格式下的OpenLayers预览图层

4）cesium中使用

 const tifLayer = new Cesium.WebMapServiceImageryProvider({        
  url: 'http://localhost:8080/geoserver/test/wms',        // geoserver服务地址
  layers: 'test:hf',                                // 工作区名：图层名
  parameters: {
    service: 'WMS',
    format: 'image/png',
    srs: 'EPSG:4326',
    transparent: true,
  }
})
viewer.imageryLayers.addImageryProvider(tifLayer)

总结

几种方法各有利弊，

对tif进行切片，通过静态服务器（nginx）提供服务对tif进行切片需要一定的时间，如果对效率没要求的可以。
直接对整张tif进行解析渲染需要页面下载整张tif图，tif一般都几十M或者上百M往上，加载会有延迟，并且解析时会导致浏览器卡顿。
使用geoserver基于tif提供wms服务只需要导入发布即可使用服务，但是需要独立部署这套系统，如果需要集成现有系统，需要对接其api实现，有一定学习成本。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

geoserver