Geoserver配置

1. 准备 GeoTIFF 文件 确保 TIFF 文件是 GeoTIFF 格式（包含地理坐标信息）。

如果文件没有坐标信息，可以使用 QGIS、ArcGIS 等工具添加地理参考。

2. 登录 GeoServer 打开浏览器，输入 GeoServer 地址（默认是 http://localhost:8080/geoserver）。

使用管理员账号登录（默认账号 admin，密码 geoserver）。

3. 创建工作区

• 左侧菜单点击 【工作区】。
• 点击 【添加新的工作区】。
• 填写：
• 名称：自定义（如 my_workspace）。
• 命名空间 URI：可填写 http://my_workspace（仅需保持唯一性）。
• 点击 【提交】。

4. 创建数据存储

• 左侧菜单点击 【存储】。
• 点击 【添加新的数据存储】。
• 选择 【GeoTIFF】 作为数据源类型。
• 配置参数：
• 工作区：选择刚创建的工作区（如 my_workspace）。
• 数据源名称：自定义（如 my_tif_store）。
• 连接参数 > URL：点击 【浏览】，上传你的 GeoTIFF 文件。
• 点击 【保存】。

5. 发布图层 创建存储后，页面会自动跳转到 【发布图层】 界面。

在 【图层列表】 中找到你的 GeoTIFF 文件，点击 【发布】。

配置图层参数：

• 名称：图层标识（如 my_tif_layer）。
• 标题：图层显示名称（如 我的TIFF图层）。
• 摘要：描述信息（可选）。
• 坐标系：
• 声明：确保 EPSG 代码正确（如 EPSG:4326 或 EPSG:3857）。
• SRS处理：选择 强制声明。
• 边界框：点击 【从数据中计算】 自动生成地理范围。
• 点击 【保存】。

6. 预览 WMS 服务 左侧菜单点击 【图层预览】。

找到刚发布的图层（如 my_tif_layer）。

点击 【OpenLayers】 或 【WMS】 链接，查看地图是否正常显示。

如何去掉黑色或其他纯色的背景色

1. 打开编辑图层界面→数据
2. 覆盖参数在Input Transparent Color填入需要覆盖的颜色比如我想把给色变为透明，则设置#000000

Mars3D前端加载部分

js
const initwmslayertest = (layername) => {
  // 定义 WMS 服务的 URL，指向 GeoServer
  let url = 'http://xxxxxxxxxxxxx/geoserver/zzmtest/wms';
  
  // 创建一个 WMS 图层实例
  let tileLayer = new mars3d.layer.WmsLayer({
    zIndex: 1000, // 设置图层的叠放顺序，1000 代表较高的层级
    url: url, // 指定 WMS 服务的 URL
    id: layername, // 设置图层的唯一 ID，便于管理
    name: layername, // 设置图层的名称
    opacity: 0.5, // 设置图层透明度，0.5 代表半透明
    layers: "NDVI", // 指定 WMS 请求的图层名称，需与 GeoServer 配置一致
    parameters: {
      transparent: true, // 使图层背景透明
      format: 'image/png', // 设置返回的图片格式为 PNG
    },
    getFeatureInfoParameters: {
      feature_count: 30, // 设置点击时最多返回的要素数量
    },
    popupOptions: {
      horizontalOrigin: Cesium.HorizontalOrigin.LEFT, // 设置弹出框的水平对齐方式
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 设置弹出框的垂直对齐方式
      offsetX: -14, // 调整弹出框的水平偏移量
    },
    show: false, // 默认不显示图层
    featureToGraphic: mars3d.Util.geoJsonToGraphics, // 将 WMS 返回的 GeoJSON 数据转换为矢量图形
  });
  
  // 将创建的 WMS 图层添加到地图中
  window.map.addLayer(tileLayer);
  
  // 监听 WMS 图层的 click 事件，获取点击位置的数据信息
  tileLayer.on(mars3d.EventType.click, (event) => {
    if (event) {
      console.log(event); // 打印点击事件返回的数据，便于调试
    }
  });
}