vue+leaflet示例:直接读取geoTIFF像素值(附源码下载)

demo源码运行环境以及配置

• 运行环境：依赖Node安装环境，demo本地Node版本:14.19.1。
• 运行工具：vscode或者其他工具。
• 配置方式：下载demo源码，vscode打开，然后顺序执行以下命令：
  （1）下载demo环境依赖包命令：npm i
  （2）启动demo命令：npm run dev
  （3）打包demo命令： npm run build:release

示例效果

本篇实现的思路：参照github源码：leaflet读取tif插件，在github源码基础上稍作一点修改实现的，具体的参数以及源码看github说明即可。

• 核心源码

<template>
  <div style="width: 30%; float: left">
    <h1>Leaflet读取geoTIFF示例</h1>
    <p>
      根据多边形范围来裁剪geoTIFF
      <button type="button" @click="toggleClip">Toggle</button>
    </p>
    选择渲染颜色带
    <select @change="changeColorScale">
      <option selected="" value="rainbow">Rainbow</option>
      <option value="viridis">Viridis</option>
      <option value="greys">Greys</option>
    </select>
    <p>
      0
      <img
        id="colorScaleImage"
        src=""
        style="vertical-align: middle; height: 20px; width: 200px"
      />
      30 kts
    </p>
    <p>拾取点获取geoTIFF风速值: <span id="windSpeedValue"></span></p>
  </div>
  <div id="map"></div>
  <div class="titleContainer center">
    <span>vue+leaflet示例:直接读取geoTIFF像素值</span>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import L from "leaflet";
import config from "../config";
let map = null;
let marker = null;
let windSpeed = null;
let clipMask = [
  [153.477409376, -28.1570717509999],
  [153.485948960001, -28.1570278689999],
  [153.531166368, -28.175248371],
  [153.552171456, -28.1644083329999],
  [153.569944, -28.201733008],
  [153.567178016, -28.2308560039999],
  [153.57144, -28.2468339915],
  ……
  ……
];
onMounted(() => {
  // 待加载的 JS 文件数组
  const files = [
    "./lib/geotiff/geotiff.js",
    "./lib/geotiff/plotty.js",
    "./lib/geotiff/leaflet-geotiff.js",
    "./lib/geotiff/leaflet-geotiff-plotty.js",
    "./lib/geotiff/leaflet-geotiff-vector-arrows.js",
  ];
  loadScripts(files, function () {
    console.log("All scripts loaded");
    initMap();
  });
});
const loadScripts = (files, callback) => {
  if (files.length === 0) {
    callback();
    return;
  }
  const file = files.shift();
  const script = document.createElement("script");
  script.onload = function () {
    loadScripts(files, callback);
  };
  script.src = file;
  document.head.appendChild(script);
};
const initMap = () => {
  for (let i = 0; i < clipMask.length; i++) {
    const tmp = clipMask[i][0];
    clipMask[i][0] = clipMask[i][1];
    clipMask[i][1] = tmp;
  }
  // 创建地图对象
  map = L.map("map", {
    attributionControl: false,
  }).setView([-33, 147], 6);
  //创建底图切换数据源
  const baseLayer2 = L.tileLayer(config.baseMaps[1].Url); //ArcGIS影像图
  map.addLayer(baseLayer2); //地图默认加载的底图
  const renderer = L.LeafletGeotiff.plotty({
    displayMin: 0,
    displayMax: 30,
    clampLow: false,
    clampHigh: true,
    colorScale: "rainbow",
    arrowSize: 20,
  });
  windSpeed = L.leafletGeotiff("./lib/geotiff/wind_speed.tif", {
    band: 0,
    renderer: renderer,
  }).addTo(map);
  document
    .getElementById("colorScaleImage")
    .setAttribute("src", windSpeed.colorScaleData);

  map.on("click", function (e) {
    if (!marker) {
      marker = L.marker([e.latlng.lat, e.latlng.lng]).addTo(map);
    } else {
      marker.setLatLng([e.latlng.lat, e.latlng.lng]);
    }
    document.getElementById("windSpeedValue").innerHTML =
      windSpeed.getValueAtLatLng(e.latlng.lat, e.latlng.lng)
        ? windSpeed.getValueAtLatLng(e.latlng.lat, e.latlng.lng).toFixed(1)
        : "";
  });
};
const toggleClip = () => {
  const newClipMask = windSpeed.options.clip ? undefined : clipMask;
  windSpeed.setClip(newClipMask);
};
const changeColorScale = (event) => {
  windSpeed.setColorScale(event.target.value);
  document
    .getElementById("colorScaleImage")
    .setAttribute("src", windSpeed.colorScaleData);
};
</script>

<style scoped>
#map {
  width: 70vw;
  height: 100vh;
  float: left;
}
.titleContainer {
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, 0.45);
  height: 50px;
  width: 70vw;
  z-index: 999;
  font-size: 14px;
  color: #fff;
  font-size: 28px;
  margin-left: 30vw;
}
.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>

下载源码：GIS之家的学习交流圈