1.3geotrellis3.5.2-leaflet加载使用springboot编写的TMS服务

---

前言

• 注意：如果你没先看下我的第一篇文章-导读，建议还是先看下（导读）
• 目标：基于前面的成果，在springboot中使用已经切片好的瓦片数据编写发布TMS服务，并使用leaflet加载。
• 抢先体验：
  

步骤

1.编码

概述

• 本文重点在编写TMS接口，然后在leaflet中使用。

代码文件位置

功能代码

RenderTiff在上篇文章中已经讲解和测试过，本文重点在TmsController

package com.tiger.geotrellis.controller

import com.tiger.geotrellis.common.render.RenderTiff
import geotrellis.raster.render.{ColorMap, RGB, RGBA}
import geotrellis.store.file.FileValueReader
import geotrellis.store.hadoop.HadoopValueReader
import org.apache.hadoop.conf.Configuration
import org.apache.hadoop.fs.Path
import org.springframework.http.MediaType
import org.springframework.web.bind.annotation._

/**
  * TMS 接口
  */
@RestController
@RequestMapping(value = Array("/tile"))
class TmsController {

  //本地瓦片读取器
  val localReader = FileValueReader.apply("E:/study/bigdata/geotrellis/testdata/img/layers/")

  //hdfs瓦片读取器
  val configuration = new Configuration()
  val hdfsReader = HadoopValueReader.apply(new Path("hdfs://hztnode3:8020/data/test/layers"), configuration)

  /*
  * pm2.5渲染规则
  * */
  val colorMapPm25: ColorMap =
    ColorMap(
      Map(
        0.0 -> RGBA(255, 255, 255, 1),
        35.0 -> RGB(0, 228, 0),
        75.0 -> RGB(255, 255, 0),
        115.0 -> RGB(255, 126, 0),
        150.0 -> RGB(255, 0, 0),
        250.0 -> RGB(153, 0, 76),
        1000.0 -> RGB(126, 1, 35)
      )
    )

  /**
    * 单波段数据（pm2.5）TMS服务
    *
    * @param zoom 级别
    * @param x    x轴瓦片索引值
    * @param y    y轴瓦片索引值
    * @return
    */
  @GetMapping(value = Array("/singleband/{z}/{x}/{y}"), produces = Array(MediaType.IMAGE_PNG_VALUE))
  @ResponseBody
  def getSinglebandTile(@PathVariable("z") zoom: Int, @PathVariable x: Int, @PathVariable y: Int): Array[Byte] = {
    val layerName = "singlebandLayerJson"
    //调用方法，读取hdfs中单波段瓦片
    val png = RenderTiff.renderHdfsSinglebandTile(hdfsReader, layerName, zoom, x, y, colorMapPm25)
    /*
    //调用方法，读取本地文件夹中单波段瓦片
    val png = RenderTiff.renderLocalSinglebandTile(localReader, layerName, zoom, x, y, colorMapPm25)
    */
    //返回图片的byte数组
    png.bytes
  }
  /**
    * 多波段数据（真彩色遥感影像）TMS服务
    *
    * @param zoom 级别
    * @param x    x轴瓦片索引值
    * @param y    y轴瓦片索引值
    * @return
    */
  @GetMapping(value = Array("/multiband/{z}/{x}/{y}"), produces = Array(MediaType.IMAGE_PNG_VALUE))
  @ResponseBody
  def getMultibandTile(@PathVariable("z") zoom: Int, @PathVariable x: Int, @PathVariable y: Int): Array[Byte] = {
    val layerName = "multibandLayerJson"
    //调用方法
    val png = RenderTiff.renderHdfsMultibandTile(hdfsReader, layerName, zoom, x, y)
    /*
    //调用方法，读取本地文件夹中单波段瓦片
    val png = RenderTiff.renderLocalMultibandTile(localReader, layerName, zoom, x, y)
    */
    //返回图片的byte数组
    png.bytes
  }
}

TMS接口编写好之后，启动web项目。

前端调用

• 前端使用vue框架，然后地图加载使用leaflet，细节不讲了。不了解的可以去吧基础的学习下。
• 其实就是使用leaflet中的 L.tileLayer进行瓦片图层的加载。可以看下leaflet的文档https://leafletjs.com/reference-1.7.1.html
• 添加两个按钮
  
  加载刚才发布的TMS服务
  
  加载瓦片图层最重要的就是一个地址模板：
  //单波段
  http://127.0.0.1:8080/tile/singleband/{z}/{x}/{y}
  //多波段
  http://127.0.0.1:8080/tile/multiband/{z}/{x}/{y}

2.结果

单波段加载结果

多波段加载结果，浦城县的一小块影像图

总结

• 编写测试了单波段和多波段瓦片发布成TMS服务并使用leaflet加载，到目前为止，从切片，到加载切片一个流程基本上是完整了。
• 下一篇推出根据经纬度查询对应的值，例如在地图上点击查询该点的pm2.5的值。
• 欢迎互相学习，交流讨论，本人的微信：huangchuanxiaa。

参考

• 官方文档：https://geotrellis.readthedocs.io/en/v3.5.1